Welcome to WebmasterWorld Guest from 220.127.116.11
Forum Moderators: not2easy
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?
background : url(images/arrow.gif) left 0%;
You could try:
background:url(images/arrow.gif) left top no-repeat;
"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.
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"...?