Now normally I have this problem with Internet Explorer but today its Firefox.

My IE8 displays the following perfectly, but for some reason my a:hover is 1px too low in FF.

Code:
#navigation {
background:url('images/navbg1.png') repeat-x;
padding-top:15px;
padding-bottom:15px;
text-align:center;
font-size:18px;
margin-top:0px;
}
#navigation a{
text-decoration:none;
color:#000000;
padding-left:5px;
padding-right: 5px;
margin-top:0px;
}
#navigation a:hover{
background:url('images/navbg2.png') repeat-x;
padding-top:15px;
padding-bottom:15px;
color:#ffffff;
}
I'm not sure why its 1px too low, because when I set a negative margin-top to try and pull it up nothing happens. I've checked it in Firebug and there is no extra padding or margin there, in fact it was no help whatsoever as it only showed me what I could already see.

The code for the navigation is so stupidly simple:

HTML Code:
<div id="navigation">
<a href="#">Page1</a><a href="#">Page2</a><a href="#">Page3</a><a href="#">Page4</a><a href="#">Page5</a></div>
Any ideas why this 1px is turning up in FF? I'm working locally so I am afraid I can't post a link.

Cheers,

Ara