CSS-background problems on <a> elements in IE

So I got this sidebar with this code in the NORMAL stylesheet:

li.widgetcontainer a{
	background: url(images/link_decoration.gif) repeat-x bottom left;
	display: inline;
	color: #cdd0b6;
	text-decoration: none;
}

li.widgetcontainer li{
	display: block;
	margin-bottom: 2px;
}

But in my IE7 and less stylesheet I got this:

li.widgetcontainer a{
	display: inline-block;
}

At the moment the anchor tags in the class widgetcontainer linebreaks when they have a width larger than the class widgetcontainer. But when I change it inline it displays normally as I want it to. But then when a anchor have a large width it does not linebreak but the background-image displays only on the bottom of the anchor. The image is a 1px underline, so in IE7 and lower it only shows on the bottom of the second row.

Its hard to explain but think of a underline in this link: Think of this link with a underline but due to its long and takes up three rows the first and the second row wont have a backgroundimage in IE.