Menu padding cross-browser problem.

[AndrewPham]

Hey everyone!
I have a basic list(and link)-based menu, styled with css. (Code at bottom) . It works as expected in Chrome, Opera and Safari, but when it comes to IE9 and Firefox12, there is a little padding problem. What causes it? How can I resolve it? Thanks in advance!
[Codepen link](http://codepen.io/anon/pen/qIjLH “Codepen link”)

[AndrewPham]

Codepen has a preview feature. If opened in IE or Firefox, the list items are positioned a bit differently, with a delay of some pixels. I just thought that it is caused by the padding properties. But whose base size are you talking about? And how can it be set?

[Kitty Giraudel]

I think it has to do with default styles. Try applying a reset.css or normalize.css.

[AndrewPham]

Applied. Nothing (besides position) changed…

[Paulie_D]

I’m not seeing a problem in IE9.

You still haven’t actually described the ‘little padding problem’.

[AndrewPham]

That’s because you don’t have that custom font installed,and it goes back to arial,which looks ok,even in IE. The ‘little padding problem’ is caused by the brower’s interpretation. In IE, to make the link’s background be equal in size terms to the ul’s background, I have to set the padding-top to 16px,while in chrome,opera and safari,to 15px. I know it’s only a pixel, that’s why I called it ‘little’. Normally, one em is the same as 16px. I think that IE takes it as 15px while the other ones are taking it as 16px… What should I use,centimeters??

[AndrewPham]

I think I will create different classes with the apropiate padding for every browser. Then, I’ll echo the menu items with the specific class according to the client’s browser. Is that ok? I mean, is there an easier solution?

[Paulie_D]

The simplest solution is to do nothing. It’s not necessary for sites to look pixel perfect in every browser.

This is especially true of a single pixel difference. Even if the user actually uses two browsers to view the site it’s still highly unlikely that they will notice a single pixel.

Additionally, are you proposing to embed the font (assuming the licence will permit)? If not then the default font wont be the same in every browser.

Finally, I generally don’t use top / bottom padding in li or a elements as I can use line-height to set their heights equal to the ul.

[AndrewPham]

I will try to use line-height. If nothing will be better, I’ll take your advice and leave it as it is. Thanks!

[Author]

Posts