Cross Browser Fix

Eliminates amounts of Hacks and Fixes

[CSS_Kidd]

I always post this as a response to simple css problems that some people run into. It is mostly issues with extra spacing rendered differently in different browsers. So instead of responding with it any further, I will simply just post it for all to read and reference.

The fix is as fallows:

This should be the very first rule in your style sheet.

* {
padding:0px;
margin:0px;
}

What this does is it erases all the extra “automatic” padding and margins created by some elements that all browsers may interpret differently. These elements include, but are not limited to:
p, h1, h2, h3…, ul, ol, dl, dt, dd, body, and any other elements that create its own padding and/or margins.

This also means that you will need to apply rules to each of these as you use them.

If you do this you should be able to avoid the simplest fixes and hacks (uh-hem…IE)

FYI: form elements will retain their default margins and/or margins.

[dreamcatcher]

You can also use the reset method as outlined by Eric Meyer.

dc

[CSS_Kidd]

I used to use that reset method a lot. But the * {margin:0px; padding:0px;} is more simplified and covers almost all the elements listed in his first rule. Most of my designs aren't heavy with forms or iframes. But if they were needed, I would just add them to the rule stated above. It keeps the code smaller and cleaner. But as with most things there is more than one or two ways to approach an issue. It just depends on need and preference. I do suggest that all should look at his reset method because the * {margin:0px; padding:0px;} does not cover everything, just only the simple things. Thanks for pointing that out. I had pretty much forgotten about his method.

[swa66]

I usually put in

* {
  margin:0;
  padding:0;
}

as the very first CSS in any new layout.

Note there is no need to add the unit on "0".

Just remember that if you need e.g. a <ul> to work again you need to give it some padding on the left to allow for space for the bullets

ul { padding-left: 2em;}

does the trick nicely.

I prefer this as it's far less code than the more elaborate reset by Eric Meyer. And any code you've written yourself has a far better chance of being understood completely than code you borrowed (with permission of course).