As designers I am sure we have encountered cases where we have begun cross browser testing of a new website only to find some elements not displaying consistently on all browsers. By beginning our projects with a CSS reset helps us to ensure our websites and mobile apps looks as close as possible to original design regardless of browser. All browsers have their own set of default CSS settings and if we not overwrite these during our project they will rear their ugly head in some unexpected way during browser testing.

There are many different CSS resets out there and simple goggle search will come up with many but I am just going to cover the basic here today.

CSS Reset: Ensuring Cross Browser Consistency

The most common difference browsers have that are going to cause us problems is the default settings for borders, margins and padding. Different browsers have different settings for different HTML tags. So to ensure they all have the same settings we are going to reset all margins and padding on all elements to zero

* {
    margin: 0;
    padding: 0;
    border: 0 none;
    outline: 0;
}

For those new to CSS the * selector we are using in this CSS is a wildcard. It will apply these CSS rules to all HTML elements in our site.

The next biggest difference we encounter between different browsers is the default font size as well as the default font. So we will reset that now.

* {
    margin: 0;
    padding: 0;
    border: 0 none;
    outline: 0;
    font-size: 100%;
    font: inherit;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
body {
    line-height: 1;
}

This will take care of all the various default typography settings different browsers have. From here we can then change our typography as we require further down the track and know it will display the same regardless of browser.

The next thing we need to fix is most browsers will start the website with a different gap between the top of the website and the top of the browser window. This requires a simple one line fix.

* {
    margin: 0;
    padding: 0;
    border: 0 none;
    outline: 0;
    font-size: 100%;
    font: inherit;
    font-weight: normal;
    font-style: normal;
    vertical-align: baseline;
    text-decoration: none;
} 
body { 
    line-height: 1; 
}

All browsers have a different set of defaults for handling the layout of tables so lets take care of that next.

* {
    margin: 0;
    padding: 0;
    border: 0 none;
    outline: 0;
    font-size: 100%;
    font: inherit;
    font-weight: normal;
    font-style: normal;
    vertical-align: baseline;
    text-decoration: none;
} 
body { 
    line-height: 1; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}

We do not have to worry about the default padding and margins as we already took care of this earlier in the wildcard rule.

Next we will deal with the different treatments different browsers give to ordered and unordered lists.

* {
    margin: 0;
    padding: 0;
    border: 0 none;
    outline: 0;
    font-size: 100%;
    font: inherit;
    font-weight: normal;
    font-style: normal;
    vertical-align: baseline;
    text-decoration: none;
}
body {
    line-height: 1;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
ul, ol {
    list style: none;
}

Again we have already dealt with the other differences earlier.

Now we need to ensure older browsers will display some of the newer HTML5 elements correctly.

* {
    margin: 0;
    padding: 0;
    border: 0 none;
    outline: 0;
    font-size: 100%;
    font: inherit;
    font-weight: normal;
    font-style: normal;
    vertical-align: baseline;
    text-decoration: none;
}
body {
    line-height: 1;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
ul, ol {
    list style: none;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

now lets ensure qoutes are handled the same by all.

* {
    margin: 0;
    padding: 0;
    border: 0 none;
    outline: 0;
    font-size: 100%;
    font: inherit;
    font-weight: normal;
    font-style: normal;
    vertical-align: baseline;
    text-decoration: none;
}
body {
    line-height: 1;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
ul, ol {
    list style: none;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
blockquote, q {
    quotes: none;
}
q:before, q:after {
    content: '';
}

Now the majority of cross browser consistency has been taken care of.

I hope you have found this helpful and see you again soon.