My site, http://wardlarson.com/, was just redesigned by yours truly. It looks good in Firefox (2.0.0.3) but when I check it in IE (7), there's a problem. The content is hidden under the header and I have no idea what to do about it. I've tried all the padding and margin combinations I could think of and nothing works. Every thing's valid but for some reason it's still an issue.

Can anyone help me out? CSS is at stylesheet.css

Thanks a ton to anyone who has any suggestions.

I wouldn't use absolute positioning..

try this... I didn't test it but i believe the problem to be with clearing..

#header {
display: block;
height: 475px;
width: 100%;
margin:0 auto;
}

#content {
display: block;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#FFF;
height:auto;
width:935px;
background-color:#B1BA4E;
padding-right:5px;
padding-left:5px;
float: none;
margin: 0px auto;
clear: both;
}

I downloaded the code and it does work for me in FF, ie6, and ie7,

did you remove the position: absolute from #header?

This will create other problems but you should be able fix the alignment once you get the content clearing properly.

you actually dont even need the clear:both: i included in my first post, removing postion: absolute; fixes the problem.

okay i set margins on body to 0 all around, and that eliminates the gap... everything's good now except that my navigation has some type of line height or padding issues in IE7... :/