SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Strange Space in IE Only

    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

    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
    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.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    .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

  3. #3
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again, Paul.

    You never cease to amaze me.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •