There is an empty space down the menu in ie6 only

StackOverflow https://stackoverflow.com/questions/21419463

Question

I have a menu, in down of the menu there is an empty space, this empty space appears in IE6 only.

Screenshot:

IE6
enter image description here

Other browsers (ex: IE7+, FF, etc)
enter image description here

HTML:

<div id="nav">
    <ul>
        <li> <a href="index.php">Main</a> </li>
        <li> <a href="index.php">Questions</a> </li>
    </ul>
    <div style="clear:both;"></div>
</div>

CSS:

div#nav {
    background-color:#00376d;
    margin-bottom:5px;
}
div#nav ul {
    margin:0;
    padding:0;
    list-style-type:none;
}
div#nav ul li {
    float:right;
}
div#nav ul li a {
    display:block;
    border-left:1px solid #fff;
    padding:5px 15px;
    background-color:#00376d;
    color:#fff;
    text-decoration:none;
}
div#nav ul li a:hover {
    background-color:#02509d;
}

How to fix that problem ?

Was it helpful?

Solution

I haven't tested IE6 for over a year now. It's long gone, IMHO. Anyhow, this should fix the problem for IE6 (and is a better way to code it anyhow):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">

div#nav {
    background-color:#00376d;
    margin-bottom:5px;
}
div#nav ul {
    margin:0;
    padding:0;
    list-style-type:none;
    overflow: hidden;
    width: 100%;
}
div#nav ul li {
    float:right;
}
div#nav ul li a {
    display:block;
    border-left:1px solid #fff;
    padding:5px 15px;
    background-color:#00376d;
    color:#fff;
    text-decoration:none;
}
div#nav ul li a:hover {
    background-color:#02509d;
}

</style>
</head>
<body>

<div id="nav">
    <ul>
        <li> <a href="index.php">Main</a> </li>
        <li> <a href="index.php">Questions</a> </li>
    </ul>
</div>

</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top