Gaps in Horizontal List [Archive]

View Full Version : Gaps in Horizontal List

MattJakel

05-09-2005, 11:44 PM

I'm trying to create a horizontal navigation list whose elements are right next to one another without a gap (there will be borders and padding of course, but that's later). It seems that no matter what I try, there's a 3-5 pixel gap in between each <li>... I wrote a quick example page with borders to illustrate what I'm talking about.

http://jakelresources.com/temp/example.html

Is there some CSS property I'm missing? I set all of the margins and padding to 0, but is there something else that needs to be set to 0?

Also, I don't have access to a Windows box at the moment, but if I recall correctly, I didn't have this problem in IE...

Any help would be appreciated.

Thanks,
Matt

Basscyst

05-09-2005, 11:54 PM

This seems to work:

<html>
<head>
<title>Horizontal List Example Page</title>
<style type="text/css">
#nav1
{
width:600px;
}
#nav1 ul
{
list-style:none;
padding:0px;
margin:0px;
}
#nav1 li
{
float:left;
border-left:solid 3px;
border-right:solid 3px;
}
#nav1 a:hover
{
color:#999999;
}
</style>
</head>
<body>
<div id="nav1">
<ul>
<li><a href="http://www.codingforums.com">Test</a></li>
<li><a href="http://www.codingforums.com">Test 2</a></li>
<li><a href="http://www.codingforums.com">Test 3</a></li>
</ul>
</div>
</body>
</html>

Basscyst

MattJakel

05-10-2005, 02:19 AM

Thanks a lot! I didn't think about leaving them as floated block-level elements... And I think I figured out what the space was... since they were inline elements, the whitespace in between each <li> was renedered as a single space between the elements. Thanks again!