Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Menu padding cross-browser problem.

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #40478
    AndrewPham
    Participant

    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”)

    #112758
    AndrewPham
    Participant

    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?

    #112779
    Kitty Giraudel
    Participant

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

    #112781
    AndrewPham
    Participant

    Applied. Nothing (besides position) changed…

    #112782
    Paulie_D
    Member

    I’m not seeing a problem in IE9.

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

    #112803
    AndrewPham
    Participant

    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??

    #112804
    AndrewPham
    Participant

    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?

    #112806
    Paulie_D
    Member

    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.

    #112807
    AndrewPham
    Participant

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.