Fix the Internet Explorer Dissapearing Bullet Bug
June 17th, 2005
I have been puzzled by the way IE displays list bullets beside left floated images for some time. Actually, doesn’t display list list bullets, is more accurately put. The list bullets on unordered lists (UL) and numbers on ordered lists (OL) are hidded behind the floated image. My usual response has been to add a massive amount of margin or padding to the floated image, but this is unsightly. Today, I devised a workaround that has its weaknesses, but at least seems to render consistently across browsers.
I begin by setting margin and padding to zero on the lists (UL and OL) to help things render equitably across browsers. Then I declare all margins on the list items (LI). This should even out cross-browser problems. The final rule is a class that can be applied to the list (UL or OL) and the resulting float causes everything to render beautifully in IE. Though the float causes real display problems in other browsers, the IE Only Hack hides it effectively.
ul, ol {margin:0;padding:0;}
ul li, ol li {margin:0 2em 0 2.25em;padding:0;}
* html .byfloatedimage{float: left;} /* IE Only Hack */
If you have any improvements on this method, or one that works more elegantly, please post it below!
Entry Filed under: CSS Bug Fixes, Tutorials
Bookmark This:
1 Comment
1. sterling | August 22nd, 2007 at 8:33 am
oh you are a scholar and a gentleman for posting this fix. I’ve been pulling my hair out over this problem with IE. Thank you!