Ewan Main

This is really straightforward. Almost embarrassingly so. Web designers with even a modest amount of experience know this, and I’ll even go so far as to say that most of them do it regularly. But then, there are the ones like me who, despite its obviosity, tend not to remember, and suffer the consequences.

I do most of my web styling in CSSEdit, and most of my browsing in Safari. These are both about as standards-compliant as you’ll find, as they both use WebKit to display their loveliness, so I don’t normally think much about cross-browser compatibility until I’ve finished most of the work and come back to do the tweaking, testing and fixing. So, I’d recently finished working on a site and went over to test it in IE7, and a lot of it looked inexplicably stupid. Titles overlapped each other, indents looked frankly random, and so on.

The solution? Put this at the beginning of the CSS file:

* {
margin: 0;
padding: 0;
}

Simple huh? Like I said, very well-known, but easily forgotten.

Explanation: Each browser makes default assumptions about how to display various elements. So, in the absence of any other instructions, an h1 will be bold, a certain size, have a certain margin and padding, and so on.  When making a stylesheet you override these assumptions with your own instructions. But here’s the thing: different browsers can make different assumptions from each other. So unless you’ve explicitly stated the value of, for example, the margin underneath a heading, each browser will display it according to its own rules and you can’t assume it will look the same.

By putting that little snippet at the beginning of your stylesheet, you’re defining a rule that applies to everything. In other words, you’re overriding every assumption about (in this example) margins and padding, for every element. It will immediately change the look of your page, of course – because margins that were there by default suddenly won’t be any more. But from there it’s an easy matter to go through and add them back again. And hey presto: in my case, the layout was fixed for IE in about three minutes.