Hi all..


...another trip on the Mystery Whitespace Tour

This one is happening on Mozilla (Firebird also) but not IE, Opera. Unfortunately I don't have a url for you, it's behind a firewall. But if you check out the list at http://my.spamtrap.net.au you'll see what I am getting at (the CSS there is different to below but the output is the same).
Basically what is happening is that an extra 1px of right margin is being added to the first list item, the others are fine (not happening in the example above). Always happens to the first item in the list, so it's not "currentitem".


If anyone can spot something amiss that would be great..

Here's the CSS:
#sitenavigation
{
margin : 0;
padding : 0;
width : auto;
}
#sitenavigation UL
{
list-style-type : none;
margin : 4px 0px 4px 0px;
padding : 1px;
background-color : #333;
width : auto;
}
#sitenavigation UL LI
{
float : left;
padding : 0;
/* want 1px margin-right on the list item - getting 2px on the first one */
margin : 0px 1px 0px 0px;
}


   #sitenavigation UL LI.logon
   {
         float : none;
         margin : 0 5px 0 0;
         padding : 5px 0;
         border : none;
         text-align : right;
         color : #fff;
   }

   #sitenavigation UL LI A
   {
         margin : 0;
         padding : 5px 12px 3px 12px;
         display : block;
         text-decoration : none;
   }

   #sitenavigation UL LI A.item
   {
         color : #fff;
         text-decoration : none;
         background-color : #999;
         border-bottom : 2px solid #999;
   }

#sitenavigation UL LI A.currentitem , #sitenavigation UL LI A.currentitem:hover
{
text-decoration : none;
background-color : #ccc;
border-bottom : 2px solid #ff9900;
color : #333;
}


   #sitenavigation UL LI A.item:hover
   {
         background-color : #bbb;
         border-bottom : 2px solid #ff9900;
         color : #333;
   }


Here's the markup


<div id="sitenavigation">
<ul>
<li><a href="go/search/" class="currentitem" title="...">search</a></li>


<li><a href="..." class="item" title="...">...</a></li>

<li><a href="go/logout/" class="item" title="...">logout</a></li>

<li class="logon">blah</li>
</ul>
</div>



*****************************************************
The discussion list for http://webstandardsgroup.org/
*****************************************************




Reply via email to