CSS - Need help with text alignment (Safari vs Firefox)

Discussion in 'Web Design and Development' started by lacohido, May 8, 2008.

  1. lacohido macrumors newbie

    Joined:
    May 16, 2006
    #1
    Hi there
    Ive been trying to figure this out for a while now. I've seen it on a couple projects I've worked on. I dont know if its a Safari Bug, Firefox Bug, or if Im doing something wrong.

    Anyway, whenever I use Header tags (<h1>, <h2>, etc) and sometimes the <p> tag I get this weird padding issue. In Safari there is a slight TOP padding (1px or so) and in Firefox I get 0px top-padding.

    My Padding and Margin is set to 0. Take a look.

    [​IMG]

    Does anyone know anything about this?
    Thanks in advance
    -Landon
     
  2. kgarner macrumors 68000

    kgarner

    Joined:
    Jan 28, 2004
    Location:
    Utah
    #2
    I suspect it's a line-height issue. Every browser calculates them just a little bit differently, but usually if you apply a specific line-height then you can get much more consistent results.
     
  3. chaosdude78 macrumors newbie

    Joined:
    Mar 21, 2008
    #3
    kgarner is correct, each browser, even the same one on different computers, calculate default margins, paddings, fonts, and colors differently. To make your design look as close as possible to the intended view, always include elements like margin, padding, line-height, font-family, font-size, and the like for all your divs, classes, and tags.
     
  4. kainjow Moderator emeritus

    kainjow

    Joined:
    Jun 15, 2000
    #4
    I was having the exact same issue with Safari but the line-height "fixed" it. However, now Firefox is displaying the text higher than Safari. I've been playing with it for a while and can't figure it out.

    Here is what I'm working with. If you compare it on Safari and Firefox you'll see that Firefox displays the text slightly higher than Safari.
    http://kainjow.com/test.htm

    Any tips would be appreciated!
     

Share This Page