css - weird firefox rendering problem

[lozina]

I followed a tutorial on making horizontal list menus using css and when I started customizing it I ran into a strange problem.

I added borders and background to my 'menu tabs' and it renders fine in IE but in Firefox I see this 1px tall bar at the top between the border and the background shading... I cant figure out why this is happening.

Any ideas?

<style>
.menubar {
list-style : none;
padding : 0;
margin : 0;
}
.menubar li {
border : 1px solid gray;
float : left;
margin : 0 0.15em;
padding : 0;
}
.menubar li a {
background : #CEDDFF;
text-decoration : none;
padding : 0 0.15em;
}
.menubar li a:hover {
background : yellow;
text-decoration : underline;
}
</style>

<ul class="menubar">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></i>
<li><a href="#">Three</a></li>
</ul>

 

[Snapster]

Either make the .menubar li a a block element or put the background colour on the .menubar li and not .menubar li a

Btw, probably a copy and paste error but:

<li><a href="#">Two</a></i> <----- wrong end tag

 

[lozina]

Originally posted by: Snapster
Either make the .menubar li a a block element or put the background colour on the .menubar li and not .menubar li a

Btw, probably a copy and paste error but:

<li><a href="#">Two</a></i> <----- wrong end tag

Bingo!

thank you sir

 

[Snapster]

No probs