Handy Tool / Yahoo CSS Reset


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!

Comments

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.