Fri, 2007-01-12 18:11
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)
Header graphic
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;
}
Fri, 2007-01-12 18:19
#1
Do this
Do this instead.
#navigation ul li{
list-style: none;
display: block;
float: left;
}
Fri, 2007-01-12 18:24
#2
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.
Fri, 2007-01-12 18:29
#3
#navigation ul, #navigation
#navigation ul, #navigation ul li {
margin: 0;
padding: 0;
}
Fri, 2007-01-12 18:43
#4
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?
Fri, 2007-01-12 20:01
#5
NO IE6 to test sorry. Ie7
NO IE6 to test sorry. Ie7 looks fine.