jadepearl
07-17-2008, 03:12 PM
Hi,
Am trying to design my website using CSS Layout with DW MX 2004. 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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
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);
//-->
</script>
<link href="/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="outer">
<div id="header">Header</div>
<div id="nav"> Navigation</div>
<div id="banner">Banner</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
And here's my css:
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;
}
Can anyone help me?
Thanks so much.
JP
Am trying to design my website using CSS Layout with DW MX 2004. 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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
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);
//-->
</script>
<link href="/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="outer">
<div id="header">Header</div>
<div id="nav"> Navigation</div>
<div id="banner">Banner</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
And here's my css:
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;
}
Can anyone help me?
Thanks so much.
JP