Hey everyone, I’m having a problem with my homepage in IE8 where all my content gets shifted down a few pixels when the page loads. I do not have this problem when viewing the page locally or in FF, only when the site is uploaded in IE8. It seems to occur right as the page finishes loading and if I refresh the page the problem goes away. Any suggestions?
Link to site:
http://wri.eas.cornell.edu/wri_newsite_oct08/index.html
Here is my css:
img, div {
behavior: url(iepngfix.htc);
}
html {
padding: 0;
margin: 0;
}
body {
background-color: #283C77;
margin: 0;
padding: 0;
background-image: url(images/gradientbg.jpg);
background-repeat: repeat-x;
min-width: 950px;
}
#headerbar {
background-color: #000000;
width: 100%;
height: 35px;
min-width: 950px;
margin: 0;
padding: 0;
}
#header {
margin: 0 auto 0 auto;
width: 950px;
}
#logo {
margin-top: -33px;
background-image: url(images/logo2.jpg);
width: 36px;
height: 33px;
}
#menu {
margin-right: auto;
margin-left: auto;
width: 890px;
height: 25px;
margin-top: -28px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
display: inline;
}
#menu li {
text-decoration: none;
margin: 0 0 0 30px;
display: inline;
}
#menu a:Link, a:Active, a:Visited {
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
font-size: 10px;
text-decoration: none;
color: #CCCCCC;
letter-spacing: 2px;
}
#menu a:Hover {
color: #5D95C1;
}
#menu a:Focus {
outline: none;
}
#menu a img {
vertical-align: middle;
text-decoration: none;
outline: none;
border: none;
}
#content {
margin: 30px auto 0 auto;
width: 950px;
}
#leftcol {
float: left;
width: 444px;
margin: 0;
padding: 0;
}
#practicepics {
margin-top: -10px;
margin-left: -45px;
width: 405px;
height: 290px;
margin-bottom: -20px;
}
#rightcol {
float: right;
margin: 0 0 0 0;
width: 445px;
}
#titledesign {
background-image: url(images/main_nyswri3.png);
height: 163px;
width: 550px;
padding: 0;
margin: 60px 0 75px -140px;
}
#news {
margin-top: 40px;
}
#news h1 {
color: #BAF257;
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
font-size: 14px;
font-weight: normal;
margin: 15px 0 0px 0;
}
#news h1.toptitle {
margin-top: 0;
}
#news h2 {
font-family: "Myriad Pro", Helvetica, "Trebuchet MS", sans-serif;
font-size: 14px;
font-style: italic;
color: #ffffff;
padding: 0;
margin: 15px 0 13px 0;
line-height: 0px;
font-weight: normal;
}
#news p {
color: #ffffff;
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
font-size: 13px;
margin-top: 3px;
margin-bottom: 8px;
}
#news p.bold {
font-weight: bold;
font-style: italic;
margin-top: 0px;
display: block;
}
#news img {
margin-bottom: -2px;
margin-left: -16px;
}
#news a {
position: static;
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
font-size: 13px;
color: #CCFFFF;
text-decoration: underline;
margin-right: 0px;
padding-right: 0;
letter-spacing: 0;
}
#news a:Hover {
color: #99CCFF;
}
img.gaswells {
float: left;
padding: 4px 5px 0 16px;
}
img {
border: none;
}
#footer {
height: 50px;
clear: both;
}