Question

I have designed a Navigation Menu, it working properly on Chrome, Firefox and IE8.

It appear it not working properly on IE7, the margin and the size of the <li> is too small, sub-menu is not appearing in full and also #background is missing.

It should look the same as Chrome and Firefox.

See example: http://jsfiddle.net/FFWfp/

How to fix this?

HTML

<div id="background"> 
   <div class="nav-block">
                <ul id="nav">
                <li><a class="active" href="/">Home</a></li>

                <li>
                <a href="/">Category</a>
                  <ul class='subnav'> 
                   <li><a href='#'>PHP </a></li>
                   <li><a href='#'>HTML</a></li>
                   <li><a href='#'>CSS</a></li>
                  </ul>
                </li>
                <li>
                <a href="/">Account</a>
                  <ul class='subnav'> 
                   <li><a href='#'>One</a></li>
                   <li><a href='#'>Two</a></li>
                   <li><a href='#'>Three</a></li>
                  </ul>
                </li>
                <li><a href="/admin/reports">Logout</a></li>
            </ul>
   </div>
</div>

CSS

<style>

#background  {
 background-color:#EBE9E1;
 overflow:hidden;
}

 .nav-block{
    background-color:black;
    height:50px;
}

#nav {
    padding:12px;
    list-style:none;
}

#nav li{
    display:inline;
    margin:0 1px 0 -1px;
    padding:3px 15px;
    float:left;
    font-size:14px;
}

#nav a {
    background-color:white;
    color:#C51721;
    padding:10px;
    text-decoration: none;
}

#nav .subnav {
    padding:0px;
    list-style:none;
    width:130px;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    color:#000000;
    margin-top:9px;
    margin-left:-2px;
    background-color:white;
}

#nav .subnav li {
    padding:0px;
    float: none;
    width:100px;
    color:#000000;
    margin:0px;
}

#nav .subnav li a {
    padding:3px;
    padding-left:10px;
    display:block;
    background-color:white;
    color:#C51721;
    text-decoration: none;
    border-bottom:1px solid #DEDEDE;
}
 </style>

Answer 1

This should be simple, clearfix, containing floats whatever.. but it’s not This is a hasLayout error that compounds, it is one of the rare situations where you need to remove haslayout, but where it’s not possible to do so.

The way your code is written (nothing wrong with it by the way!) means the #background div needs hasLayout to contain the floated children (even trying an extra clearing element doesn’t work which shows the out and out IE error). Your code has this with overflow : hidden;, but then because there’s hasLayout on the .nav-block due to the 50px height, that height, in IE7, is all that’s being "contained" – this is of course wrong, as the floated lists are children of #background too.. however it’s because of an error that hasLayout even works to contain floats so there’s no use arguing the specs!

I tried every hack I knew how and but the simplest way was to rewrite the code and avoid hasLayout where possible, and use margins and line-heights instead – so I reversed the coloring of the two containing blocks. I made the background black and the .nav-block grey & gave the background a top padding of 50px to make the black bar.. then I moved the menu which is inside the grey bit up by 43px with a negative top margin. it’s 43px because in your example I measure the black bar @ 50px; and the top links @ 36px in height which meant to keep them looking vertically centered on the black bar they would have need 50px-36px = 14px / 2 = 7px top & bottom ‘spacing’.

the .nav-block div then needed to be the one that was made to contain the floated children, but overflow: hidden won’t work now because of the negative top margin, it would hide the top links! so instead I floated it left and gave it a width of 100%; which is another way of creating a new block formatting context and giving IE the hasLayout it needs without clipping the content.

then I pretty much followed what you had done to achieve the short top links and full width (130px) child links only floating the top links so they would "shinkwrap" – without the float on the child lists the child links could be made display: block so they take the full width of the ul. For the height on the top links IE needed both line-height and padding, but line-height on the child links was enough because of the display: block;

Example Fiddle

HTML is the same as yours above..

CSS:

html, body {margin: 0; padding: 0;}

#background  { /* black bar */
    background: #000;
    padding: 50px 0 0 0;
}

.nav-block {
    background: #EBE9E1;
    float: left;
    width: 100%;
    padding-bottom: 3px;
}

#nav, #nav ul {
    margin: 0;
    padding: 0;
    list-style:none;
}

#nav { /* black bar = 50px, top links = 36px, difference = 14px, = 7px from top */
    margin-top: -43px;
}

#nav ul {
    width:130px;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    margin-left:-2px;
}

#nav > li { /* top links only */
    float: left;
    margin: 0 0 0 30px;
}

#nav a {
    line-height: 36px;
    background-color:white;
    color:#C51721;
    padding: 10px;
    text-decoration: none;
}

#nav ul a { /* child list links */
    display: block;
    padding: 0 10px;
    line-height: 24px;
    border-bottom:1px solid #DEDEDE;  
}