WebspaceWorks Resources

Take control of spacings in your stylesheets

No two browsers will render CSS identically. Many of the most troublesome differences will be down to browser bugs and it is common knowledge that the vast majority of these are found in Internet Explorer.

Some of the differences however are not caused by bugs at all, or even general browser screwiness… and are much easier to deal with because of this.

Browser default styles

All browsers have a set of default rendering styles (their default stylesheet) that tell them how to render html if there is no site or user stylesheet present. While these default styles are generally similar to each other, differences across the browser families do exist, and will give rise to rendering differences if they are not addressed in any stylesheet applied to the site.

There are two routes to a solution to these differences:

1. Addressing the symptoms: Applying style fixes through browser hacks in those rules where cross-browser rendering differences are seen to occur.
2. Addressing the cause: Negate the effects of the default stylesheet by introducing a standard (clean) starting point which all subsequent styles fall back on

Addressing symptoms of rendering differences

Symptoms of problems are seen in the rendered elements on a page. Fixing the styling of the affected elements may therefore feel like the most surgically precise solution, but such an approach can create more problems than it fixes and can get out of control very quickly. It will usually lead to an unwelcome and potentially heavy dependence upon browser hacks in order to achieve visually correct rendering, and an unnecessarily bloated and complex stylesheet as a result.

The increased complexity also leads to increased fragility if there should ever be a future need to make changes to the stylesheet.

Removing the cause of rendering differences

CSS-based website development is less focused on the isolated elements that make up the page, taking instead a global view of the document as a whole and how elements structurally relate to each other within it. Inner elements will inherit styles from their containers if there is no local value to provide an override.

Fixing differences that arise from a browser’s default stylesheet is therefore a simple matter of providing suitable global override style rules at the top of the site stylesheet, essentially establishing a clean starting point that is then common to all browsers visiting the site.

This approach serves to keep stylesheets small, simple and more robust to changes.

Standardising padding and margins

Padding and margins are probably the one area that causes most problems of this nature. They’re not the only ones, but they are among the most noticable. They are easily fixed with a single simple rule:

* {padding: 0; margin: 0;}

This needs to be the very first rule of the stylesheet, all else follows from this. The values don’t have to be zero, but it is the easiest one to deal with in subsequent rules in the stylesheet.

Both Tantek Celik (undohtml.css) and Eric Meyer (“Really undoing html.css” and “Fractionally restoring html.css”) have also written on this, and should be referred to for a more complete presentation of the possibilities and the pitfalls.

The above is though a bare and practical minimum. It will put you in full control of these spacings throughout any website where it is used, achieving much greater rendering consistency, without the need to unnecessarily add browser hacks to your code.