Forum Moderators: not2easy
body { height: 100%; }
#center { width: 400px; margin: 70px 0 0 180px; }
#leftcol { width: 180px; position: absolute; top: 70px; left 0; }
#rightcol { width: 180px; position: absolute; top: 70px; left: 580px; }
#head { position: absolute; top: 0; width: 760px; height: 70px; }
#footer { ... }
This layout acheived my Objective: the main content being the first content a spider would see (comes up first in the HTML).
The CSS validates, the HTML 4.01 loose validates.
But the problem is it does not layout at all in Netscape 7.02.
Any help with this? Thanks, WFN :)
Secondly, try:
body { height: 100%; margin: 0; padding: 0; }although I don't know what you have the height in there for ...
Can't see why it should foul up in a later version!
If you have cut and pasted your code, there is a : missing here though:-
#leftcol { ..... left 0; }
Spook
<?xml version="1.0" encoding="iso-8859-1"?>
If that bit is at the top, usually a page will render differently between the two than if it wasn't there.
If it is there I'd get rid of it - it throws IE into 'quirks mode', which means 'less standards compliant'. It's also not necessary, as you can specify your encoding here:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Maybe this helps? (Remember, that version of netscape you're talking about is waaay more standards complient than IE)
My HTML valids with 4.01 loose.
My CSS validates with CSS 2.
I'm trying to figure if it is just my netscape 7.02 on my computer, but none of my friends use netscape :(
I'll know if it is my version by tomarrow, hopefully.
Thanks, WFN
style block:
<style type="text/css">
/*
Colors added so we can see the divs, padding and
margin zeroed to get around the browser defaults
which break the layout. Also made the fix to left
in #leftcol that Spook caught.
*/
body { height: 100%; margin: 0; padding: 0; }
#center { width: 400px; margin: 70px 0 0 180px; background: green;}
#leftcol { width: 180px; position: absolute; top: 70px; left: 0; background: red; }
#rightcol { width: 180px; position: absolute; top: 70px; left: 580px; background: yellow;}
#head { position: absolute; top: 0; width: 760px; height: 70px; background: blue; }
#footer { ... }
.clear { clear: both; }
</style>
body block:
<body>
<!-- Modified ids to leftcol and rightcol to match css -->
<div id="center">All your main content</div>
<div class="clear"></div>
<div id="leftcol">Left stuff</div>
<div id="rightcol">Right stuff</div>
<div id="head">Head stuff</div>
<div id="footer">Footer stuff</div>
</body>
This gives me a standard 3-column layout with a header, 760px wide, with a blue head, red left column, yellow right column, and green center column. I can see nothing wrong with it in either MSIE 6(sp1), Mozilla 1.4, Netscape 7.0, or Opera 6.05 or 7 (all on Win2k). So either the problem is with something else in your markup, or I have no idea what this layout is suppose to look like.
Fwiw - What I mentioned will validate either way. The xml prologue.... Think of it as a 'switch':
If it's there, its valid and IE6 runs in 'quirks mode'
If its not there, its valid and IE6 runs in *cough* 'standards compliant mode'.
To recap - Nothing to do with validation whatsoever.
To say it yet another way, if you have the xml prologue there, I'll bet you that's your problem. And if it's not your problem, I'd take it out anyway!
However, are you using a full doctype or not? And, just as a reference, would you mind posting the doctype you're using?
