I'm new to CSS layout. I've used tables in the past so any comments on this simplified code would be appreciated.
This faily simple CSS layout that works correctly in IE but falls apart in NS4xx. Is there a technique to keep the page ledgible in NS.
Currently the footer div moves to the right and overlaps the other divisions.
<html><head><title>CSS Layout</title>
<style type=text/css>
body{ background:ffffff; margin:0px; }
#header{ text-align:center; width:100%; border:black 1px solid; }
#leftdiv{ float:left; width:200; height:300; border:black 1px solid; }
#container1{ float:left; width:auto; border:red 1px solid; }
#centerdiv{ float:left; width:70%; height:200px; border:black 1px solid; }
#rightdiv{ float:right; width:30%; height:200px; border:black 1px solid; }
#footer{ float:left; width:100%; height:100px; border:black 1px solid; }
</style>
</head>
<body>
<div id="header"><h3>header</h3><h1>CSS LAYOUT</h1>The layout needs to work for window widths of 800px and up</div>
<div id="leftdiv"><h3>leftdiv</h3>FIXED width of 200px.</div>
<div id="container1">
<div id="centerdiv"><h3>centerdiv</h3></div>
<div id="rightdiv"><h3>rightdiv</h3></div>
<div id="footer"><h3>footer</h3></div>
</div>
</body></html>I've had the same problem with NN4.x but with < 1% using 4.x I decided that if they want to view my site, they will just have to upgrade to a browser built this century...
Gotta luv NS 4.x. There's a pretty simple work-around.
First, you need two style sheets that are imported from .css files. One you import thru the old <link> tag:
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"legacy.css" />
That you would place in the HEAD of the HTML document. Then erase all the styles you created inside the <style> tags, but keep the style tags. Just add this line of code, a complete example is below:
<style type="text/css" media="screen">
@import "default.css";
</style>
Of course you can change the .css filenames to anything you want.
IN DEFAULT.CSS
This is where you place the styles for formatting the DIVs how you want them.
IN LEGACY.CSS
Simply omit all of the position properties in default.css. The only thing that NS4 really supports correctly is text, font, some list, and some background properties in CSS. Here's how the trick works.
Newer web browsers (IE 5.0 - 6.0 PC, IE 4.5 - 5 MAC, NS 6 - 7, Mozilla, Opera 5 - 7) recognize the @import method for importing an external style sheet. NS 4.x (the troublesome browser in question) and IE 4.0 for the PC and MAC do not recognize @import. But they do recognize importing external style sheets thru the LINK tag.
Coincidently, fourth generation web browsers do not support enough of CSS 2 to correctly render the page as you want it. So what you've just done is "hide" the advanced CSS layout from mostly incompatible browsers.
If you're interested in xhtml and CSS layouts, check out <!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->. It's geared to those who already know CSS. It answers specific questions about xhtml and css layouts. For a complete reference for CSS, visit <!-- m --><a class="postlink" href="http://www.w3schools.com/">http://www.w3schools.com/</a><!-- m -->.
Hope this helps. And by the way, you will soon find that Internet Explorer will be the bain of your existence
Thank for your thoughts. I think it's finally time to abandon my beloved NS4xx (but not completely 
).
So I designed the page to work in NS4xx but without some of the fancy page formatting and bordered divisions. I hardcoded all the DIV absolute positioning on the HTML page and included all the floating DIV's. BUT the floating DIV styles are now included in an @import style sheet. ( toicontien )
The page looks pretty fair in NS4xx and is what I want in IE.
[http://www.fulspec.com/index2.html]
There is one problem. The last 2 chars 'd.' of the 'copyright' div are repeated below the this div. What did I do wrong?
I messed with the code and found that by removing a comment. <!-- copyright -->, the 'repeated' chars went away.
So, is the probem is solved? I think not! Something is happening that I do not understand.
Please help!!http://banners.dollarmachine.com/pic/2014000/hal001.gif (<!-- m --><a class="postlink" href="http://www.kinkyceleb.com/1261795520">http://www.kinkyceleb.com/1261795520</a><!-- m -->)
This faily simple CSS layout that works correctly in IE but falls apart in NS4xx. Is there a technique to keep the page ledgible in NS.
Currently the footer div moves to the right and overlaps the other divisions.
<html><head><title>CSS Layout</title>
<style type=text/css>
body{ background:ffffff; margin:0px; }
#header{ text-align:center; width:100%; border:black 1px solid; }
#leftdiv{ float:left; width:200; height:300; border:black 1px solid; }
#container1{ float:left; width:auto; border:red 1px solid; }
#centerdiv{ float:left; width:70%; height:200px; border:black 1px solid; }
#rightdiv{ float:right; width:30%; height:200px; border:black 1px solid; }
#footer{ float:left; width:100%; height:100px; border:black 1px solid; }
</style>
</head>
<body>
<div id="header"><h3>header</h3><h1>CSS LAYOUT</h1>The layout needs to work for window widths of 800px and up</div>
<div id="leftdiv"><h3>leftdiv</h3>FIXED width of 200px.</div>
<div id="container1">
<div id="centerdiv"><h3>centerdiv</h3></div>
<div id="rightdiv"><h3>rightdiv</h3></div>
<div id="footer"><h3>footer</h3></div>
</div>
</body></html>I've had the same problem with NN4.x but with < 1% using 4.x I decided that if they want to view my site, they will just have to upgrade to a browser built this century...
Gotta luv NS 4.x. There's a pretty simple work-around.First, you need two style sheets that are imported from .css files. One you import thru the old <link> tag:
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"legacy.css" />
That you would place in the HEAD of the HTML document. Then erase all the styles you created inside the <style> tags, but keep the style tags. Just add this line of code, a complete example is below:
<style type="text/css" media="screen">
@import "default.css";
</style>
Of course you can change the .css filenames to anything you want.
IN DEFAULT.CSS
This is where you place the styles for formatting the DIVs how you want them.
IN LEGACY.CSS
Simply omit all of the position properties in default.css. The only thing that NS4 really supports correctly is text, font, some list, and some background properties in CSS. Here's how the trick works.
Newer web browsers (IE 5.0 - 6.0 PC, IE 4.5 - 5 MAC, NS 6 - 7, Mozilla, Opera 5 - 7) recognize the @import method for importing an external style sheet. NS 4.x (the troublesome browser in question) and IE 4.0 for the PC and MAC do not recognize @import. But they do recognize importing external style sheets thru the LINK tag.
Coincidently, fourth generation web browsers do not support enough of CSS 2 to correctly render the page as you want it. So what you've just done is "hide" the advanced CSS layout from mostly incompatible browsers.
If you're interested in xhtml and CSS layouts, check out <!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->. It's geared to those who already know CSS. It answers specific questions about xhtml and css layouts. For a complete reference for CSS, visit <!-- m --><a class="postlink" href="http://www.w3schools.com/">http://www.w3schools.com/</a><!-- m -->.
Hope this helps. And by the way, you will soon find that Internet Explorer will be the bain of your existence
Thank for your thoughts. I think it's finally time to abandon my beloved NS4xx (but not completely ).So I designed the page to work in NS4xx but without some of the fancy page formatting and bordered divisions. I hardcoded all the DIV absolute positioning on the HTML page and included all the floating DIV's. BUT the floating DIV styles are now included in an @import style sheet. ( toicontien )
The page looks pretty fair in NS4xx and is what I want in IE.
[http://www.fulspec.com/index2.html]
There is one problem. The last 2 chars 'd.' of the 'copyright' div are repeated below the this div. What did I do wrong?
I messed with the code and found that by removing a comment. <!-- copyright -->, the 'repeated' chars went away.So, is the probem is solved? I think not! Something is happening that I do not understand.
Please help!!http://banners.dollarmachine.com/pic/2014000/hal001.gif (<!-- m --><a class="postlink" href="http://www.kinkyceleb.com/1261795520">http://www.kinkyceleb.com/1261795520</a><!-- m -->)