How to Make Your CSS Look Good in Every Browser

Default styles are difficult styles.

Have you ever spent countless hours perfecting every pixel on a web page, only to discover an ugly gap in Internet Explorer where no gap should be? Or extra line breaks in Firefox? This frustrating little problem causes more headaches than an open bar at a wedding. Luckily there is a simple solution.

It’s called normalization.

Each web browser has its own set of default styles. Your web browser uses these styles when no other style is specified. But of course, each browser uses different styles. This means extra padding, larger (or smaller) headers, different fonts, random borders, and… well you get the idea. Normalization is the process of overwriting these default styles in order to gain more control of your web page.

To do this, simply add a little bit of extra code to the top of your CSS file. This code removes all default styles by simply overwriting them.

Here is the code you will need:

/* Normalize padding and margins */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
margin: 0;
padding: 0;
}

/* Normalize header sizes */
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}

/* Normalize list styles */
ol, ul {
list-style: none;
}

/* Normalize font style and weight on odd elements */
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}

/* Normalize table borders */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* Normalize other borders */
fieldset, img {
border: 0;
}

/* Normalize text-alignment */
caption, th {
text-align: left;
}

/* Normalize (remove) quotation marks */
q:before, q:after {
content: '';
}

Adding this code to the top of your style sheet, above the rest of your CSS, will overwrite the default browser styles while not affecting the rest of your CSS. This technique is best used when first starting a design project. If you implement this code after the fact, it may cause some unexpected problems. Especially if you were relying on the default browser styles for padding between elements.

Please keep in mind that this will not solve every CSS display problem. Internet Explorer still has several issues with standard CSS. If after normalizing your styles you still have problems in a particular browser, then the problem is probably not with default styles, but with the way that particular browser renders your CSS.

And there you have it. A simple way to ensure that your lovingly crafted CSS is under your control – not the browser’s.