Trouble with Nav Bar in Wordpress

[zeromage]

Hi, everyone,

This is my first time here. I had a question about nav bars. I have a wordpress blog and my nav bar is showing up differently in Firefox and IE.

Here's the code:

#nav {
width: 100%;
}

#navigation {
/* For Normal Browsers */
margin: 0;
padding: 0;
width: auto;
height: 40px;
list-style:none;
}

#navigation li {
margin: 0;
padding: 0;
width:auto;
height: 40px;
float:left;
}

#navigation a {
margin: 0;
padding: 10px 50px 0 20px;
width:auto;
height: 40px;
font:18px Georgia, "Times New Roman", serif;
/* IE6 Needs inline-block otherwise width:auto; spans 100% */
display:inline-block;
text-decoration: none;
}

#navigation a span {
font:12px Arial, Helvetica, sans-serif;
display:block;
}

#navigation a:hover, .current_page_item {
text-decoration:none;
}

Here's my question: the links for the nav bar show up fine in IE, but in Firefox the lines that separate the links extend beyond the nav bar. And when I hover over them, the hover also extends beyond the nav bar. I find this strange since both are set to 40px.

Can anyone help? Thanks.

[zeromage]

the site would look fine in firefox if the hover didn't extend below the nav bar. in IE they are the same size, but they are also too big.