Question

I have a navigation with a padding-top: 148px; in Firefox, Chrome, Safari, IE 9 & 8 its looks perfect, but in IE 7 its gives it too much, you can see an example of this at http://willruppelglass.com/index.php why is it doing this and how do I fix it?

Here is the CSS

.headerNav{
    color:#000;
    margin:0 auto;
    width: 1280px;
    padding-top: 148px;
}

Any help would appreciated, thanks in advanced.

Answer 1

Try to use below structure and adjust the padding of the <div class="headerNav"></div> because the upper elements have float:left property and you are using padding-top:148px; in IE7 the padding is applying inside the headerNav itself in comparison of other browsers.

In other browsers the padding is applying from the top of view port.

 <div class="headerText"></div>

   <div style="clear:both"></div> <!--this will clear the floating property for below elements and make the space and adjust all the elements below this div -->

<div class="headerNav"></div>

In below image (IE7) you can see the padding-top:148; is applying with in the div not from the top of the body.

See the padding-top:148px applying from the top of the body/viewport. in below image (Firefox)