double top margin in non-floating div

css problem with double top margin

[Andy]

Hi there,

I'm developing a fully CSS site with floating top, left, right and footer divs and a non-flaoting main content div.
My problem is that Firefox and other standards compliant browsers display the main content in it's correct place (directly below top divs and to the right of the left divs), but all versions of IE double the top margin, creating an annoying gap between the top divs and the main content.

I've heard about the double-margin IE bug, but it's not that as my problem div is not a floater.

Can anyone help? I've tried everything!

Here's the html layout:
topbar1
topbar2
topbar3
leftbar1
leftbar2
rightbar1
rightbar2
maincontent
footer

Here's the CSS:
#topbar1
{
float:left;
display:inline;
margin: 11px 0px 0px 80px;
padding: 0px 0px 0px 0px;
width:430px;
}
#topbar2
{
float:left;
display:inline;
clear:left;
width:1080px;
margin: -4px 0px 0px 0px;
padding: 0px 0px 0px 255px;
}
#topbar3 {
display:inline;
float:left;
clear:left;
width:900px;
height:27px;
margin: -6px 0px 0px 0px;
padding: 0px 0px 0px 202px;
}

#leftbar1 {
display:inline;
float:left;
clear:left;
padding: 25px 5px 0px 5px;
width: 200px;

#leftbar2
{
display:inline;
float:left;
clear:left;
width: 175px;
}
#rightbar1 {
display:inline;
float:right;
margin-right:7px;
top:75px;
}
#rightbar2 {
display:inline;
float:right;
clear:right;
margin-right:7px;
margin-top: 10px;
padding: 0;
width:217px;
}
#maincontent
{
margin-left: 210px;
margin-right: 247px;
margin-top: 0px;
padding: 95px 0px 10px 0px;
}
#footer
{
clear: both;
margin-top: 0;
padding: 20px 0px 0px 0px;
text-align:center;
height:30px;
}

[SuzyUK]

Welcome to WebmasterWorld Andy!

I have a feeling this is the more about float models than bugs..

if you try putting temporary background colors on all your divs, you will see how they're interacting.

Also I'm not sure why you have those topbars floating? the same can be done just by making leaving them in the flow.

The clear property on your sidebars are acting differently crossbrowser so I'm not too sure which look it is that you're trying to achieve.

I would suggest stripping down the whole page and adding in the divs one at a time (with the background colors so you can see them), checking crossbrowser each time so you can see where the differences start to come in, then if you can narrow down a specific example, you could post the stripped down example and explain what you expect to see.

Thanks
Suzy :)