navigation box look longer in IE6

Discussion in 'CSS' started by mol, Feb 4, 2008.

0
  1. #1
    Hi all, need ur help

    I make navigation with image background, I set height for navigation box which is as same as image background height (64px).I preview it using FF and IE7 and everything OK, but preview it using IE6 the navigation box look longer than it should be.

    many thnx

    HTML code:
    <body>
    <div class="box">
    <ul id="navi">
    <li id="home"><a href="index.html" class="current">Home</a></li>
    <li id="product"><a href="product.html">Product</a></li>
    <li id="service"><a href="service.html">Service</a></li>
    <li id="faq"><a href="FAQ.html">FAQ</a></li>
    <li id="contact"><a href="contact.html">Contact</a></li>
    </ul>

    </div>
    </body>

    CSS code:
    body{
    margin-top:0;
    }
    .box{
    margin:0 auto;
    width:800px;
    height:300px;
    border:#666666 solid 1px;
    font:20px,Arial;
    }
    ul{
    list-style-type:none;
    margin:0;
    padding:0;
    }
    ul#navi{
    position:relative;
    margin:0 auto;
    width:750px;
    height:64px;
    border:red solid 1px;
    }
    ul#navi li a{
    position:absolute;
    display:block;
    height:64px;
    top:0;
    text-indent:-9999px;
    }
    ul#navi li#home a{
    left: 0;
    width:152px;
    background-image:url(home.jpg);
    }
    ul#navi li#product a{
    left: 152px;
    width:138px;
    background-image:url(product.jpg);
    }
    ul#navi li#service a{
    left: 290px;
    width:160px;
    background-image:url(service.jpg);
    }
    ul#navi li#faq a{
    left: 450px;
    width:130px;
    background-image:url(faq.jpg);
    }
    ul#navi li#contact a{
    left: 580px;
    width:170px;
    background-image:url(contact.jpg);
    }

    ul#navi li a:hover{
    background-position:0 -70px;
    }

    ul#navi li a.current{
    background-position: 0 -136px;
    text-indent: -9999px;
    }
     

    Attached Files:

    • FF.jpg
      FF.jpg
      File size:
      22.3 KB
      Views:
      86
    • IE6.jpg
      IE6.jpg
      File size:
      22.7 KB
      Views:
      56
    mol, Feb 4, 2008 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I have zero clue as to why IE6 was doing that (though when I added my * {margin: 0; padding: 0;} it did reduce the extra space by some).

    Try this:

    http://stommepoes.nl/Tests/listtest.html

    It has no extra space. I didn't have your images so I couldn't test that-- instead I have colours so you can see where your different sections are. I changed the id's to classes and stuck them on the a's and floated them left. li is only display: inline and I left .current in-- should still work.

    If you want to see a version without the text-indent thing (which keeps the text there if someone has images off but CSS on), you can either copy mine (which is a copy of deathshadows actually) or one deathshadow did for pixelcommander here:
    mine: http://stommepoes.nl/Toughshot/toughshot2.html css: http://stommepoes.nl/Toughshot/toughshot2.css

    
	<ul id="nav">
	  <li><a class="home" href="http://www.twelve41.net">Home<span></span></a></li>
          <li><a class="tuts" href="http://www.twelve41.net/?cat=1">Tutorials<span></span></a></li>

	  <li><a class="downloads" href="http://www.twelve41.net/?page_id=2">Downloads<span></span></a></li>
	  <li><a class="contact" href="http://www.twelve41.net/?page_id=4">Contact<span></span></a></li>
	</ul>
  </div>
    Code (markup):
    
/*CSS for toughshot */

/*removes all default padding and margins except inside lists*/
* {
  margin: 0;
  padding: 0;
}

/*removes default borders on all images in one go*/
img {
  border: none;
}

body {
  background: #f5f8f8 url(menubg.jpg) top left repeat-x; 
  font: normal .8em/1em "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
}

#nav {
  list-style:none;
  height: 30px;
  width: 410px;
  position: relative;
  margin-left: 480px;
  font: bold 10px/30px "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
}

#nav li {
  display: inline; /*IE7 fix */
  margin-right: 5px;
}

#nav a {
  float: left;
  height: 30px;
  text-align: center;
  color: #fff;
  position: relative;
  background: #006766;
}

#nav li a:hover, #nav li a:focus, #nav li a:active {
  color:#fff; /*IE fix */
  background: #015152;
}

#nav a span {
  display: block;
  height: 30px;
  position: absolute;
  top: 0px;
  left: 0px;
  background: url(menu.jpg) no-repeat;
}

#nav .home, #nav .home span {
  width: 80px;
  background-position: 0 0;
}

#nav .home:active span, #nav .home:focus span, #nav .home:hover span {
  background-position: 0px -30px;
}

#nav .tuts,
#nav .tuts span {
  width: 105px;
  background-position: -90px 0;
}

#nav .tuts:active span, #nav .tuts:focus span, #nav .tuts:hover span {
  background-position: -90px -30px;
}

#nav .downloads, #nav .downloads span {
  width: 127px;
  background-position: -190px 0;
}

#nav .downloads:active span, #nav .downloads:focus span, #nav .downloads:hover span {
  background-position: -190px -30px;
}

#nav .contact, #nav .contact span {
  width: 80px;
  background-position: -326px 0;
}

#nav .contact:active span, #nav .contact:focus span, #nav .contact:hover span {
  background-position: -326px -30px;
}
    Code (markup):
    Deathshadow's for pixelcommander: http://battletech.hopto.org/for_others/pixelcommander/template.html
    css: http://battletech.hopto.org/for_others/pixelcommander/screen.css

    Good luck.
     
    Stomme poes, Feb 4, 2008 IP