whitespace HELP!

small whitespace above (not beside) a div

[webdesignpros]

Hey. Here is the CSS :

BODY,HTML {
margin:0;
font-size:18px;
font-family:Arial;
background: #97D3E6 url(../images/background_for_middle.gif) repeat-y 50% 0;
}

#wrapper {
width:760px;
margin:auto;
}

#top_heading {
width:760px;
}

#left_side {
width:30%;
float:left;
}

#right_side {
width:70%;
float:left;
}

#nav_buttons {
width:100%;
text-align:center;
}

#statement {
width:100%;
font-size:16px;
text-align:center;
}

#title {
width:533px;
height:40px;
margin-left:-1px;
background-color:#660000;
border-top:#2B0000 3px solid;
border-bottom:#2B0000 3px solid;
color:#FFFFFF;
font-size:30px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;

}
#content {
width:90%;
margin:0 auto;
font-size:25px;
background-color:#fff;
text-align:center;
}

In Firefox, it's fine, but in IE, there is a whitespace. I tried the margin-top:-5px;, but that messed it up a little in FF.

Why do I see that whitespace?

Here it is...

Heading div
Left column div : right column div
stuff title
stuff content
stuff content
stuff content

Right above "title" I see that whitespace. It is the first thing within the "right_side" div. Please HELP!

Thanks,
Leighton Smith

[edited by: jatar_k at 8:05 pm (utc) on Nov. 23, 2007]
[edit reason] no urls thanks [/edit]

[Xapti]

You should try a universal reset in your CSS. The simplest would be something like *{margin:0;padding:0}, but there are some that are more refined which don't touch a few elements (mostly form controls, I think).
Aside from that, the space almost certainly seems to come from under the image heading, and not from the title div.

[SuzyUK]

Welcome to WebmasterWorld webdesignpros!

What is the content of your top_heading div and your title div. A universal reset may be a little harsh unless you're comfortable setting your own margins on everything.

My Tip is to look for elements that have default margins, <p>, <hn>, <ul> etc that are inside either of those divs.. they needn't be the only or first thing in the div. IE has difficulty dealing with the "collapsing" aspect of default margins. If there any elements which would have default margins then specifically override the defaults by setting your own margins, or zero them.

I can't reproduce any gap from the code above which is why I think there's more involved..

let us know how it goes!

[edited by: SuzyUK at 7:32 pm (utc) on Nov. 24, 2007]