IE not displaying list-style-image with floated LIs

[evilregis]

Before I forget:

http://www.bkbonline.com/testforjay/style.htm
http://www.bkbonline.com/testforjay/nofloat.htm

This is odd to me. I've not come across anything like this before in either my own (limited) experience or in my reading.

It is a menu. It's an unordered list that is to be a two column menu, similar to a portal layout. The two column part is fine. But I tried to add an image using style-type-image. Works in everything but (let's say it together...) IE. It doesn't display the image.

IE, when I float the li stops displaying the image. Remove the float and it's fine. The URLs will explain it.

I've tried floating left and displaying inline and both just kill the image. Has anyone run into this before or know of a workaround?

Any help is appreciated. Thanks!

[mindlessLemming]

Yep, I run into this all the damn time :(
The solution I use is to ditch the list bullet and use a non-repeated background image on the <li> in conjunction with some left padding. Check any page of my site if you want examples.

If you want Good Browsers to use the proper method, you can put the no-bullet + background image version in an IE only stylesheet or use a selector that IE doesn't understand.
eg:

/* too smart for IE/pc */
html>ul li {
list-style-imge:url(foo.png);
}
/*too wrong for anyone but IE */
* html ul li {
list-style:none;
padding-left:16px;
line-height:18px;
background:#fff url(foo.png) no-repeat left center;
}

:)

[evilregis]

I owe you one mindlessLemming! Thanks much!

[katie]

This thread may be old but mindlessLemming, you are a genius. Just solved a problem I've been stuffing around with for ages.

And you're Aussie too. :thumbsup:

Thanks mate!