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;
	
}

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.

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.

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.