IE6 CSS menu block bottom is shorter than actual menu height

salmansohail

11-11-2009, 04:30 PM

Hi,

I written some CSS it works fine except in IE6 the visit page highlight block is not covering the entire height of my menu bar, here is the code:

/** Style for menu starts here */

#menu {
width: 800px;
height: 50px;
margin: 0px auto;
background: #264779;
}

#menu ul {
margin: 0px;
padding: 0 0 0 10px;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
display: block;
float: left;
padding: 14px 30px 10px 8px;
text-decoration: none;
color: #FFFFFF;
}

#menu a:hover {
color: #D7D7BD;
}

body#home a#homenav,
body#errorlogs a#errornav
{
color: #fff;
background: #FFC109; /**Yellow*/
font-weight: bold;
margin: 0px auto;
padding: 14px 20px 10px 20px;
text-decoration: none;
}

What is happening here is: the visit page highlight the respective menu but height of the menu block, is about 10px shorter than the height of the actual menu bar.

abduraooft

11-11-2009, 04:34 PM

here is the code: Could you please post a link to your page?

Excavator

11-11-2009, 05:42 PM

Hello salmansohail,
I put it in an .html document and it seems to work for me. I don't have IE6 though...
Have a look at this - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100.1% "Comic Sans MS";
background: #FFC109;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
font-size: 0.8em;
}
#menu {
height: 50px;
/*margin: 0px auto; - no sense trying to center a full width element*/
background: #264779;
}
#menu ul {
padding: 0 0 0 10px;
list-style: none;
}
#menu li {display: inline;}
#menu a {
display: block;
float: left;
padding: 14px 30px 10px 8px;
text-decoration: none;
color: #FFFFFF;
}
#menu a:hover {
color: #D7D7BD;
background: #ffc109;
}
body#home a#homenav,
body#errorlogs a#errornav {
color: #fff;
background: #FFC109; /**Yellow*/
padding: 14px 20px 10px 20px;
text-decoration: none;
}
</style>
</head>
<body id="home">
<div id="container">
<div id="menu">
<ul>
<li><a href="#" id="homenav">button</a></li>
<li><a href="#">button</a></li>
<li><a href="#">button</a></li>
<li><a href="#">button</a></li>
</ul>
</div>
</div>
</body>
</html>