Hi,
I’m having a problem with list-style-image: url(‘’); on IE7: i’m using if for list itmes and the image just doesn’t show up.
I’ve done some googling about this matter and found that this is a known issue with IE7. sadly, i couldn’t find any hack/solution.
Is there anything i can do except for placing an actual image before every list entry?
Thanks
Well, because of issues getting list-style image to line up properly in all browsers anyway, most people do this instead:
Let’s say there’s a heart image to the left of each menu item.
the ul has already had its margins and padding zero’d.
li {
padding-left: 16px; (or whatever’s enough to move the text out of the way)
background: url(heart.gif) left center no-repeat;
}
thanks for replying Stomme poes, however, what you suggested wasn’t helpful 
when the page loads the images show for a split second and then disappear straight away. Implementing what you suggested just shifted the list items away from the images, but the images then quickly disappeared as mentioned…
any other ideas?
Was this after setting list-item to none?
If list-style: image is still in the code, I think I’ve seen before where IE7 still had issues. Also, sometimes IE doesn’t think
ul {
list-style: none;
}
is good enough, and needs it said on the li as well (although someone else did say that only happened in Quirks Mode so I’m not sure).
So,
ul, li { (or the id/class of this specific ul)
list-style: none;
margin: 0;
padding: 0; (if you don’t already have this)
}
Then as I already said:
ul li {
padding-left: whatever
background: url(heart.gif) left center no-repeat;
}
You may need to really get extra specific with IE if you are using a list-style on any other ul in your code. I usually set list-item: none in my “reset” part of my css-sheet-- setting display: list-style; seemed difficult to do later on, so I know changing list-styles can be a b*tch.
If setting list-style explicitly to none doesn’t help, post either the code or a link or a sample-link so we can see it in action (I have IE7 on the WIndows machine here at work).
Sorry thjis took a while, I wasn’t here : )
*Edit, here’s an example which works in IE7 (also IE6, FF, Opera, Safari, Konqueror):
However it is a very simple menu, and it’s easy to have other code mess with it.
Another option is setting the a’s to block (or float) and set the background image on them instead-- many developers I know try to leave the li’s alone since IE7 can get goofy with them-- instead, li is only told either a colour or display: inline or some such trigger, and the the a’s are fully styled instead.
I seached Google for this problem, and found this was the top result, and thought I’d share a fix I found.
If you go to webfx.eae.net/dhtml/pngbehavior/pngbehavior.html, you’ll find a Behavior that fixes png transparency issues in IE6, and also, for some reason I don’t understand, it makes list-style-image work perfectly in IE7. Can’t explain it, but it’s handy.
I’d also like to share what I’ve learned. It seems from an MSDN article that the implemention of IE7 of list-style-position (and then list-style) is partial (ie: buggy). And it seems that after using list-style-image I could just not reset it and then use background with padding which for me is so much better for custom bullets.
It appeared that setting background color and background image solved it, as if the list-style were managed internaly with background directives by IE7. Background transparent would not make it, it had to be a full colour AND the bullet as background URL.
In my case I was lucky as I need the change only in one place and background as a full colour.
But man, what a disastrous browser!!
Cfidecaro and willieram, welcome to SitePoint! Willieram, can you link to the MSDN article? You can post it like so: www dot msdn dot com / page dot html .
It appeared that setting background color and background image solved it, as if the list-style were managed internaly with background directives by IE7. Background transparent would not make it, it had to be a full colour AND the bullet as background URL.
I’ve seen background-color and that sort of thing solve IE problems before, it’s very strange because it’s not Haslayout. A famous one is the “trigger” IE sometimes needs to get positioned elements to change coordinates on a state change like :hover. Paul O’Brien uses something like
a:hover {
visibility: visible;
}
visibility is another of those that sets it off. Setting the font to bold, or a background colour, and a few other strange things do it.