I've decided that its just gotta happen. I'm going to start designing in all css. I have moderate experience and knowledge of it, but now I'm starting to use it for layout and positioning. How do I make this layout work in both ie, and netscape (6)/mozilla?
code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic 3-Column Sample Page</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
background-color: teal;
margin: 20px;
padding: 0;
font-size: .7em;
font-family: verdana, arial, helvetica, sans-serif;
}
h1,h3 {
font-family: verdana, arial, helvetica, sans-serif;
margin: 0 0 15px 0;
padding: 0;
color: #888;
}
h2 {
font-family: verdana, arial, helvetica, sans-serif;
margin: 0 0 5px 0;
padding: 0;
font-size: 1.1em;
}
p {
font-family: verdana, arial, helvetica, sans-serif;
line-height: 1.1em;
margin: 0 0 16px 0;
padding: 0;
}
.content>p {
margin: 0;
}
.content>p+p {
text-indent: 30px;
}
a {
color: teal;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: 600;
text-decoration: none;
}
a:link {
color: teal;
}
a:visited {
color: teal;
}
a:hover {
background-color: #bbb;
}
.container {
align: center;
width: 600px;
background-color: red;
border: 1px solid blue;
margin: 10px auto 0px auto;
}
.header {
position: relative;
width: 600px;
min-width: 100px;
margin: 0px 0px 0px 0px;
border: 1px solid black;
background-color: white;
padding: 10px;
height: 150px;
z-index: 4;
}
.footer {
position: relative;
width: 600px;
min-width: 100px;
margin: 0px 0px 0px 0px;
border: 1px solid black;
background-color: white;
padding: 10px;
height: 150px;
z-index: 4;
}
/* All the content boxes belong to the content class. */
.content {
position: relative;
width: 300;
min-width: 100px;
margin: 0px 175px 0px 0px;
border: 1px solid black;
background-color: white;
padding: 10px;
z-index: 3;
}
#navright {
position: absolute;
width: 175px;
top: 203px;
MARGIN-TOP: 3px;
MARGIN-LEFT: 425px;
PADDING-RIGHT: 10px;
padding-left:10px;
border: 1px solid black;
background-color: #eee;
padding: 10px;
}
.box {
background-color:white;
border:1px solid black;
width:600px;
height:200px;
margin: 0px 0px 0px 0px;
}
-->
</style>
</head>
<body>
<div class="container">
<div class="header">blah blah<P></div>
<div class="content">
<h3>Getting the Lay of the Land</h3>
<p>We can look at Cascading Style Sheets (CSS) from a number of
contextual perspectives. I prefer to view them as a
correction to a fundamental mistake that was made at the
beginning of Web Time, back in the old days of the mid-1990's
when Tim Berners-Lee and a subsequent phalanx of Web builders
first envisioned the beginnings of the Web.</p>
<p>What was that mistake?</p>
</div>
<div class="content">
<h3>CSS in Context</h3>
<p>Almost as soon as the Web became popular, graphic designers
began noticing what they saw as a fundamental flaw: the
method by which a Web browser displayed information in HTML
files was not within the designers' control. No, it was the
users who were in primary charge of how the Web pages they
visited would appear on their systems.</p>
</div>
<div class="content">
<h3>Keep Adding Content</h3>
<p>You can see that as you keep adding content to this page, it
adds nicely boxed and centered material down the center of
the page.</p>
</div>
<div id="navright">
<h3>Why CSS is Better</h3>
<p>Style sheets allow you to separate content from its
presentation, which leads to pages that are more easily
reproduced as templates for other pages and to vastly easier
maintenance. Smaller file sizes, fewer place-holder graphics,
and faster load times are some of the other benefits of CSS.</p>
<p>If you have other ideas on this subject,
<a href="mailto:dan@danshafer.com">drop me an email</a> and
let's talk about it!</p>
</div>
<div class="footer"></div>
</div>
</body>
</html>
Please bear with me, I have a feeling I'll be posting alot here 
posted 12-16-2003 03:10
