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:

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

Quote:

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 -

Code:

<!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>
        <!--end menu--></div>
    <!--end container--></div>
</body>
</html>