5 replies [Last post]
sejf83
Offline
Enthusiast
London
Last seen: 15 years 25 weeks ago
London
Joined: 2006-01-01
Posts: 56
Points: 0

Hi all,

I'm building a horizontal navigation bar with ul and li tags. I'm doing it with images because of the designer's choice in font faces. Collectively, the images add up to 899 pixels in width, would should fit nicely into my 900-px layout. Trouble is, it doesn't.

FF is adding space on the left side of the first image. How can I get rid of that?

IE 6 is adding a few extra pixels of black in the #navigation div and I'm not sure why.

Here is the mark up (this code does not validate because of the xscr attribute, but the code is clean)

And the CSS:

html { background-image: url(../images/e3-bg.jpg); background-repeat: repeat; }

body {
background-color: #FFF;
width: 900px;
margin: 4px auto auto auto;
}

#header {
background-color: #fff;
width: 100%;
height: 117px;
background-repeat: no-repeat;
background-image: url(../images/e3-header.gif);
}

#header p{
display:none;
}

#navigation {
width: 100%;
height: 25px;
background-color: #000;
border-bottom:10px solid #FFF;
}

#navigation ul, ul li {
margin: 0px;
}

#navigation ul li{
list-style: none;
display: inline;
}

#navigation ul li a img{
border: none;
}

http://e3.myhomefront.tv/index.htm

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 14 years 20 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

Do this

Do this instead.

#navigation ul li{ list-style: none; display: block; float: left; }

sejf83
Offline
Enthusiast
London
Last seen: 15 years 25 weeks ago
London
Joined: 2006-01-01
Posts: 56
Points: 0

Thanks. That brought all of

Thanks. That brought all of the image into the div in IE -- but not FF. There is still space on the left side (next to "Home"). And IE still has those annoying extra pixels at the bottom of my #navigation div. Any ideas?

Thanks for your help. I really appreciate it.

* I should clarify -- the extra pixels are in IE 6. IE 7 is fine.

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 14 years 20 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

#navigation ul, #navigation

#navigation ul, #navigation ul li { margin: 0; padding: 0; }

sejf83
Offline
Enthusiast
London
Last seen: 15 years 25 weeks ago
London
Joined: 2006-01-01
Posts: 56
Points: 0

Thanks so much! That worked

Thanks so much! That worked for FF. Still no-go on the extra pixels at the bottom of the #nav div....any thoughts?

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 14 years 20 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

NO IE6 to test sorry. Ie7

NO IE6 to test sorry. Ie7 looks fine.