Firefox 1 px off in navigation

[Aravona]

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.

#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:

<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

[Ribeyed]

Hi Aravona,

This is a common issues and easily fixed. The problem is to do with how 2 different browers interpt the css. Take a div of 50px, when you declare a border width of 1px then the total width would be 52px. Not sure which way around this is so don't quote me on this but one would render a div of 48px wide with 1px border each side and the other 50px with 1px either side.

So to sort your problem just write browsser specific css code.

here is a link to a quick example to get you going.

http://geekswithblogs.net/mnf/archiv...xplorer-7.aspx

regards

Ribs