Avoid Cross-Browser Differences with CSS Reset

The number of internet browsers available today are increasing with Internet Explorer, Firefox, Google Chrome, Opera, and Safari as the Big 5 leading the pack. When designing web pages, one needs to make sure that the pages display uniformly on all the browsers. One problem is that these browsers have different default styles. There are no standard default styles for margin, padding, background colors,etc. so each browser naturally displays differently from each other.

One way to correct this problem is to use a CSS Reset. With CSS Reset, you basically create a baseline css styles such that all the browser's different styles will be reset and be uniform to the baseline style. For example, setting margin=0 in your css reset document changes all the browsers' different margin values to 0. This way, all the browsers will have the same margin style initially and you can change the margins later on and you can expect that it will displayed uniformly across all the browsers.

My favorite CSS Reset is created by Eric Meyer. It is currently in version 2.0 and can be used for free in your projects.You can grab a copy of the file here.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}