Win IE & NS - can't remove space above text in <li>!

[timware]

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

[ray326]

My gut feel is that it's a margin-top thing on the li but you also have multiple objects on the page with the same id -- a definite no no.

[timware]

Hello,

Yeah, I finally just added a "vertical-align: top" to the <li> tag and that fixed it.

I know that the multiple same-named IDs is a no-no. I'm using this page to build a complete tableless layout and doing a lot of experimenting. When doesn't multiple IDs with the same name not work? I realize I should change this and will, after I'm done with the first pass, which I almost am.

Thanks for helping out.

Tim

[ray326]

>> When doesn't multiple IDs with the same name not work? <<

When you're working with the DOM and trying to manipulate elements using getElementById() would be the main place. In terms of CSS, it's just a matter of documentation; many of a class on a page but only one of an id.