Handy Tool / Yahoo CSS Reset

29/06/2007

When developing websites the most problematic thing I often come across is the various ways browsers will render a html element. If you do not have any CSS plugged into a html page the browser has pre-set rendering for all the html tags (eg. “h1″ tags, “p” tags etc). Firefox will interpret html slightly differently to Safari and Safari will interpret it differently to IE – IE interprets it differently in all its versions (!), and so sometimes you are left with the nightmare job of trying to make things look the way they should. The way you do this is by telling the browser exactly what you want.I recently came across this piece of css from the Yahoo User Interface Library:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,

h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}

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

fieldset,img {border:0;}

address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}

ol,ul {list-style:none;}

caption,th {text-align:left;}

h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}

q:before,q:after {content:'';}abbr,acronym { border:0;}

Basically this strips all the styling out of the html elements, it “resets” the css. This means that you are forced to specify everything and therefore you do not rely on a browser to interpret your code using its default rendering. You have told it what to do and so it should do it (should!). I’ve found it really handy and so thought I’d post it up for others to be aware of.To use simply copy and paste the above code into the beginning of your css file and continue as usual – however remember every html tag you use needs to be styled. Enjoy.Yahhhhhh Whooooooooo Ohhhhh!

Author

Attitude Design

View Attitude's Profile

Attitude Design

One Response to “Handy Tool / Yahoo CSS Reset”

  1. Andrew Faulkner

    1st July 2007

    Good call, Matt. I normally use this one:

    http://leftjustified.net/journal/2004/10/19/global-ws-reset/

    But I can see that the Yahoo one goes into more depth.

Tell us what you're thinking...

Your Contact Details

Your Comment

Recieve Attitude Mail?

Are You Finished?

Let's Filter Through!

Choose one of our blog categories below

Questions?

Call us on 0845 0700 820
or get in touch using the buttons below

contact details

project planner