I have been working on a redesign of a website for Equinox.com for a few months now. I recently started coding the redesigned site from scratch. In the process, I have been addressing a lot of cross-browser issues. The code needs to support IE6, IE7, IE8, FF3, and Safari 3.
Today, I finally addressed a bug that had been bothering me for a few days. In IE8, FF3, and Safari 3, the site looks pretty much like this:
Beautiful, right?
Well, the calendar is a <ul> with an <li> for each day. IE6 and IE7 were adding this extra space under each <li> tags.
I changed the background color of the calendar block from black to red to highlight the extra space in this image:
That extra red space was driving me nuts. After doing a few searches, I wasn’t able to find any information or fixes relating to my problem. After experimenting with some different CSS rules, I found changing the display attribute of the <li> to “inline” provided a nice solution. Here’s a quick code sketch:
div.calendar ul li {
display: inline;
}
This allows IE6 & IE7 to render the HTML the same as IE8, FF3, and Safari 3.
This fix apparently doesn’t work in all instances. I found a similar bug, but the above fix didn’t have an effect.