Menu padding

Hi,

Got an issue with my menu, see attached screenshots, basically in IE7 and IE8 there is more padding then there should be.

My CSS:

ul.navLeft li { width:192px; padding: 0; 	margin: 0; 	list-style: none;}
ul.navLeft li a { display: block; padding:4px 5px 7px 27px; text-decoration:none; color:#FFFFFF; font-size:12px; background: url('../images/menu-orange.gif') no-repeat left top; margin:0 auto;}
ul.navLeft li a:hover {background: url('../images/menu-orange-bullet.gif') no-repeat left top; text-decoration:none; color:#fff;}
ul.navLeft li.current a { padding-left:10px;background: url('../images/menu-red.gif') no-repeat left top;}
ul.navLeft li.current a:hover { padding-left:10px;background: url('../images/menu-red.gif') no-repeat left top;} 

If anyone has any ideas that would be much appreciated.

Thanks :slight_smile:

Have you employed a browser reset?

Hi,

I think you are referring to the usual whitespace issue that lists have and the easiest way to avoid them (without butchering the html) is to float the list and anchors. This of course means you have to supply a width but does solve the problem easily and gives a consistent display across all browsers.


<!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">
ul {
    margin:0;
    padding:0;
    list-style:none;
}
ul.navLeft li {
    width:192px;
    padding: 0;
    margin: 0;
    list-style: none;
    float:left;
    clear:left;
}
ul.navLeft li a {
    display: block;
    padding:4px 5px 7px 27px;
    text-decoration:none;
    color:#FFFFFF;
    font-size:12px;
    background:red url('../images/menu-orange.gif') no-repeat left top;
    margin:0 auto;
    float:left;
    clear:left;
    width:160px;
}
ul.navLeft li a:hover {
    background:blue url('../images/menu-orange-bullet.gif') no-repeat left top;
    text-decoration:none;
    color:#fff;
}
ul.navLeft li.current a, ul.navLeft li.current a:hover {
    padding-left:10px;
    background:green url('../images/menu-red.gif') no-repeat left top;
     width:177px;
}
</style>
</head>
<body>
<ul class="navLeft">
    <li class="current"><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
</ul>
</body>
</html>