Problem with CSS in IE 7

[oba]

I am redesigning:

http://www.plantsmiths.co.uk/

The site appears fine with Firefox, but with IE there is a huge white gap above the main text content.

I think its a problem with the CSS - this is what I'm using:


{
background-color: #D3FACE;
width: 408px;
margin-left: 150px;
margin-bottom: 30px;
border-left: 1px solid gray;
border-bottom: 1px solid gray;
margin-right: 194px;
border-right: 1px solid gray;
padding: 1em;
color: #000000;

}

#footer
{
clear: both;
height: 20px;
margin: 0;
padding: .5em;
color: #000000;
background-color: #97EC9B;
border-top: 1px solid gray;
text-align: center;
font-size:11px;
}

#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.glossymenu{
list-style-type: none;
margin: 0px 0;
padding: 0;
width: 150px;
border: 0px solid #9A9A9A;
border-bottom-width: 0;
}

.glossymenu li a{
background: white url(images/glossyback.gif) repeat-x bottom left;
font: bold 13px "Verdana", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;

}


* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 160px;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url(images/glossyback2.gif);
}

/* sNews 1.6, default */
fieldset { border: 1px solid #E4DF94; padding: 10px 8px; margin: 0 0 8px 0; background: #FFFBC0; color: #000; }
input { padding: 2px; }
textarea { width: 90%; height: 20em; padding: 3px; }
.comment { background: #F5F6F6; color: #000; padding: 10px; margin: 0 0 10px 0; border-top: 1px solid #ccc; }
.commentsbox { background: #f4f4f4; color: #000; padding: 10px; margin: 0 0 10px 0; }
.date { border-top: 1px solid #eee; margin: 0 0 20px 0; }

Can you see anything that may cause the problem?

Also, if you have any browsers other than IE 7 and Firefox 2.0.0.8, could you check the site to see if it screws up again? I need to make sure the site appears perfect.

Help asap, I have a deadline!

[boogyman]

I suspect its a combination of a couple of padding/margin issues.



{
background-color: #D3FACE;
width: 408px;
margin-left: 150px;
margin-bottom: 30px;
border-left: 1px solid gray;
border-bottom: 1px solid gray;
margin-right: 194px;
border-right: 1px solid gray;
padding: 1em;
color: #000000;
}
that will give you 1em on top of the content section and also all header tags have default styles, so play around with the margins / padding of the h2 which you have done nothing too in your css file


div#content h2 {
margin: 0;
padding: 0;
}

start with resetting both of them to nothing and gradually increase to your likeness.

now on an unrelated note about your question but relavent to the page, you shouldn't be using the XHTML doctype as IE still does not support it, and thus you cannot take full advantage of the benefits of XHTML and while your code may "validate" its really a false positive because of the IE support issue.
you should be using DOCTYPE 4.01 Strict, however I/we are not here to tell you how to run your site.

[oba]

thanks for the response! i managed to solve the problem, and will review what you said.:)