Given that I’ve probably ostracised half of my regular readers with my previous geeky rant about MySpace, I thought I’d get all of the geekiness out of the way in one day before we return to our regular scheduling of handmade jewelry, indie design and other arty stuff.
You see, I’m pretty sure I’ve found a new and very simple fix for a nasty list styling problem in IE6 and I’m hoping to become a godlike figure in CSS circles … or something.
Before the non-geeky readers turn off completely – please, please … get Firefox and ditch Internet Explorer as your browser if you’re still using it. It will make good web designers all over the world love you long time! It will also make you a happy browser in many ways. Trust me.
So, back to the CSS. Those of you who try to build standards compliant sites with CSS layouts may well have seen this bug, where IE6 starts using the most general styling you’ve set for lists even in places where that styling is very clearly overwritten with a class/ID which has different styling in the CSS.
I’ve recently had this problem right across a new site design, simply because I wanted most general lists to be bulletted with a little brown square by way of an image. Suddenly in IE6 my little brown square was randomly popping up in all sorts of other lists, despite those lists very, very clearly having ‘list-style: none;’ written in the CSS. Of course every other browser on the planet got it, but not IE6.
I found this fix from Focal Curve, which I started putting into place. The fix basically tells you to be very specific with your selectors in order to override IE6′s complete stupidity – and ideally have all lists with a specified bullet style residing in a specific div which you give this specific style to.
In my case, I couldn’t do this without creating a special div just for these particular lists, which I didn’t want to do. The lists are being used in all sorts of different divs and it was those without the styling that were more consistent. So instead I gave all of those very, very specific selectors, listing the div they reside in along with all of the nested divs above.
However, while it worked a lot of the time, in some instances it just didn’t. Plus I started having CSS selectors that looked like War & Peace, given that my fluid-width design needs to have a lot of nested divs due to various other IE6 bugs to do with fluid box measurements that I won’t bore you with here (have I mentioned that IE sucks?).
So I kept battling away at this issue until I finally hit upon a fix that works – at least for me – apparently all of the time. I’ve not seen it mentioned anywhere else, so I’m hoping that if I share it then other people might find it useful.
Basically, if you’ve set a style in your CSS for all general lists as follows:
ul li {
list-style: square url(/img/bullet.gif);
}
And then you want to have, for instance, a navigation menu with a class of ‘nav’ with no list style image set you need to put in declarations for both list-style and list-style-image as follows:
ul.nav li {
list-style: none;
list-style-image: none;
}
Yes, it’s effectively the exact same piece information written out in two different ways – the second line should really be regarded as redundant. But IE6 eats it and all is well in my world – at least when it comes to this bug! I’ve since tried out the same technique in other designs and so far so good.
I’m not sure how it would go if you’re problem isn’t specific to using an image as a bullet, but I’d love to hear how it pans out in other scenarios. My guess is that if you write out both the shorthand and longhand versions of what you want, IE will finally get it.
May IE of all flavours soon die even more painful deaths than the one I recently wished upon MySpace!
