Forums

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.

http://alternet.com.au/ie_problem.png

Here is the html:


<div id=\"container_bg\">
  <div id=\"main_bg_top\"></div>
  <div id=\"main_bg_body\">
    <div id=\"header\">
      <div id=\"header_top\"></div>
      <div id=\"header_body\">Content for  id \"header_body\" Goes Here</div> <!-- END header_body -->
      <div id=\"header_bottom\"></div>
    </div> <!-- END header -->

		

  </div> <!-- END main_bg_body -->
	<div id=\"main_bg_bottom\"></div>
	
</div>

Here is the css:


@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" said:
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" said:
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...

treehouse : what would you like to learn today?

Forums

Gap between divs in IE