HTML Forum

**freeman17** · 10-23-2008, 04:23 PM

Ok, now I'm running into a problem between browsers. The navbar looks fine in IE7, but in Firefox it will display a white background. If anyone could help me out, it would be GREATLY appreciated! Here is my HTML and CSS code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Title</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

<div class="wrap">
<img src="images/trimtop.gif" align="top" />
<div class="container">

<div class="header"></div>

<div class="navagationbar">
<ul>
<li id="current"><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="meetings.html">Meeting Info</a></li>
<li><a href="memberlogin.html">Member Login</a></li>
</ul>
</div>


<div class="content">

<div class="left">left content</div>

<div class="right">right content</div>

<div class="clear"> </div>

</div>

<div class="footer">
<a href="index.html">Home</a>  |  
<a href="about.html">About</a>  |  
<a href="services.html">Services</a>  |  
<a href="meetings.html">Meeting Info</a>  |  
<a href="memberlogin.html">Member Login</a>
</div>


</div>
<img src="images/trimbottom.gif" align="bottom" />
</div>

</body>
</html>

CSS:
@charset "UTF-8";
/* CSS Document */

body {
font-family:Arial, Helvetica, sans-serif;
background-image:url(images/gradient.png);
background-repeat:repeat-x;
background-color:#b1b1b1;
maring:0px;
padding-top:25px;
text-align:center;
}

.wrap {
margin:0px auto;
padding:10px 0px 10px 0px;
text-align:left;
width:900px;
background-repeat:repeat-y;
}

.container {
margin:0px auto;
width:700px;
}

.header {
width:700px;
height:124px;
background-image:url(images/header.gif);
background-repeat:no-repeat;
}

.navagationbar {
float:left;
width:700px;
border-top:solid #333333 1px;
border-bottom:solid #333333 1px;
font-size:14px;
}

.navagationbar ul {
margin:0;
padding:0;
list-style:none;
text-align:center;
}

.navagationbar li {
float:left;
margin:0 auto;
padding:7px 0px;

}

.navagationbar ul li a {
display:inline;
padding:7px 10px;
color:#333333;
text-decoration:none;
}

.navagationbar ul li a:hover {
padding:7px 10px;
background-color:#333333;
color:#cccccc;
}

.navagationbar #current a {
background-color:#333333;
color:#cccccc;
}

.content {
padding:0px;
width:700px;
color:#333333;
background-color:#ffffff;
}

.left {
padding:20px;
width:300px;
float:left;
}

.right {
padding:20px;
width:300px;
float:right;
}

.clear {
clear:both;
}

.footer {
width:700px;
text-align:center;
font-size:11px;
}

.footer a {
text-decoration:none;
color:#333333;
}

.footer a:hover {
text-decoration:underline;
}

It has taken me forever to just get this far and have the site look the same in both browsers, now only if Firefox would just cooperate!

Any ideas? I have been staring at this for hours!

**LadynRed** · 10-23-2008, 05:15 PM

Firefox cooperates just fine - it's IE that invariably is showing you something incorrectly because of it's many bugs. Do yourself a favor - test in Firefox FIRST, then KICK IE as needed to make IT behave.

You haven't cleared the floats in your navigation bar.

**vangogh** · 10-23-2008, 07:03 PM

Unless I'm missing the code, it doesn't look like you specified a background-color. I see you have a background-color on the hover and the current page, but I don't see where you've added it to the default state.

I'm guessing you need to add the background-color on the list items in the nav bar.