How to Make Your CSS Consistent Across Browsers

#css

Maybe this post should be the first of the firsts because it's about how to start your CSS. Then again, you should be able to understand what exactly it is you're doing so I'm not too much late with this.

Reset in code presents a short set of rules that resets styling of all elements to a consistent baseline. It is needed because the styling isn't consistent across browsers. You don't want something like pre-styling of e.g. table element, to mess with you when you're on.

Practice

When I was starting with CSS it is said to me that on the beginning you should always write:

 *{
    margin:0;
    padding:0;
 }

This was the basic CSS Reset.

Some of the most common elements that are styled differently among different browsers are hyperlinks (<a>), images (<img>), headings (<h1> through <h6>), and the margins given to various elements. It is a well-known fact that browsers add a certain amount of padding to almost everything.

The example of the different styling of the checkout button between browsers:

The example of the different styling of the different elements (headline, link, span, code, blockquote):

Every browser has a default HTML formatting and you can see it under "user agent stylesheet" in inspect mode. If style is added for the specific element, its default browser formatting is overwritten.

Reset Scripts

My favorite CSS reset script is one from http://html5doctor.com:

 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,  pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
     margin:0;
     padding:0;
     border:0;
     outline:0;
     font-size:100%;
     vertical-align:baseline;
     background:transparent;
 }

 body {
     line-height:1;
 }

 article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section{ 
     display:block;
 }

 nav ul {
    list-style:none;
 }

 blockquote, q {
    quotes:none;
 }

 blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content:none;
 }

 a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
 }

 /* change colors to suit your needs */
 ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
 }

 /* change colors to suit your needs */
 mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
 }

 del {
    text-decoration: line-through;
 }

 abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
 }

 table {
    border-collapse:collapse;
    border-spacing:0;
 }

 /* change border color to suit your needs */
 hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
 }

 input, select {
    vertical-align:middle;
 }

Some of defined styles are pretty standard (ones for <a> and for <ul>), some are added to help accesability (ones for <abbr> and <dfn>) and some are added extra (<hr>).

There is a list of more reset scripts that you can use:

Instead of CSS reset, some developers use CSS normalize (and some refer to it as “the new reset”). While reset is used for wiping everything out and making your project "tabula rasa", normalize keeps good practices while neutralizes cross-browser style inconsistency. I will write about CSS normalize in the future for sure. Until then check this post.