I have this css,
#navcontainer
{
margin: 0;
padding: 0;
/* height: 22px; */
font: 11px Verdana, sans-serif;
width: 100%;
border-top: 1px solid #bbb;
list-style-type: none;
background: #fff;
}
#navlist li
{
float: left;
margin: 0;
padding: 0;
width: auto;
display: block;
}
#navlist li a, #navlist li a:link
{
background: #fff;
color: #555;
text-decoration: none;
padding: 2px 5px 3px 5px;
display: block;
}
#navlist li a:hover
{
color: #555;
border-top: 3px solid #bbb;
cursor: pointer;
background: #eee;
}
#navlist li a#current, #navlist li a#current:link
{
color: #000;
cursor: default;
font-weight: bold;
border-top: 3px solid #999;
background: #eee;
}
#navlist li a#current:hover
{
border-top: 3px solid #999;
}
and this for the html.
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" id="current">Item one</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item two</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item three</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item four</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item five</a></li>
</ul>
</div>
for some reason the whole things top border doesnt line up, its like 2pox away from the links and i dont know why! please help.
I think you're talking about the top border shift. Try this.
#navlist li a, #navlist li a:link
{
background: #fff;
color: #555;
text-decoration: none;
padding: 2px 5px 3px 5px;
display: block;
border-top: 3px solid #fff;
}u fixed one problem, but also, above all the buttons, is a line that i want to be right ontop, no pixels between, the buttons. there seems to be several pixels there..
the line im talking abouti,
#navcontainer
{
margin: 0;
padding: 0;
/* height: 22px; */
font: 11px Verdana, sans-serif;
width: 100%;
--------------------------- border-top: 1px solid #bbb; ---------------------------
list-style-type: none;
background: #fff;
}Are you trying to do this? (<!-- m --><a class="postlink" href="http://bonrouge.com/test/navlist.htm">http://bonrouge.com/test/navlist.htm</a><!-- m -->)i merged what you gave and what the guy before gave, it works perfectly. thx a lot.
#navcontainer
{
margin: 0;
padding: 0;
/* height: 22px; */
font: 11px Verdana, sans-serif;
width: 100%;
border-top: 1px solid #bbb;
list-style-type: none;
background: #fff;
}
#navlist li
{
float: left;
margin: 0;
padding: 0;
width: auto;
display: block;
}
#navlist li a, #navlist li a:link
{
background: #fff;
color: #555;
text-decoration: none;
padding: 2px 5px 3px 5px;
display: block;
}
#navlist li a:hover
{
color: #555;
border-top: 3px solid #bbb;
cursor: pointer;
background: #eee;
}
#navlist li a#current, #navlist li a#current:link
{
color: #000;
cursor: default;
font-weight: bold;
border-top: 3px solid #999;
background: #eee;
}
#navlist li a#current:hover
{
border-top: 3px solid #999;
}
and this for the html.
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" id="current">Item one</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item two</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item three</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item four</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item five</a></li>
</ul>
</div>
for some reason the whole things top border doesnt line up, its like 2pox away from the links and i dont know why! please help.
I think you're talking about the top border shift. Try this.#navlist li a, #navlist li a:link
{
background: #fff;
color: #555;
text-decoration: none;
padding: 2px 5px 3px 5px;
display: block;
border-top: 3px solid #fff;
}u fixed one problem, but also, above all the buttons, is a line that i want to be right ontop, no pixels between, the buttons. there seems to be several pixels there..
the line im talking abouti,
#navcontainer
{
margin: 0;
padding: 0;
/* height: 22px; */
font: 11px Verdana, sans-serif;
width: 100%;
--------------------------- border-top: 1px solid #bbb; ---------------------------
list-style-type: none;
background: #fff;
}Are you trying to do this? (<!-- m --><a class="postlink" href="http://bonrouge.com/test/navlist.htm">http://bonrouge.com/test/navlist.htm</a><!-- m -->)i merged what you gave and what the guy before gave, it works perfectly. thx a lot.