a:link {background-color: inherit;
color: #3333CC;
text-decoration: none;}
a:visited {background-color: inherit;
color: #330099;}
a:hover {background-color: #3333CC;
color: #FFFFFF; cursor: crosshair ;}
a:active {background-color: #3333CC;
color: #FFFFFF; text-decoration: overline underline;}

body{background-color: #99CCFF;
color:#330099;
padding:0;
margin:0;}

p {font: normal normal normal 12px/16px arial,"comic sans",sans-serif;
color: #330099;
background: inherit;
text-indent:3em;}

h1{font-size:36px;
color:inherit;
text-align: center;
background-color:inherit;}

#header{background-color:#0073E6;
color:#330033;
position:absolute;
top:0;
left:0;
height:20%;
width:100%;}

#content{background-color:inherit;
color:inherit;
background-image:url('gradient2.bmp');
background-repeat:repeat-y;
background-position:left;
position:absolute;
top:20%;
height:80%;
left:0;
padding-right:3%;}

This is my CSS. If I change the #header and #content to use px instead of % it works fine in IE7, but the header and content overlap in Mozilla. For some reason though, when I put


#header{background-color:#0073E6;
color:#330033;
position:absolute;
top:0;
left:0;
height:20%;
width:100%;}

#content{background-color:inherit;
color:inherit;
background-image:url('gradient2.bmp');
background-repeat:repeat-y;
background-position:left;
position:absolute;
top:20%;
height:80%;
left:0;
padding-right:3%;}

-In IE7 (it's in its second beta version and I'm testing it), the tiling background image disappears after it reaches the edge of the screen. It doesn't stay there when you scroll--it just stops tiling. The background color stays there, but that's probably because it's set in body{}.

-In IE6, the header's bg disappears below the text I put in the header. It doesn't continue all the way to the end of that 20%.

-In Gecko-based browsers, the header background fills in the whole div and the content div stays all filled in too.


Also, my CSS for my index page is
a:link {background-color: inherit;
color: #99CCFF;
text-decoration: none;}
a:visited {background-color: inherit;
color: #0073E6;}
a:hover {background-color: #3333CC;
color: #FFFFFF; cursor: crosshair ;}
a:active {background-color: #3333CC;
color: #FFFFFF; text-decoration: overline underline;}

body{color:#330099;
background-color:#99CCFF;
margin:0;
padding:0;}

#right {background-color: #99CCFF;
color:inherit;
float: right;
width:80%;
height:100%;
z-index: 1;
padding: 0;
margin:0;
position:absolute;
top:0;
left:20%;}

.left {background-color: #004E9B;
background-image: url("gradient1.bmp");
background-position: right;
background-repeat: repeat-y;
color:inherit;
position:absolute;
left:0;
height:100%;
width:20%;
z-index: 1;
margin:0;
padding-left:10px;
padding-right:0;
padding-top:10px;
padding-bottom:10px;}

#corner{position:absolute;
top:0;
height:20%;
width:20%;
padding-bottom:0;
padding-top: 0;}

#nav{position:absolute;
top:20%;
height:58%;
padding-bottom: 0;
padding-top: 0;}

#validation{position:absolute;
top:78%;
height:10%;
padding-top: 0;
padding-bottom:0;}

#footer{color:inherit;
background:inherit;
position:absolute;
top:88%;
height:12%;
padding-bottom: 0;
padding-top: 0;}

ul{font: normal normal normal 12px/16px arial,"comic sans",sans-serif;
color: #330099;
background:inherit;}

iframe {height:100%;
width:99%;
margin: 0;
z-index:2}


-In IE6, everywhere that there is no text, just blankness, the backgrounds of the divs disappear.
-In IE7, it's right.
-In Geckos, it's right.
-In Opera, the whole .left class disappears.

And if you guys want to see exactly what I mean, look here:
The index page (http://ee.1asphost.com/dollzrgr8/web/index.html)
The page that uses the first set of CSS (http://ee.1asphost.com/dollzrgr8/web/home.html)

So, my question is, which of the browsers is handling it correctly? Which one is doing what the CSS is telling it to do? I'm about 99.9999% sure IE6 is totally wrong. Opera not handling the .left class has to be wrong. IE7-beta2 seems to be right on the index.html and wrong on the home.html. Mozilla seems to be doing just dandy on all of it.

But, I'm not positive. There's one thing I don't understand about the %'s I'm using on the divs. I get it for left and right just fine, but I know top/bottom tend to be a little...uh...odd...when it comes to defining that kind of stuff in different browsers. If I put 20% height for the header, is that 20% of the length of the page or 20% of the height of the viewing window? I think it's the latter. In which case I must ask: when I put top:20% height:80%; is it actually correct for IE7 to cut off the rest of the tiling when it goes beyond the 100% height-of-window size? If so, why does it not cut off the rest of the div? That doesn't really connect. I think it's a bug that I should tell Microsoft about (that's the purpose of being a beta tester, right?), but it's still possible that Microsoft actually got something right and Mozilla got it wrong.



And by the way, both the html and stylesheets have been validated (though it won't say it when you look on there because the host adds 1 line of code to the pages to show they hosted it....that line is not valid. The part that's *mine* is though).