Hi,

I am very new in web designing and am using DW MX 2004. I am trying to design a website using the CSS layout function. The website design looks ok in the DW Design View. However, when I preview in browser (firefox & ie), there's no background color, the text are all the same size, etc. I am very bad in explaining... hope you guys understand what I am trying to say.

Here's my html code:
<pre id=code><font face=courier size=2 id=code> &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;script language="JavaScript" type="text/JavaScript"&gt;
&lt;!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape"&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//--&gt;
&lt;/script&gt;
&lt;link href="/styles.css" rel="stylesheet" type="text/css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="outer"&gt;
&lt;div id="header"&gt;Header&lt;/div&gt;
&lt;div id="nav"&gt; Navigation&lt;/div&gt;
&lt;div id="banner"&gt;Banner&lt;/div&gt;
&lt;div id="content"&gt;Content&lt;/div&gt;
&lt;div id="footer"&gt;Footer&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt; </font id=code></pre id=code>

And here's my CSS code:
<pre id=code><font face=courier size=2 id=code>body {
text-align: center;
background-color: #000000;
}
div#outer {
width: 80%;
background-color:#FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}#header {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bolder;
text-transform: capitalize;
color: #666666;
background-color: #FFFF00;
width: 800px;
}
#nav {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFF00;
height: 200px;
width: 200px;
float: left;
margin: 0px;
padding: 0px;
}
#banner {
background-color: #33FF00;
height: 200px;
width: 600px;
float: right;
}
#content {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
color: #333333;
background-color: #00FFFF;
height: auto;
width: 800px;
}
#footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
background-color: #CCFFFF;
width: 800px;
} </font id=code></pre id=code>

Where have I gone wrong?
Pls help and advice.

Thanks so much,
JP

Thanks Andrew for your reply. Will do just that!!! <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>