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:
<!-- m --><a class="postlink" href="http://www.hyperarts.com/webstuff/index_css.html">http://www.hyperarts.com/webstuff/index_css.html</a><!-- m -->
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.
TimMy 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.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>> 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.
The URL:
<!-- m --><a class="postlink" href="http://www.hyperarts.com/webstuff/index_css.html">http://www.hyperarts.com/webstuff/index_css.html</a><!-- m -->
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.
TimMy 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.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>> 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.