Mon, 2003-12-01 22:39
I've set up CSS horizontal navigation using an unordered list to format it. It's working *almost* perfectly. On Mac OS X, it's fine with IE 5 and Safari; with NS 7.1, there's a 1-pixel space above the text in each <li> that I can't seem to lose. Same thing with both IE & NS in Windows.
The URL:
http://www.hyperarts.com/webstuff/index_css.html
Here's the relevant code:
#navigation
{
width: 760px;
height: 11px;
padding: 0;
margin-top: 1px;
margin-bottom: 2px;
margin-left: 0;
margin-right: 0;
border: 1px solid #000;
background-color: #8C8C8C;
}
#navlist ul
{
margin: 0;
list-style: none;
padding-left: 0;
display: inline;
background-color:#8C8C8C;
}
#navlist ul li
{
border-right: 1px solid #000;
float: left;
line-height: 11px;
}
#navlist ul li.first
{
margin-left: 40px;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#navlist li a
{
padding: 0px 8px 0px 8px;
color: #FFF;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
background-color: transparent;
}
html>body #navlist li a { width: auto; }
#navlist li a:hover
{
padding: 0px 8px 0px 8px;
color: #FFF;
text-decoration: none;
background-color: #333;
}
Thanks for any help.
Tim
Tue, 2003-12-02 05:14
#1
Win IE & NS - can't remove space above text in <li>
The problem may be your 1px border in Navigation.
You may be aware of how IE 5 treats the width of a box compared to IE6 and Moz etc, yet I do not see any hacks for IE5
#navigation
{
width: 760px;
height: 10px;
padding: 0;
margin-top: 1px;
margin-bottom: 2px;
margin-left: 0;
margin-right: 0;
border: 1px solid #000;
background-color: #8C8C8C;
}
* html #navigation
{
height: 11px;
he\ight: 10px;
}
You probably need more for widths as well, but lets see if this fixes you problem.
Regards
Day
Tue, 2003-12-02 06:09
#2
Thanks and...
Hey Day,
Thanks for the tips. I actually just fixed the problem by adding "vertical-align: top" to the <li>. It now looks fine in IE 6 and NS 7 on Windows. But what's this about accounting for a bug with IE 5? On Windows (I assume)?
Please feel free to take a look at the page to see if anything else could be improved, if you don't mind. If you're too busy, I certainly understand.
http://www.hyperarts.com/webstuff/index_css.html
Thanks for taking the time to help out.
Tim
Tue, 2003-12-02 09:58
#3
Win IE & NS - can't remove space above text in <li>
According to CSS definitions padding and border is supposed to be applied outside the box, not inside it but that is what IE5.x does.
For the following we should end up with a total width of 500px being, border + padding + width + padding + border = total
Box {border: 30px solid; padding: 20px; width: 400px;} or 30 + 20 + 400 + 20 + 30 = 500px
However, in IE5.x the total width is 400px, with an inside width of 300px Being: Width - padding - padding - border - border = total width in ie5.x
or 400 - 20 - 20 - 30 - 30 = 300px
To get around the problem Tantek can up with a hack using Voice Family as IE5.x craps out (can't parse) when it reads it, while newer browsers can get past it, and obtian new widths.
I use a newer hack which to me is easier to use. See this page for the hacks - http://css-discuss.incutio.com/?page=BoxModelHack
Of course it does not make any diffeence if Borders and padding are not used.
Regards
Day