/    Sign up×
Community /Pin to ProfileBookmark

Firefox 1 px off in navigation

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;
}[/CODE]

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:

[code=html]<div id=”navigation”>
<a href=”#”>Page1</a><a href=”#”>Page2</a><a href=”#”>Page3</a><a href=”#”>Page4</a><a href=”#”>Page5</a></div>[/code]

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

to post a comment
CSS

1 Comments(s)

Copy linkTweet thisAlerts:
@RibeyedJan 19.2011 — 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/archive/2008/02/13/declare-different-css-rules-for-firefox-and-internet-explorer-7.aspx

regards

Ribs
×

Success!

Help @Aravona spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.8,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...