3 replies [Last post]
timware
Offline
Regular
Oakland CA
Last seen: 15 years 33 weeks ago
Oakland CA
Joined: 2003-12-01
Posts: 13
Points: 0

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

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 35 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Win IE &amp; NS - can't remove space above text in &lt;li&gt

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

The only way to learn is to do it yourself

timware
Offline
Regular
Oakland CA
Last seen: 15 years 33 weeks ago
Oakland CA
Joined: 2003-12-01
Posts: 13
Points: 0

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

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 35 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Win IE &amp; NS - can't remove space above text in &lt;li&gt

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

The only way to learn is to do it yourself