Negative margin different result on safari than any other browser

Question

CSS:

dd
{
    margin: -1.2em 4em 0 1em;
}

This is the only CSS rule applied. The negative margin is pushing it more to the top on Safari th

Answer 1

Without seeing more of your code, it's hard to determine what might be happening ... especially regard to the cascade affecting the element.

However, try changing your ems to pixels:

dd { margin: -12px 40px 0 10px; }

Note: You may need to adjust the pixel values, but you get the idea.

Every em value is relative to its parent's value. If you are using em's as a straight substitution for pixel values, this can cause problems.

Answer 2

I just ran into this using percentage based negative values for margin-top: they looked fine everywhere but mobile safari and mobile chrome. Changing the position from absolute to relative did the trick for me.

Answer 3

use display:block; on your element to make Safari see it the same as in FF, IE and Chrome.