...

View Full Version : HTML/CSS nav bar problem



rafiki
07-29-2007, 05:13 PM
if you go here
http://rafiki.freehostia.com/upload/index.php
you can see the navbar im not sure about other browsers but with FF it has a small space in between each different link button heres html

<div id="navcontainer">

<ul id="navlist">
<li id="active"><a id="current" href="/index.php">Homepage</a></li>
<li><a href="/upload.php">Upload It!</a></li>
<li><a href="/contact.php">Contact Us</a></li>
<li><a href="/about.php">About Us</a></li>
<li><a href="/advertise.php">Advertising</a></li>
<li><a href="affiliate.php">Affiliate With Us</a></li>
<li><a href="link.php">Link Back</a></li>
</ul>
</div>
and heres the CSS

#navlist {
padding : 3px 0;
margin : 0;
border : none;
text-align : left;
letter-spacing: 2px;
color : #666;
background : #6FBF20;
}
#navlist li {
list-style : none;
margin : 0;
display : inline;
}
#navlist li a {
text-decoration : none;
padding : 3px 1.2em;
margin : 0;
border :none;
color : #333;
background : #cbeea8;
}
#navlist li a:link {
color : #333;
background : #b9e588;
}
#navlist li a:visited {
color : #333;
background : #b9e588;
}
#navlist li a:hover {
border : 0 solid #d2dcc9;
color : #fff;
background : #75c22a;
}
#navlist li a#current {
text-decoration : none;
color : #fff;
background : #75c22a;
border : none;
}
thanks to you all in advance.

BWiz
07-29-2007, 06:15 PM
Try altering the paddding for #navlist li a



#navlist li a {
text-decoration : none;
padding : 3px 1.2em; /* set it to 0 to see of this is what causes the padding */
margin : 0;
border :none;
color : #333;
background : #cbeea8;
}

rafiki
07-29-2007, 06:36 PM
nope sorry that didnt work, any other suggestions
i tried


#navlist li a {
text-decoration : none;
padding : 0px 1.2em; /* set it to 0 to see of this is what causes the padding */
margin : 0;
border :none;
color : #333;
background : #cbeea8;
}



#navlist li a {
text-decoration : none;
padding : 0px; /* set it to 0 to see of this is what causes the padding */
margin : 0;
border :none;
color : #333;
background : #cbeea8;
}

and


#navlist li a {
text-decoration : none;
margin : 0;
border :none;
color : #333;
background : #cbeea8;
}

BWiz
07-29-2007, 06:59 PM
Seems like the problem was caused by the link break; try collpasing all of the li's - though this is rather messy.

Alterntivley, you could set a margin-left: -6px;



#navlist li a {
text-decoration : none;
padding : 3px 1.2em;
margin : 0;
margin-left: -6px;
border :none;
color : #333;
background : #cbeea8;
}
Though this makes the first one go 6px to the left as well - should be easy to remedy though.

rafiki
07-29-2007, 11:20 PM
yeah thats better apart from the 6px of the first one which is now overlapping and the last one goes onto the next line, maybe changing the font to 70% or somethin would help.

_Aerospace_Eng_
07-30-2007, 03:05 AM
Inline elements will have about 4px gap in between them, this is normal. To get rid of the gap without using negative margins you need to float the li's to the left to have them on one line.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum