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
When you say "little padding problem" can you take a screenshot to show us the issue.
The CSS looks okay - might it be that the font is changing because those browsers you're checking in are on another computer that doesn't have Myriad Pro and therefore it's falling back to Arial and then obviously changing in terms of it's padding?
Also, I don't see a base size set and you're using EM's - it may be that those browsers you're using have a smaller/larger default size and therefore the EM's sizing on the padding is having a different effect than expected.
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?
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??
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?
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.
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
When you say "little padding problem" can you take a screenshot to show us the issue.
The CSS looks okay - might it be that the font is changing because those browsers you're checking in are on another computer that doesn't have Myriad Pro and therefore it's falling back to Arial and then obviously changing in terms of it's padding?
Also, I don't see a base size set and you're using EM's - it may be that those browsers you're using have a smaller/larger default size and therefore the EM's sizing on the padding is having a different effect than expected.
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?
I think it has to do with default styles. Try applying a reset.css or normalize.css.
Applied. Nothing (besides position) changed...
I'm not seeing a problem in IE9.
You still haven't actually described the 'little padding problem'.
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??
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?
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.
I will try to use line-height. If nothing will be better, I'll take your advice and leave it as it is. Thanks!