IE6 - Navigation covered?

HTML & CSS
1

Hi all

Once again IE 6 has destroyed my afternoon, I don’t know if I should be bothered about it but I would like to work out what’s wrong.

I have a simple navigation here made up from a horizontal set of links and a secondary navigation below it. In IE6 the Secondary nav is twice the height it should be and covering the main navigation.

www.ttmt.org.uk/forum/nav



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   	<title></title>
	<style type="text/css" media="screen">
	 *{
	   margin:0;
	   padding:0;
	 }
   html, body{
   	height: 100%;
   }
   #wrapper{
   	min-height:100%;
   	width:800px;
   	background-color:#fafafa;
   	margin:0 auto;
   	margin-top:-70px;
   }
   * html #wrapper{
   	height:100%;
   }
   #header{
   	position:relative;
   	height:150px;
   	background:#f4c68a;
   	border-top: 74px solid #fff;
   }

   #footer{
     background-color:#fafafa;
   	width:800px;
   	margin:auto;
   	height:70px;
   }

   #page{
   	margin-top:20px;
   	padding-bottom:40px;
   }
   /*
   --TopNav--
   */
   #topnav{
     overflow:hidden;
   	background:#898989;
   	margin:2px 0 0 20px;
   }

   *html #topnav{
     height:1%;
   }

   #topnav ul#nav{
     padding-left:228px;
   }

   #topnav ul#nav li{
   	display:inline;
   }
   #topnav ul#nav li a {
   	display:block;
   	float:left;
   	padding:.7em 1.2em;
   	text-decoration:none;
   	border-right:3px solid #fafafa;
   	font:bold .8em Verdana, sans-serif;
   	color:white;
   }
   #topnav #home a {
   	border-left:3px solid #fafafa;
   }
   #topnav ul#nav li a:hover{
   	color:#fff;
   	background-color:#3399CC;
   }
   #topnav ul#nav a#select{
   	color:#6d6d6d;
   	background-color:#e5e3e3;
   }

   /*
   --SecondNav--
   */
   #secondnav{
   	background:#e5e3e3;
   	margin-left:230px;
   }

   #secondnav h4{
   	padding:1em 0 1em 35px;
   	font:bold .8em Verdana, sans-serif;
   	color:#6d6d6d;
   }

	</style>
</head>

<body>
   <div id="wrapper">
     
      <div id="header">
      </div><!--header--> 
        
      <div id="topnav">
         <ul id="nav">
            <li id="home"><a href="#" id="select">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
         </ul>  
      </div><!--topnav--> 
      
      <div id="secondnav">
         <h4>Home</h4>
      </div><!--secondnav-->  
      
      <div id="page">     
         <div id="content">
         </div><!--content-->  
      </div><!---page-->  
    </div><!--wrapper-->   
    
    <div id="footer">
    </div> 
</body>
</html>
2

Yes that’s it :slight_smile:

It won’t validate though but will do no harm.

3

I was using height:1%; as a haslayout trigger for the nav but didn’t realise that subnav also needed it.

How would i use zoom:1.0, would it be


* html #topnav {
    zoom:1.0
}
* html #secondnav h4{
    zoom:1.0
}
4

Hi,

The topnav is small because you have set height:1% and used overflow hidden thus hiding anything else.

The subnav needs haslayout.

Use this:


* html #topnav {
    height:1%;
    overflow:visible;/* otherwise it may only be 1% high*/
}
* html #secondnav h4{
    height:1%;
    overflow:visible;
}

That’s why I prefer to use zoom:1.0 as a haslayout trigger because it has no ill effects even though its not valid css.