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 than on any other browser. I have tested it with Chrome and Firefox (all on Mac OS X).
How could I make it behave the same on all browsers?
The downside of negative margins is they are difficult to debug and will make your CSS harder to read. The most often misuses of negative margins that I encounter is when it is used to make up for incorrect layouts elsewhere on the site. This is indeed bad practice.
It does not break the flow of the page if applied to elements without floats. So if you use a negative margin to nudge an element upwards, all succeeding elements will be nudged as well. It is highly compatible. Negative margins are wholly supported across all modern browsers (and IE6 in most cases).
No. Padding only takes positive values. Negatives are ignored or treated as 0, which would have the same effect: none. Margins can have negative values, as can other position related properties, but not padding.
use display:block; on your element to make Safari see it the same as in FF, IE and Chrome.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With