My first CSS menu: mystery gap in IE

[mrjasonsweet]

I'm attempting to build an all-CSS site (for the first time) and I ran into a problem with my menu system. As you can see from the images, the tab graphic aligns nicely at the bottom in FF but in IE, it has a mysterious gap. For the life of me, I can't figure out where the problem lies. Any feedback would be greatly appreciated. Thanks much!

Relevant code bits are below:

<div id="menu">
<ul>
<li><a href="../index.html"><img src="../images/menu/imgHome_off.gif" alt="home" width="75" height="38" /></a></li>
<li><a href="../news/"><img src="../images/menu/imgNews_off.gif" alt="home" width="60" height="38" /></a></li>
<li><a href="../team/"><img src="../images/menu/imgRoster_off.gif" alt="home" width="108" height="38" /></a></li>
<li><img src="../images/menu/imgGear_off.gif" alt="home" width="120" height="38" /></li>
<li><a href="../recruit/"><img src="../images/menu/imgRecruit_on.gif" alt="home" width="104" height="38" /></a></li>
<li><a href="../alumni/"><img src="../images/menu/imgAlumni_off.gif" alt="home" width="72" height="38" /></a></li>
</ul>
</div>


}
.twoColLiqLtHdr #menu {
background: #666666;
height: 38px;
text-align: center;
padding-bottom: 0px;
padding-top: 5px;
margin-bottom: 0px;
display: block;
}
#menu img {
border-style: none;
margin: 0px;
padding: 0px;
}

#menu li {
display: inline;
list-style: none;
margin: 0px 2px;
padding-bottom: 0px;
}
#menu ul {
display: inline;
list-style: none;
cursor: default;
margin: 0px;
padding: 0px;
}

[koyama]

Had you not specified a height for #menu, the gap would have been there in Firefox too. From your explanation I am guessing that you are viewing the page in IE6.

As for the explanation of the different rendering in IE6 the effect is known as the expanding box problem (http://www.positioniseverything.net/explorer/expandingboxbug.html) affecting IE6 and earlier versions. These have broken support for the height and width property.

As for the gap, what you are seeing is actually the descender space below the baseline. Read this to learn more: Images, Tables, and Mysterious Gaps (http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps).

In your case the best fix may be this:

img {
vertical-align: bottom;
}

[mrjasonsweet]

Thank you koyama!

The article links were very interesting and you were right about using "vertical-align: bottom". Fixed my problem straightaway. :thumbsup: