Background image bug in IE

When text goes over two lines, background image appears in the wrong place

[bobming]

I've created a small icon to appear at the side of text links. I'm doing this with the following CSS:

a{
padding-left:14px;
background:url(images/arrow.gif) left no-repeat;
}

However, when the anchor text flows over two lines, IE 6 and 7 decide to place the image at the left most part of the link instead of within the padded area at the beginning of the link (Firefox and Safari do this fine).

Any ideas what I'm missing? Or is this an unavoidable bug with IE?

[penders]

Not sure, but you're missing a vertical position for your background image so I'm not too sure how the browser would interpret this. Certainly the W3C CSS Validator turns this into:

background : url(images/arrow.gif) left 0%;

(where has your background-repeat gone?)

You could try:

background:url(images/arrow.gif) left top no-repeat;

[bobming]

I'd tried that but it just placed the image a little bit higher, above where the second line in the link starts.

IE seems to be seeing the whole two lines of text as one block link and postitioning relevant to that (hope my description makes sense!)

[jetboy]

<a> is an inline element. According to the W3C's CSS 2.1 spec:

"The tiling and positioning of the background-image on inline elements is undefined in this specification. A future level of CSS may define the tiling and positioning of the background-image on inline elements."

so it looks like unchartered territory rather than a bug.

I replicated the issue, and couldn't get IE to play ball with the usual array of IE tweaks. You may have to settle with a extra non-semantic element for the bullet; maybe even using JS to drop them after page load. Alternatively, prevent the links from wrapping to multiple lines in IE with no-wrap.

[penders]

I'd tried that [left top] but it just placed the image a little bit higher, above where the second line in the link starts.

Ah ok, checking the W3C further it seems that for background-position:

If only one value is specified, the second value is assumed to be 'center'.

Although that doesn't quite explain what the W3C validator spits out as "valid CSS"...?