Please help with my CSS problem

External Since: Jun 30, 2003 Posts: 49

Under IE 6 my test page looks fine.
Under Netscape, the products area has not background or border and the
text color is wrong.
Under Mozilla you cannot see the content area at all.

I validated the hmtl code with the online validator and it passed.

How can I fix this?

Thanks for any advice

Here is the html

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>My Title</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" >
<link href="../test2.css" rel="stylesheet" type="text/css" >
</head>
<body>
<div id="logo">Logo goes here</div>
<div id="content">
Information
<div id="cnt-inside">

<h1>My Heading Goes Here</h1>
<p>Blah Blah Blah

<h1>Another Heading</h1>
<p>More text</p>
</div>
</div>
<div id="menu">Menu goes here</div>
<div id="products"> <img src="../media/images/left-corner.gif"
width="10" height="15" alt="">Products
in our Store
<div id="prd-inside"> Stuff
<p>Stuff and more <br>
stuff and more stuff </div>
</div>
<div id="footer">
<em>Banner goes here</em>
Home
Find
</div>
</body>
</html>

Here is the css
/* CSS Document */

body{
margin: 0;
background: #ccc;
}

#content{
margin-top: 8em;
margin-right: 150px;
margin-left: 4px;
background-color: #8a0000;
color: White;
font-style: italic;
font-weight: bold;
font-family: serif;
}

#content #cnt-inside {
padding-left: 4px;
padding-right: 4px;
background:white;
border: 1px solid black;
}

#logo{
position:absolute;
margin:0px;
top: 0;
left: 0;
width: 100%;
height: 6em;
background: white;

}
#menu {
position: absolute;
top: 6em;
right: 0;
height: 2em;
width: 100%;
background: cyan; }

#products {
position:absolute;
top: 8em;
right: 4px;
color: white;
background: 8a0000;
font-size: 1em;
}

}
#products #prd-inside {
border: 1px solid black;
right: 4px;
padding-left:4px;
padding-right:4px;
background:white;
color:black;

}

#products h2 { margin-top: 0;
color: white;
background: red;
font-size: 1em;
}

#footer {
border: 1px solid;
margin-right: 12px;
margin-left: 4px;
margin-bottom: 0px;
margin-top: 4px;
padding: 5px;
background-color: #FFFFFF;
font-size: 65%;
text-align: center;
}