IE 7 Bugs are at it again!

Today's fun is with Unordered Lists. The basic structure is like this:

• something
• something else
• another something

The styles that go with it are pretty simple too:

list-style-type
list-style-image
list-style-position

So why does it have to be so hard for Internet Explorer to render these little buggers correctly? If you can answer that question, Fly to Seattle and let MS know... maybe they'll make you a millionaire...

Okay... enough of the bashing and onto the issue at hand.

1. IE does not correctly handle margin/padding with image bullets... lets say you want there to be a 10px top margin so that your bullets are not stacked right on top of each other, FireFox does just fine... IE moves the text but forgets to line up the bullet... the solution? Take your bullet image and add some transparent canvas to the top... luckily, FF will still line the image up for you.

2. IE does not like if you specify a height on an LI where you are using "list-style-position:inside;". For whatever untold reason, IE decides to make it "list-style-position:outside;" instead. This is clearly a bug. FF also handles this correctly... the solution? either add padding-bottom to the LI or margin-top to an element inside the LI.

3. If you set the UL & LI to "padding:0;" and "margin:0;" and set "list-style-position:inside;" with a nested LI that is set to "list-style-position:none", IE does not correctly align the first line within the nested LI.

The first line within the nested LI gets indented to the same position it's parent LI, while every subsequent line is flush to the left. Again, clearly a bug... Again, FireFox handles this fine making both lines flush left. The solution? Add a break tag before the text... the downside is, this leaves vertical space between "item:" and your first line of text in BOTH browsers. Another solution is to use an empty div tag with it's height set to 0. This will fix indention problem in IE, still giving a horizontal space (because of a separate but related bug that causes the div to live below the indented first line) but still allowing FF to render correctly. Man what a pain! Thankfully, I was able to "overcome" this issue by making the background image of the header for the bulleted LI taller and just using a the blank div tag fix... This unfortunately won't work for everyone...


I know there were a couple others I had to deal with, but I am way too tired after spending the last 5 hours trying to make this work...

So you ask yourself why even use these pesky unordered lists if IE is so incompatible? I am asking myself that right now... HA! No, but really, the reasons are two fold. First, it gives the content semantically correct placement on the page, which is important for things like search engines and screen readers. Secondly, it is to create an accordion style menu that can expand and collapse showing additional navigational options.

I keep hoping and praying that one day, Microsoft will figure out how much pain and suffering they have been putting web developers though and start working as a standards compliant browser. There's always hope for IE8... of course that's what everyone was saying about IE7...