Site appearing slightly lower only in IE 7

I’ve been checking my redesign site (located here) in a variety of browsers and for some reason only in IE 7 is it appearing just a few pixels lower.

Does anyone know the reason for this and how to resolve it?

Thanks!

Hi,
Try removing the default margin/padding from the body or setting it manually.

You should be aware that IE6/7 will not honor the bottom margin of the last element that touches the body. That would be the #container in your case, so if you set margin:10px auto; it will give a 10px bottom margin in all but IE6/7.

body {
    background: #B9D7E6 url(images/body-bg.gif) repeat-x;
[COLOR=Blue]    margin:0;
    padding:0;[/COLOR]
}

#container {
    [COLOR=Blue]margin: 10px auto;[/COLOR]
     width: 960px;
     text-align: left;
    border: 1px solid #000000;
    background-color: #FFFFFF;
}

However if you specifically set your body margin then IE6/7 should comply.


body {
    background: #B9D7E6 url(images/body-bg.gif) repeat-x;
[COLOR=Blue]    margin:10px 0;
    padding:0;[/COLOR]
}

#container {
    [COLOR=Blue]margin: 0 auto;[/COLOR]
     width: 960px;
     text-align: left;
    border: 1px solid #000000;
    background-color: #FFFFFF;
}

Thanks again Rayzur! I set the style sheet to:




body {
	background: #B9D7E6 url(images/body-bg.gif) repeat-x;
[COLOR="Blue"]        margin: 10px 0;
        padding: 0[/COLOR];
}

#container {
	[COLOR="blue"]margin: 0 auto;[/COLOR]
 	width: 960px;
 	text-align: left;
	border: 1px solid #000000;
	background-color: #FFFFFF;
}


and it’s now working perfectly in IE 7. Thanks again for all of your help. I deeply appreciated it!