[pgo]

I recently read Eric Meyers' most recent blog posts:

Eric's Archived Thoughts: Reset Styles
Eric's Archived Thoughts: Reworked Reset
and
Eric's Archived Thoughts: Reset Reloaded

In the final one, he recommends a set of baseline styles for all browsers as follows:

/* Don't forget to set a foreground and background color 
   on the 'html' or 'body' element! */
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,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
a img, :link img, :visited img {
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul {
	list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
	content: "";
}

This is to replace the Yahoo! UI reset.css as well as the ever-popular global whitespace reset: * { padding: 0; margin: 0; }

The advantage of his reset is that you avoid the trickier elements - frames, form inputs and so on - and you cover more ground than just padding and margins.

Discuss.

[freelancr]

always saw these things as being far too anal, never had any reason to do more than * { padding: 0; margin: 0; }

[finbarr]

I kind of do this anyway but usually use the '*' for defining everything... perhaps this is a better (if somewhat longer) way of doing it?

[cam]

use the YUI one myself

[freelancr]

Originally Posted by cam

use the YUI one myself

The thing that put me off about that one was the massive area of copyright comments that had to apparently remain if you were to use it.

[cam]

who cares?

[freelancr]

Originally Posted by cam

who cares?

[pgo]

Originally Posted by cam

use the YUI one myself

How about Eric Meyers' complaint of their use of font-weight: normal; as default instead of inherit?

Anyone using any other part of the YUI library?

[cam]

i used grids on one site just to test it out - no real complaints other than being required to use a markup style i normally wouldn't. wasn't really worth using to be honest.

fonts is too much of a pain in the arse, percentages are meaningless when you look at them 3 weeks later in a css file - need to go lookup YUI docs to see what size things actually are. 62.5% em method is far easier

[pgo]

That's the impression I got. The fonts CSS looked good, but I also use the 62.5% and ems method.

This whole thing has given me a wild hair. I'm going to create a global css file that will set base styles - fonts, sizes, colors, link decoration, etc - for all our corporate and subsidiary sites (most of which I don't control).

[2Dfruit]

Useful link pgo. Cheers

[pgo]

He's "finalized" it...Eric's Archived Thoughts: Reset Reloaded

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: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	background: transparent;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Interesting. I may start using this.

[dougmays]

There was an article posted recently on digg and some other UI websites that read something along the lines of "26 designers interviewed and the 6 biggest questions answered", or something along t hose lines. it had a good set of "reset" styles. does anyone have a link to that site? i cant find it anywhere

[Stuzrol]

35 Designers x 5 Questions

[dougmays]

thanks!