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!
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!