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

    May 16, 2006
    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.


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


    Jan 28, 2004
    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

    Mar 21, 2008
    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


    Jun 15, 2000
    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.

    Any tips would be appreciated!

Share This Page