# Added white space

**URL:** <https://forum.kirupa.com/t/added-white-space/269670>\
**Category:** web dev\
**Created:** [August 30, 2008, 1:32pm UTC](https://forum.kirupa.com/t/added-white-space/269670 "2008-08-30T13:32:08Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Zaiah](https://avatars.discourse-cdn.com/v4/letter/z/eb9ed0/32.png) [@Zaiah](https://forum.kirupa.com/u/Zaiah)\
**Post date:** [August 30, 2008, 1:32pm UTC](https://forum.kirupa.com/t/added-white-space/269670/1 "2008-08-30T13:32:08Z")

</div>

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](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:  
[![](http://img237.imageshack.us/img237/2306/screeenshottjc0.th.jpg)](http://img237.imageshack.us/my.php?image=screeenshottjc0.jpg)

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!
