Gap between divs in IE

[whitsey]

Hoping someone can help with what I’m assuming is a simple fix (not other website seems to have this problem so clearly millions have figured it out before…)

Below is how my css appears in IE only – works fine in every other browser.

[img]http://alternet.com.au/ie_problem.png[/img]

Here is the html:

Code:

Content for id “header_body” Goes Here

Here is the css:

Code:

@charset “utf-8”;
* {
margin: 0;
padding: 0;
}
#body {
font-size: 62.5%;
background-image: url(../images/background.png);
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
}

.clear { clear:both; }

#container_bg {
margin: 0 auto;
width: 919px;
}
#main_bg_top {
background-image: url(../images/bg_top.gif);
background-repeat: no-repeat;
width:919px;
height:7px;
margin-top: 10px;
}
#main_bg_body {
background-color: #e6e6e6;
width:909px;
padding: 5px;
}
#header {
width: 899px;
margin: 0 auto;
}
#header_top {
background-image: url(../images/bg_header_top.gif);
background-repeat: no-repeat;
width: 899px;
height: 6px;
}
#header_body {
width: 887px;
background-color: #FFF;
border-right: solid #999999 1px;
border-left: solid #999999 1px;
padding: 5px;
}
#header_bottom {
background-image: url(../images/bg_header_bottom.gif);
background-repeat: no-repeat;
width: 899px;
height: 7px;
}
#main_bg_bottom {
background-image: url(../images/bg_bottom.gif);
background-repeat: no-repeat;
float: left;
width:919px;
height:7px;
}

Thanks

[darkkiller]

You need edit top background:
background: url(link) no-repeat bottom;
:D

[apostrophe]

Try removing the padding from #main_bg_body and #header_body and applying it to the content of those divs instead.

[whitsey]

"darkkiller" wrote:

You need edit top background:
background: url(link) no-repeat bottom;
:D

Thanks darkkiller, that works which I had toyed with however, can anyone explain why IE does this? I have given that div a specific height of 7px yet clearly IE has rendered the div to be much higher than that.

Do divs in IE have to be a minimum height?

Thanks

[whitsey]

"apostrophe" wrote:

Try removing the padding from #main_bg_body and #header_body and applying it to the content of those divs instead.

Thanks apostrophe, that did not work however I have found the fix… I need to set the font-size to 0 as IE auto-sizes teh div based on the font-size…

[Author]

Posts