Forum Moderators: not2easy
More importantly, ie 6doesn't show background color on the "main" div except in the last of three div's within it. "Mainround" does go all the way across.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Learning</title>
<style type="text/css">
<!--
html {background: #ecedf7 url(images/bluegradation.jpg) repeat-x left top;
width:100%; position:relative;}
body {
margin: 0;
padding: 0;
color: #000;
text-align:center;
font: 74% Verdana, Arial, Helvetica, sans-serif;
background: url(images/blueglobebkgd.jpg) no-repeat left 87px;
}
#wrapper {
width:867px;
margin:0 auto;
text-align:left;
position:relative;
}
#header {
height:87px;
background-color:#fff;
}
#logo {
float:left;
}
#headerglobe {
position:absolute;
top:0;
right:0;
z-index:10;
}
#styleswitcher {
height:18px;
text-align:right;
margin-right:35px;
}
#content {
float:left;
margin-left:12px;
width:495px;
position:relative;
}
#nav {
float:left;
width:157px;
font-size:.85em;
}
#highlight {
float:right;
width:157px;
font-size:.85em;
}
#footer {
margin-left:185px;
}
.clear {clear:both;}
p, h1 {
margin:0;
padding:0;
}
h1 {
font-size: 2.0em;
font-weight: normal;
color:#806640;
line-height:1em;
}
p {
font-size: 1em;
line-height: 1.5em;
margin:.5em 0;
}
#mainround {background: transparent; margin:1em;}
.maintop, .mainbottom {display:block; background:transparent; font-size:1px;}
.mainb1, .mainb2, .mainb3, .mainb4 {display:block; overflow:hidden;}
.mainb1, .mainb2, .mainb3 {height:1px;}
.mainb2, .mainb3, .mainb4 {background:#fff5e6; border-left:1px solid #8e6932; border-right:1px solid #8e6932;}
.mainb1 {margin:0 5px; background:#8e6932;}
.mainb2 {margin:0 3px; border-width:0 2px;}
.mainb3 {margin:0 2px;}
.mainb4 {height:2px; margin:0 1px;}
#main {display:block; background:#fff5e6; border:0 solid #8e6932; border-width:0 1px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">logo</div>
<div id="headerglobe">an image</div>
<!--endheader --></div>
<div id="styleswitcher">
<p>text</p>
<!--endstyleswitcher --></div>
<div class="clear"></div>
<div id="mainround">
<b class="maintop"><b class="mainb1"></b><b class="mainb2"></b><b class="mainb3"></b><b class="mainb4"></b></b>
<div id="main">
<div id="nav">
<p>left column holds nav</p>
<div class="clear"></div>
<!--endnav --></div>
<div id="content"><h1>Learning</h1>
<p> </p>
<p> </p>
<p> </p>
<!--endcontent --></div>
<div id="highlight" class="rounded">
<p>right column for stuff </p>
<!--endhighlight --></div>
<div class="clear"></div>
<!--endmain --></div>
<b class="mainbottom"><b class="mainb4"></b><b class="mainb3"></b><b class="mainb2"></b><b class="mainb1"></b></b></div>
<div class="clear"></div><div id="footer">
<p>2007</p>
</div>
<!--endwrapper --></div>
</body>
</html>
Solution was/is to use a wrapper div to create a "faux" body element
Q2. #main needs hasLayout set to true. -
zoom: 1;height: 0.1%hth,
I also encountered the peek-a-boo bug, the 3-pixel jog, and box model issues. Applying width to elements worked, as well as redoing the floats to not have margin applied to the same side as float. The second background image is in its own absolutely positioned div (I feel silly not to have thought of that before).
As I start putting the content back in am running into fun with padding/margins and ie box model. Now that the big issue is fixed the rest will eventually fall into place.
