basic css layout in N4.7

**rpratt** · Mar 7, 2004 00:36

Ok, I have one of those situations where the client wants to use CSS-P but insists on supporting N4.7.

I worked up the following code using css-p and tested it in IE 6, mozillia 1.6 and N7. Of course it doesn't work at all in N4.7.

Is there a better way to lay this out in css-p so it will not be completely destroyed by N4.7? Even if I use @import and use another css style sheet for n4.7 I don't see how I can give the user a layout thats close to what modern browsers will see.

Any thoughts would be greatly appreciated.

Code:

 
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" 
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>my title</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
 background-color: #999967;
 margin: 0px;
 padding: 0px;
}
div#content {
 margin: 20px 158px 0px 0px;
}
div#footer {
 background-color: #007349;
 border-top: #000066 1px solid;
 clear: both;
 color: #FFFFFF;
 font: x-small verdana, sans-serif;
 margin-top: 30px;
 padding: 1px 10px 3px 10px;
}
div#main {
 background: #FFFFFF;
 border: 1px solid #333333;
 color: #333333;
 text-align: left;
 voice-family: "\"}\"";
 voice-family: inherit;
 width: 750px;
 width: 748px;
}
html>body div#main {width:748px;}
h1 {
 color: #D97C18;
 font: bold 1em arial, sans-serif;
 margin: 10px 0px 0px 10px;
}

img.floatright{
 float: right;
 margin: 0px 0px 4px 10px;
}
p{
 font: 0.7em/1.5 verdana, sans-serif;
 margin: 5px 10px 15px 10px;
}
#footerleft{
 float: left;
 text-align: left;
}
#footerright{
 float: right;
 text-align: right;
}
#navcontainer {
 float: left;
 margin-top: 29px;
 font: bold 0.7em verdana, sans-serif;
 width: 140px;
}
 #navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer a
{
display: block;
color: #FFF;
background-color: #007349;
width: 140px;
padding: 3px 12px 3px 8px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: bold;
}
#navcontainer a:hover
{
background-color: #25602F;
color: #FCB814;
}
#navcontainer li li a
{
display: block;
color: #FFF;
background-color: #66AB92;
width: 141px;
padding: 3px 3px 3px 16px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: bold;
}
#spacer {
 clear: left;
}
#featureimg{
 text-align: right;
 margin-right: 1px;
}

-->
</style>
</head>
<body>
<div id="main">
<img src="images/top.jpg" width="745" height="26" />
<div id="navcontainer">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a>
   <ul>
   <li><a href="#">link</a></li>
   <li><a href="#">link</a></li>
   <li><a href="#">link</a></li>
   </ul>
</li>
<li><a href="#">link</a></li>
</ul>
</div> 
<div id="featureimg"><img src="images/mygreatimage.jpg" width="584" height="208" /></div> 
<img src="images/floatimage.jpg" class="floatright" />
<div id="content">
<h1>Title here</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. 
Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque 
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce 
feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem.</p> 
<p>Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, 
dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat 
volutpat. Duis ac turpis. Integer rutrum ante eu lacus.</p>
</div> 
 
<div id="footer">
<div id="footerleft">pacific southwest home</div> 
<div id="footerright">disclaimers | pivacy policy </div> 
<div id="spacer"></div> 
</div> 
</div> 
</body>
</html>

**earther** · Mar 7, 2004 00:55

Sorry I don't have time to help you out now but you should know that all my tableless sites look just fine in NN 4.79 (though not identical to newer browsers). Sometimes I use a linked stylesheet for NN4.79 and @import for things it can't handle; sometimes I can do it with one stylesheet. It takes a little fiddling with margins (often negative ones) etc. but it can be worked out. Be creative!

**Paul O'B** · Mar 7, 2004 09:26

Hi,

I'm afraid its all down to testing every element as you go and seeing what works in NN4.7 and what doesn't.

I'm afraid that I don't support it anymore and the most I would do would be to import the styles so NN4 doesn't see them.

If I were you I'd make sure it works in ie5 and 5.5. first as they have about 50% of the market whereas NN4 is probably less than 1%. The page is not correct in these browsers.

Also you have an incorrect doctype so I would check on these things first

Sorry I can't offer more solid advice but there are some things to avoid using for NN4 such as:

avoid a:hover
avoid display:block
avoid negative margin-top for headings (H1-H6)
avoid background shorthand
border shorthand works in NN4+
avoid:
element heights
list styles

There are some compliance charts here:
http://www.westciv.com/style_master/...owser_support/

Hope that helps anyway.

Paul

**rpratt** · Mar 7, 2004 12:52

I guess I'll keep at it. I assume it's failing in IE 5/5.5 because I don't have the width hack on everything that's needed? Is the overall approach to the layout sound or is there a better way?

