Lacy Garrison » Bugs http://www.blog.lacygarrison.com Wed, 22 Sep 2010 17:41:03 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 IE6 & IE7 Bug: LI Tag with Extra Space http://www.blog.lacygarrison.com/2009/10/20/ie6-li-with-extra-space/ http://www.blog.lacygarrison.com/2009/10/20/ie6-li-with-extra-space/#comments Tue, 20 Oct 2009 23:27:33 +0000 Lacy Garrison http://www.blog.lacygarrison.com/?p=39 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:

4

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.

4

I changed the background color of the calendar block from black to red to highlight the extra space in this image:

4

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.

4

This fix apparently doesn’t work in all instances. I found a similar bug, but the above fix didn’t have an effect.

]]> http://www.blog.lacygarrison.com/2009/10/20/ie6-li-with-extra-space/feed/ 0