- This topic is empty.
-
AuthorPosts
-
October 27, 2012 at 11:58 am #40478
AndrewPham
ParticipantHey 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”)October 27, 2012 at 12:32 pm #112758AndrewPham
ParticipantCodepen 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?
October 27, 2012 at 5:21 pm #112779Kitty Giraudel
ParticipantI think it has to do with default styles. Try applying a reset.css or normalize.css.
October 27, 2012 at 5:38 pm #112781AndrewPham
ParticipantApplied. Nothing (besides position) changed…
October 27, 2012 at 5:44 pm #112782Paulie_D
MemberI’m not seeing a problem in IE9.
You still haven’t actually described the ‘little padding problem’.
October 28, 2012 at 4:43 am #112803AndrewPham
ParticipantThat’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??
October 28, 2012 at 4:51 am #112804AndrewPham
ParticipantI 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?
October 28, 2012 at 5:42 am #112806Paulie_D
MemberThe 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.
October 28, 2012 at 6:14 am #112807AndrewPham
ParticipantI will try to use line-height. If nothing will be better, I’ll take your advice and leave it as it is. Thanks!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.