Paul - whats wrong with this doctype:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

**seanf** · Mar 7, 2004 13:45

Take a look at the following:

http://www.realworldstyle.com/2col.html
http://www.realworldstyle.com/nn4_3col_header.html

Both work in NS 4*

Sean

**Paul O'B** · Mar 7, 2004 13:52

Hi,

Paul - whats wrong with this doctype:

Nothing wrong with the doctype you just pasted but it's not the same as the one at the top of this thread

This is from your first post:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"

The case is all messed up it won't validate and will probably cause quirks mode. You must keep the doctypes in the correct format and case.

regarding ie5 and 5.5.

Code:

div#main {
 background: #FFFFFF;
 border: 1px solid #333333;
 color: #333333;
 text-align: left;
 voice-family: "\"}\"";
 voice-family: inherit;
 width: 750px;
 width: 748px;
}
html>body div#main {width:748px;}

Where is the width for ie5?

The 750px needs to be before the hack not after it otherwise ie5 won't see it

Otherwise the page looks more or less ok

Paul

**rpratt** · Mar 7, 2004 15:10

Doh... thanks!

Does this look better?

Sean - I'll take a look at that. Not really a two column layout but may provide some insight thanks.

Ryan

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My title</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
background-color: #999967;
margin: 0px;
padding: 0px;
}
 
 
/* general divs */
div#content {
margin: 20px 158px 0px 0px;
}
 
div#footer {
background-color: #007349;
border-top: #000066 1px solid;
clear: both;
color: #FFFFFF;
font: x-small verdana, sans-serif;
margin-top: 30px;
padding: 1px 10px 3px 10px;
}
 
 
div#main {
background: #FFFFFF;
border: 1px solid #333333;
color: #333333;
text-align: left;
width: 750px;
voice-family: "\"}\"";
voice-family: inherit;
width: 748px;
}
html>body div#main {
width: 748px;
}
 
 
div#featureimg{
margin-right: 1px;
text-align: right;
}
 
div#footerleft{
float: left;
text-align: left;
}
 
div#footerright{
float: right;
text-align: right;
}
 
div#spacer {
clear: left;
}
 
/* nav divs */
 
div#navcontainer {
float: left;
font: bold 0.7em verdana, sans-serif;
margin-top: 29px;
width: 140px;
}
 
div#navcontainer ul {
list-style-type: none;
margin: 0;
padding: 0;
}
 
div#navcontainer a {
background-color: #007349;
border-bottom: 1px solid #FFFFFF;
color: #FFFFFF;
display: block;
font-weight: bold;
padding: 3px 12px 3px 8px;
text-decoration: none;
width: 160px;
voice-family: "\"}\"";
voice-family: inherit;
width: 140px;
}
html>body div#navcontainer a {
width: 140px;
}
 
div#navcontainer a:hover {
background-color: #25602F;
color: #FCB814;
}
 
div#navcontainer li li a {
background-color: #66AB92;
border-bottom: 1px solid #FFFFFF;
color: #FFFFFF;
display: block;
font-weight: bold;
padding: 3px 3px 3px 16px;
text-decoration: none;
width: 160px; 
voice-family: "\"}\"";
voice-family: inherit;
width: 141px;
}
 
html>body div#navcontainer li li a {
width: 141px;
}
 
 
/* elements and classes */
h1 {
color: #D97C18;
font: bold 1em arial, sans-serif;
margin: 10px 0px 0px 10px;
}
 
 
p{
font: 0.7em/1.5 verdana, sans-serif;
margin: 5px 10px 15px 10px;
}
 
 
img.floatright{
float: right;
margin: 0px 0px 4px 10px;
}
 
-->
</style>
</head>
<body>
 
<div id="main">
<img src="images/topbanner.jpg" width="745" height="26" alt="top banner graphic"/>
 
<div id="navcontainer">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</li>
<li><a href="#">link</a></li>
</ul>
</div> 
<div id="featureimg"><img src="images/mainimage.jpg" width="584" height="208" alt="feature image" /></div> 
 
<img src="images/floatimage.jpg" alt="float image" class="floatright" />
<div id="content">
<h1>title here</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. 
Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque 
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce 
feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem.</p> 
 
<p>Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, 
dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat 
volutpat. Duis ac turpis. Integer rutrum ante eu lacus.</p>
</div> 
 
<div id="footer">
<div id="footerleft">link to home</div> 
<div id="footerright">disclaimers | pivacy policy </div> 
<div id="spacer"></div> 
</div> 
</div> 
</body>
</html>

**Paul O'B** · Mar 7, 2004 16:24

Hi,

Doh... thanks!

Does this look better?

Yes that's it

User Tag List

Thread: basic css layout in N4.7

Thread Tools

Display

basic css layout in N4.7

Bookmarks

Bookmarks

Posting Permissions