IE6, IE7, and a weird padding on top of my LI elements

Tuesday, April 27th, 2010 at 4:04 pm

I had a ul with top padding of 10px with a variety of li’s inside.


<ul>
<li><a href="#">Music Production</a></li>
<li class="odd"><a href="#">Guitar</a></li>
<li><a href="#">Songwriting</a></li>
<li class="odd"><a href="#">Bass</a></li>
<li><a href="#">Arranging</a></li>
<li class="odd"><a href="#">Keyboard</a></li>
<li><a href="#">Voice</a></li>
<li class="odd last"><a href="#">Theory, Harmony &amp; Ear Training</a></li>
<li class="last"><a href="#">Music Business</a></li>
</ul>

Here’s the CSS:


#courses-and-programs ul { list-style: none; margin: 0; padding: 10px 0 0 0; font-size: 1.1em; font-weight: bold;
border-top: 1px dashed #ccc; }
#courses-and-programs ul li { margin: 0; padding: 0; border-bottom: 1px solid #ccc; line-height: 1.8; display: inline; float: left; width: 47%;}
#courses-and-programs ul li.odd { margin: 0 0 0 10px; float: right; }
#courses-and-programs ul li a { text-decoration: none; padding: 0; margin: 0; }
#courses-and-programs ul li a:hover { color: #333; }

Removing the floats and the width made the padding disappear. I thought it was kind of odd and started looking into it more… and then I noticed the CSS on the ul with the top 10px of padding. I removed it on a whim, and IE6/IE7 found themselves magically fixed. I was getting an extra 10px of padding on the top of the li’s just because I had it on the ul.

Thanks, IE, for assuming that I wanted that extra padding on every li! Anyway, it’s fixed now, and instead of padding on the top I am using margin :)

You can leave a response, or trackback from your own site.

Leave a Reply