IE’s floated UL handling similiar to six year old child
So I know that there are tons of great sites and email lists out there that discuss problems that occur within web pages that use CSS to display styles on web browsers. By far the most popular browsers to pick on are the varietals of Microsoft’s Internet Explorer. Most of this is due to IE’s proprietary nature combined with the fact that Microsoft is no longer actively updated the browsers’ display capabilities or rendering engine. This information is already available on the web but today I need a place to vent so I’m doing so here.
The float style in CSS is used to allow one block-level element to “float” to one side or the other of another block-level element and thus create an effect normally achieved by two columns in a table. Normally I would use a table to display several columns and rows of tablular data that are displayed with varied lengths and widths. However, if I have two unordered lists and I’m only trying to put one next to the other one rather than displaying one below the next one as two default block-level lists would display I don’t need a table. It’s unwanted extra code that not only adds extra bytes to my file but also makes me look bad in geek land. So, instead I decide to add a hook to my <ul> in the form of a class attribute. Then, I go into my stylesheet and tell the hooked <ul> that I want it to float: left;. Since the <ul> is being output from a loop in a database pull I only have to add the class attribute once and then add the stylesheet rule and I’m done. Right? You would think.
So I reload the page in question in Firefox. No problem. I’m happy, Evgeni’s happy, Chris’s happy, we’re all good and I’m ready to move on. So I fire up Internet Explorer 6 because I want to make sure the page displays properly for the other 85% of web surfers out there. That’s where the problem begins. IE6 displays the unordered list where I want it, with one small detail missing. The bullets!
That’s right. The bullets are missing. The second UL hapily floats along side the first one as it’s told to do. But, for some reason all unordered lists that are floated to the left now have no bullets. The fix will need a bit more code and was quite apparent to me at first, but I wanted to vent a bit about it so here’s the workaround. Basically, if you wrap each unordered list in it’s own