CSS Background-color displays in IE but not in Firefox

[MandaloreFett7]

Hi,

Im new to CSS and have watched a couple online vids, but I have run into a problem that I can't seem to fix. My menu displays fine in IE 7 and 8, but the background color disappears in Firefox. Any suggestions? Sorry if my code is messy.

I attached two images: First one is IE, Second is Firefox.

IE image:

This is my HTML:

<div id="horizontalnav">

<div class="navlinks">
  <ul>
    <li><a href="space.html">Space</a></li>
    <li><a href="worksmart.html">Worksmart</a></li>
    <li><a href="proline.html">Proline</a></li>
    <li><a href="ospdesigns.html">OSP Designs</a></li>
    <li><a href="http://www.avesix.com/">Ave-Six</a></li>
    <li><a href="ospflounge.html">OSPF Lounge</a></li>
    <li><a href="ospfmetal.html">OSPF Metal</a></li>
    <li><a href="ospfcasegoods.html">OSPF Casegoods</a></li>
    <li><a href="fabrics.html">Fabrics</a></li>
  </ul>
</div>

</div>

<div id="minihorizontalnav">

<div class="mininavlinks">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="shows.html">Shows</a></li>
    <li><a href="capabilities.html">Capabilities</a></li>
    <li><a href="downloads.html">Downloads</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="warranty.html">Warranty</a></li>
    <li><a href="productfinder.html">Product Finder</a></li>
  </ul>
</div>

</div>

This is my CSS:

#horizontalnav {
	
	width: 1000px;
	background-color: #71392C;
					
}

.navlinks {
	
	position: relative;
	left: 104px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
					
}

.navlinks li {
	
	list-style-type:none;
	display: inline;
	
}

.navlinks li a {
	
	color: #FFFFFF;
	padding: 5px 10px 5px 10px;
	text-decoration: none;
	float: left;
		
}

.navlinks li a:hover{
	
	color: #BAA794;
	text-decoration: underline;
	
}

#minihorizontalnav {
	
	clear: both;
	width: 1000px;
	position: relative;
	background-color: #71392C;
			
}

.mininavlinks {
	
	position: relative;
	left: 164px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
				
}

.mininavlinks li {
	
	list-style-type:none;
	display: inline;
	
}

.mininavlinks li a {
	
	color: #FFFFFF;
	padding: 1px 20px 5px 20px;
	text-decoration: none;
	float: left;
		
}

.mininavlinks li a:hover{
	
	color: #BAA794;
	text-decoration: underline;
	
}

[drjohn]

If you give the divs horizontalnav and minihorizontalnav a height they will appear. Currently it's as if they are displaying at zero height, so you can't see the background color of these divs, so the menus show as white on white, outside/below the divs.

Alternatively if you give the background for the body a colour, they also show up.

[MJ Pieterse]

also just make sure to create another link for your a tag that is a:link
some browsers only reads the a:link tag and ignores the a tag.

[LabsMs]

Hi..
Use http://jigsaw.w3.org/css-validator/
Than you can see coorect tags
ok

[ko ko]

Try this tag 'minihorizontalnav' with 'overflow:hidden'. This may be solve. If not post again.