Strange Space in IE Only

[SniperX]

IE 6. XPSP2

Problem:
IE placing a gap below the navigation menu. No issue in Opera or Firefox.

URL: http://studio-x.homedns.org/

Relevant CSS Code

td.menu
{
	height: 34px;
	background: #CDDCFC url(/assets/images/site/global/bg-menu.png) repeat-x top left;
}

.cssnav {
	position: relative;
	background: transparent url(/assets/images/site/global/btn-over.gif) no-repeat top left;
	white-space: nowrap;
	display: inline;
	width: 120px;
	height: 34px;
	top: 0px;
	margin: 0;
	padding: 0;
	float: left;
}

.cssnav a {
	display: block;
	color: #000000;
	font-size: 11px;
	width: 120px;
	height: 34px;
	display: block;
	float: left;
	color: #FFFFFF;
	text-decoration: none;
}

.cssnav a:hover {
	color: #FFFFFF;
}

.cssnav img {width: 120px; height: 34px; border: 0;}
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}

.cssnav span {
	position: relative;
	float: left;
	left: 10px;
	top: -25px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	text-align: center;
	width: 100px;
	height: 14px;
}

Build Code

      <td colspan="2" class="menu">
         <div class="cssnav">
            <a href="http://studiox-designs.org" title="Home">
            <img src="assets/images/site/global/btn-down.gif" 
            width="103" height="32" alt="Home" /><span>Home</span></a>
         </div>
         <div class="cssnav">
            <a href="http://studiox-designs.org" title="Invision Skins">
            <img src="assets/images/site/global/btn-down.gif" 
            width="103" height="32" alt="Invision Skins" /><span>Invision Skins</span></a>
         </div>
         <div class="cssnav">
            <a href="http://studiox-designs.org" title="Web Templates">
            <img src="assets/images/site/global/btn-down.gif" 
            width="103" height="32" alt="Web Templates" /><span>Web Templates</span></a>
         </div>
         <div class="cssnav">
            <a href="http://studiox-designs.org" title="Tutorials">
            <img src="assets/images/site/global/btn-down.gif" 
            width="103" height="32" alt="Tutorials" /><span>Tutorials</span></a>
         </div>
         <div class="cssnav"><a href="http://studiox-designs.org" 
            title="Graphics Software Reviews">
            <img src="assets/images/site/global/btn-down.gif" 
            width="103" height="32" alt="Graphics Software Reviews" /><span>Reviews</span></a>
         </div>
         <div class="cssnav">
            <a href="http://studiox-designs.org" title="Forums">
            <img src="assets/images/site/global/btn-down.gif" 
            width="103" height="32" alt="Forums" /><span>Forums</span></a>
         </div>
      </td>

I've tried altering the various heights, assuming that would solve it, but alas no.

[Paul O'B]

Hi,

Ie seems to be allocating the space for your span even though you have moved it.

You could change it to absolute positioning which will close the gap.

.cssnav span {
position: absolute;
top:9px;
left: 10px;
margin: 0;
padding: 0;
cursor: pointer;
text-align: center;
width: 100px;
height: 14px;
}

Just check it doesn't harm anything else. Seems ok in ie6, firefox and opera 7.5

Hope it helps anyway.

Paul

[SniperX]

Thanks again, Paul.

You never cease to amaze me.