Stop a background image from disappearing in IE when the inline element spans 2 lines

Question

On this page there is a list of footer links that have a little background image to place the dash before each one. This works fine in FireFox but in IE 6, 7 & 8 the background image for the item that spans 2 lines (Workplace Giving Employers) disappears. Why is this & does anyone know how to fix it?

Answer 1

I've seen that before and although I don't know the reason it happens, you can fix it by changing your CSS to this:

#mainlevel-nav li {
   background: url(../images/arrow-vline.gif) no-repeat 0 3px;
}

The 3px is the vertical position of the image, so you'll need to adjust this until the graphic looks centered.

Since this is only needed for IE, I would recommend putting this in an IE only stylesheet since 'left center' is a better declaration.

Edit: Turns out this is a hasLayout bug. Here's the CSS that'll do the trick for you:

#mainlevel-nav li {
   background: url(../images/arrow-vline.gif) no-repeat left center;
   zoom: 1;
}