background image/color not working in firefox

Hello,
I am new to the forums and finding them really helpful in my struggle to grasp css and web design. I'm having a problem at the moment with getting an empty container div to show a background color, and am hoping someone can shed some light on the subject.

Currently, the background color in #container shows up in IE, but not in Firefox. I've tried replacing the color with a background image and repeating along the x axis, but this also works in IE but not firefox. I have also tried stating a width (100%) in the #container, but this makes no difference either way!

Below is my code, I have validated it with W3C so hopefully it should read ok.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>3 Column Layout</title>

* {
margin: 0;
padding: 0;
}

body {
background-color:#651;
}

#header {
background-color:#BFAC60;
text-align: center;
}

#container{
clear: both;
background-color: #04022c;
width: 100%;
}

ul#navlist {
list-style-type: none;
width: 775px;
background-color: #fff;
color: white;
text-align: center;
font: 16px Arial, Helvetica, sans-serif;
letter-spacing: 3px;
margin-left: auto;
margin-right: auto;
}

ul#navlist li {
display: inline;
}

ul#navlist li a {
width: 143px;
background-color: #04022c;
color: white;
padding: 2px 5px;
text-decoration: none;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
float: left;
}

ul#navlist li a:hover {
background-color: #cccbf5;
color: #04022c;
text-decoration: none;
width: 143px;
}

#header h1 {
color: #000066;
font-size: 18px;
font-weight: bold;
}

#header h3 {
color: #000000;
font-size: 10px;
font-weight: bold;
}

#container2 {
clear: both;
}

#left {
float:left;
width:200px;
padding:8px;
background-color:#dc8;
clear: both;
}

#right {
float:right;
width:200px;
padding:8px;
background-color:#dda
}

#center {
margin-right:215px;
margin-left:215px;
padding:8px;
background-color:#eec;
}

#footer {
clear:both;
background-color:#CCC08F;
padding:8px;
}

</style>

</head>
<body>
<div id="header">

<h1>WELCOME</h1>
<h3>header3</h3>
</div>
<div id="container">
<div id="topleft"></div>
<div id="topright"></div>
<div class="nav">
<ul id="navlist">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Valuation</a></li>
<li><a href="#">USA Homes</a></li>
</ul>
</div>
</div>
<div id="container2">
<div id="left">Float Left</div>
<div id="right">Float Right</div>
<div id="center">Center Content</div>
<div id="footer">footer</div>
</div>
</body>
</html>

Thanks for looking, even more thanks and appreciation if anyone can help unpuzzle me.

Ali

background image/color not working in firefox

background problem firefox

Ali_g

adamsfather

Ali_g

adamsfather

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week