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

[lacohido]

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

 

[kgarner]

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.

 

[chaosdude78]

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.

 

[kainjow]

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!