Added white space

programming web dev
1

I attempted to make an imaged based css navigation set. It works fine in IE7 but in the other browers (Firefox, Opera, Safari, Netscape, etc.) the images I used for the nav have a white space next to them.

Here’s the code:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html lang=“en”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<link rel=“stylesheet” href=“main.css” type=“text/css” />
<title>Welcome to TBN Graphics</title>
<link rel=“stylesheet” href=“lightbox.css” type=“text/css” media=“screen” />
<script src=“js/prototype.js” type=“text/javascript”></script>
<script src=“js/scriptaculous.js?load=effects” type=“text/javascript”></script>
<script src=“js/lightbox.js” type=“text/javascript”></script>
</head>

<div id=“head”>
[COLOR=“Red”]<ul class=“menu”>
<li class=“home”><a href="#">Home</a></li>
<li class=“entertainment”><a href="#">Entertainment</a></li>
<li class=“designers”><a href="#">Designers</a></li>
<li class=“models”><a href="#">Models</a></li>
</ul>[/COLOR]

And the CSS:
.menu {
margin: 0;
padding: 0;
list-style: none;
background: #fff;
position: relative;
left: 188px;
top: 231px;
}
.menu li {
padding: 0;
margin: 0;
margin-right: 37px;
list-style: none;
background-repeat: no-repeat;
height: 28px;
}
.menu li a, .menu li a:visited {
display: block;
text-decoration: none;
text-indent: -3000px;
height: 28px;
background-repeat: no-repeat;
}
.home {background-image: url(images/homeHover_btn.jpg); width: 84px;}
.home a {background-image: url(images/home_btn.jpg);}
.entertainment {background-image: url(images/entHover_btn.jpg);width: 216px;}
.entertainment a {background-image: url(images/ent_btn.jpg);}
.designers {background-image: url(images/designHover_btn.jpg); width: 148px;}
.designers a {background-image: url(images/design_btn.jpg);}
.models {
background-image: url(images/modelsHover_btn.jpg);
width: 113px;
}
.models a {
background-image: url(images/model_btn.jpg);
}
ul.menu li a:hover {background: none;}
.menu li {float: left;}
.menu:after {content: “.”; display: block; height: 0; clear: both; visibility: hidden;}

and here’s the screenshot:

Also, I need these buttons in an exact location if possible so that they blend in with the background.

Any help on this would be appreciated. Thanks!