Sliding Doors

[salor]

I created a tabbed navbar based on a styled, unordered list, with sliding doors effect for the tab backgrounds and an effect I don't know the name of - when you move the mouse over the tab pops up from amongst the others. It works fine under IE but with Firefox the right side of the tab is always "up", the left keeps working all right.

html

<div id="header">
<ul>
<li><a name="main" href="javascript:void(0);">Main</a></li>
<li><a name="news" href="javascript:void(0);">News</a></li>
<li><a name="pictures" href="javascript:void(0);">Pictures</a></li>
<li><a name="faq" href="javascript:void(0);">F.A.Q.</a></li>
<li><a name="contact" href="javascript:void(0);">Contact</a></li>
</ul>
</div>

css

#header {
float: left;
font-family: Arial;
font-size: 22px;
font-weight: bold;
}

#header ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#header a {
display: block;
background: url("658579_left.gif") left no-repeat;
padding: 0px 15px;
color: black;
text-decoration: none;
}

#header li {
float: left;
background: url("658579_right.gif") right no-repeat;
margin-left: 2px;
height: 35px;
line-height: 45px;
overflow: hidden;
}
#header li a#current {
color: white;
line-height: 35px;
}

#header a:hover {
line-height: 35px;
}


Any ideas? I'm still a little uncertain about what line-height does, but under IE it works flawless with these settings.

[sfloyd]

What version of Firefox are you using? I have 1.5.0.3 and it seams to work ok.

Thanks

Skip

[salor]

I still have 1.0.6, but I don't think the question is what I use. If it works with newer versions of FireFox that's good news, of course; I'll update to it myself. However, a lot of people might use older versions and my site ought to be working for them as well.
I don't believe in foolproofing a site for even those that use a text based browser, but 1.0 isn't that old.

And I haven't even tested it with Netscape or Opera...