[css-d] horizontal menu quirk

[Jack Albright]

I've made a typical horizontal menu using <ul> and <li> elements and  
find that the individual menu items have about a 3-pixel gap between  
one another unless I take out line feeds from the source code. This  
is very curious.

Examples:

If the source code looks like this, I get a gap between each menu tab

<div id="navcontainer">
<ul id="navlist">
<li class="first"><a href="/?nextPage=clients"  id="<?=$clientsMenuID? 
 >">Clients</a></li>
<li ><a href="/?nextPage=projects"      id="<?=$projectsMenuID? 
 >">Projects</a></li>
<li ><a href="/?nextPage=tasks"         id="<?=$tasksMenuID?>">Tasks</a></li>
<li ><a href="/?nextPage=staff"         id="<?=$staffMenuID?>">Staff</a></li>
<li ><a href="/?nextPage=resources"     id="<?=$resourcesMenuID? 
 >">Resources</a></li>
<li ><a href="/?nextPage=documents"     id="<?=$documentsMenuID? 
 >">Documents</a></li>
</ul>
</div> <!--end of navcontainer div -->


If the source code looks like the folowing, the tabs are right next  
to each other, the way I want them to be

<div id="navcontainer">
<ul id="navlist"><li class="first"><a href="/?nextPage=clients"          
id="<?=$clientsMenuID?>">Clients</a></li><li ><a href="/? 
nextPage=projects"      id="<?=$projectsMenuID?>">Projects</a></li><li  
 ><a href="/?nextPage=tasks"    id="<?=$tasksMenuID?>">Tasks</a></ 
li><li ><a href="/?nextPage=staff"              
id="<?=$staffMenuID?>">Staff</a></ 
li><li ><a href="/?nextPage=resources"  id="<?=$resourcesMenuID? 
 >">Resources</a></li><li ><a href="/?nextPage=documents"       id="<?= 
$documentsMenuID?>">Documents</a></li>
</ul>
</div> <!--end of navcontainer div -->


Here is the css:
#navcontainer{
margin-bottom:0;
padding:0;
border:none;
}
#navlist
{
        padding: 3px 0;
        margin: 0;
        border-bottom: 1px solid #778;
        font: 12px Verdana, sans-serif;
}

#navlist li
{
        list-style: none;
        margin: 0;
        display: inline;
}

#navlist li a
{
        padding: 3px 0.5em;
        margin-left: 0px;
        border-top: 1px solid #778;
        border-right: 1px solid #778;
        border-bottom: none;
        background: #DDE;
        text-decoration: none;
}
#navlist li.first a{
        border-left:1px solid #778;
}
#navlist li a:link {
color: #448;
}
#navlist li a:visited {
color: #667;
}

#navlist li a:hover{
color: #f69425;
background: #4f8496;
border-color: #227;
}

#navlist li a#current{
background: white;
border-bottom: 1px solid white;
}

Thanks,
Jack Albright



______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/