This week kicks off a series of blog posts that will cover what we consider to be the top five old school CSS techniques that everybody should know.

There’s a lot of great stuff out there about the new cutting-edge CSS3 techniques which, while brilliant (and I’m SO going to be using them soon), don’t have sufficient browser support to implement them in full scale commercial projects just yet.

We’re therefore going to go old school in this series and cover some of the techniques that we use on a regular basis when developing sites here at THUSA.

This first post is going to start at the very beginning (a very good place to start) and deal with one main technique that you should have in your arsenal when dealing with browser incompatibilities: the reset file.

CSS: Old Skool 1 - Erase and Rewind

One of the main issues that we come across when developing a site for multiple browser compatibility is that certain elements may conceivably have different attributes applied by the default internal style sheets of each browser

For instance look at how the following code:

<p>Hello World!</p>
<ul>
                <li>If everybody looked the same</li>
                <li>We'd get tired of looking at eachother</li>
                <li>Wouldn't we?</li>
</ul>
<h1>The</h1>
<h2>Quick</h2>
<h3>Brown</h3>
<h4>Fox</h4>
<h5>Jumps</h5>
<h6>Over the lazy dog</h6>

renders in the four main browsers we test in today: Firefox, Safari, IE8 and IE7

Notice how the line heights are subtly different and the font-weights as well? This is just a small example, but differences like this abound in the rendering of HTML standards across browsers and can play havoc with CSS layouts – especially with space sensitive things like floats.

So what’s the solution? Do we just have to keep on hacking away, setting up different padding and margin values for rendering in each browser we support? I bet you’re hoping I’m going to say no here, aren’t you? That sounds like a HORRIBLE thing to have to do (just thing of the javascript alone! Yikes!)

But you’re right – no we don’t. This is where the concept of a CSS reset file comes in. The simplest form of applying this technique would be:

* {
padding: 0;
margin:0;
}

While this technique is ok, it goes nowhere near the complexity needed to completely reset all the possible CSS variants between browsers (there’s also an inherent – and oft debated - performance hit). There’s some scary things underneath the hood that you might not even think about when embarking on a project like this: I mean what about the scrollbar jump in Firefox? (Yes – it’s not just all about fixing IE issues.)

Fortunately, we don’t have to. Other bigger and brighter stars have talked this problem for us. At THUSA, we now routinely use Eric Meyer’s resetcss.css file. This is an amazing piece of work that covers almost every element that has browser discrepancy.  Here’s the code:

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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {

                margin: 0;
                padding: 0;
                border: 0;
                outline: 0;
                font-weight: normal;
                font-style: inherit;
                font-size: 100%;
                vertical-align: baseline;
}

/* remember to define focus styles! */

:focus {    outline: 0;    }

 /*removes FF scrollbar jump*/

html { overflow-y:scroll; }

 body {    line-height: 1;
                color: black;
                background: white;
}

ol, ul {      list-style: none;   }

/* tables still need 'cellspacing="0"' in the markup */

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

caption, th, td {
               text-align: left;
                font-weight: normal;
}

blockquote:before, blockquote:after,

q:before, q:after {
        content: "";
}

blockquote, q {
                quotes: "" "";
}

As you can see it covers FAR more than just the margin and padding.  Here’s the same code rendered again in the same four browsers – this time with the CSS reset.

As you can see, we now have a level playing field upon which to begin to build our page structure. Sure, there will still be browser inconsistencies to deal with later on in the development process, but zeroing out all the inherent inconsistencies early on will make our job all the easier.

It’s also worth noting that you don’t HAVE to use that entire file. For instance, if you know that you will never use the <acronym> tag, you don’t have to include it. However, it is easier to apply this whole file and you will not have to worry about possible code changes down the road.

Usually I’m not a big advocate of the @import rule to bring in too many external stylesheets (I don’t like making too many http requests when loading a project), but for this code I think it’s worth it. Simply upload the file to your sever and reference it at the top of the CSS file: @import url(resetcss.css).

Having said that, there is no reason that this cannot be included in your main stylesheet anyway – just make sure to place it above any other CSS so that it is the first thing that applied in the cascade.

Eric Meyer’s resestcss.css file is available from his blog site here: http://meyerweb.com/eric/tools/css/reset/ but you can also download the attached file below if you wish.

Further Reading:

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

http://developer.yahoo.com/yui/reset/

http://www.ejeliot.com/blog/85

http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/

So that’s the end of Part One of this series of old school CSS techniques. Next time we’ll be looking at sprites and how to use them (but not fairies or gnomes – they don’t like to be used.)