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

programming web dev
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.

Does anyone know anything about this?
Thanks in advance
-Landon

2

The text is the same distance away from the blue mark so it’s the top for sure, hrmmm.

3

what happens when you set padding-top to 1px?

do they both increase by one? or does Safari remain unchanged, and only Firefox increases?

Have you defined your fonts correctly?
If you are leaving it up to the default serif, this could be why its happening, a non default font could fix it

4

[QUOTE=fasterthanlight™;2323784]what happens when you set padding-top to 1px?

do they both increase by one? or does Safari remain unchanged, and only Firefox increases?

Have you defined your fonts correctly?
If you are leaving it up to the default serif, this could be why its happening, a non default font could fix it[/QUOTE]

fasterthanlight-
If I add 1px to the top it adds it in both Safari and Firefox. Good thought though.
Also, the font-family is defined for the <h2>

Here is the CSS for that element:


#main h2{
    font-size: 20px;
    margin: 10px 0 0 0;
    background: url(images/h2.gif) no-repeat;
    color: #333333;
    font-family: Times, Times New Roman, serif;
}
5

it’s the difference in the default line-height, if you define the line-height to a px it should render the same.