IE6 problem with LI and background-image

[malikyte]

Example URL:
http://www.sspl.org/temp/issue/issue.html

Problem Description:
I've tested this design in IE6, IE7 (VPC), Firefox 2.0.x, Opera 9.x, and Swift (as I don't have a Mac here; it's the closest resemblance). It seems to look and act almost identical in all browsers, except for an issue I'm having with a specific UL and its LI elements. Rather than use the problematic (in terms of cross-browser compatibility) CSS style of list-style-image, I decided to simply use a background image and give a left padding to the LI items.

Unfortunately, on my test machine, none of the background images show up. On a separate machine, all but the first will show -- until I refresh the page, then they may disappear or will still be missing the very first bullet background image.

Does anyone have any idea on what may be going on here?

The CSS file has not been minimized the the least possible denominators simply because I wasn't entirely sure where the problem may have been coming from...my apologies for that.

[Dan Schulz]

Try adding a background color to the list items. This could be one of IE's many bugs that can be cured with such a simple fix.

[malikyte]

I just tried that and had no luck. At first it showed the first as still not having a background color, and the rest with the background color set...then I refreshed the page and it disappeared. I tried a completely different machine out of curiosity (that wouldn't have had anything cached) and came up with the same result (no background color or image).

It's as if IE skips all my background-* assignments for that ID. It is in fact reading the padding assignment, however.

When I had a dialog open for IE's settings, the dialog hovered over the list. When I then closed the dialog box, the background and bullet images for two of the LI's showed up. I refreshed the page and they again disappeared.

[Dan Schulz]

Hmm... weird. I'll have to take a look at it when I get back home then.

[Kravvitz]

Try giving hasLayout to the list. To understand what hasLayout is, read some of these: (I discourage the use of the underscore hack, which the first one recommends though.)
http://www.satzansatz.de/cssd/onhavinglayout.html
On Having "Layout"
"HasLayout" Overview
A TripSwitch? - set hasLayout to true without a dimension
IE/Win: inline-block and hasLayout
Clarification of inline-block and hasLayout

[malikyte]

Kravvitz - you win the cookie award. Although I knew about hasLayout, I haven't dealt with it in a long time and completely forgot about it; I also wasn't aware of the list-element problems. Dan, thanks for trying to help, and then offering further assistance!

Either of you want a little PayPal payback?

Thank you both very, very much!