CSS Reset

[cooper.semantics]

Here is my reset.css - Let me know what you guys think and what should be corrected.

/************************************************************************************************************************************************
Reset Elements
************************************************************************************************************************************************/
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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background: transparent;
	font-size: 100%;
}

body { font: 75%/1.2 arial, verdana, helvetica, sans-serif; }

/************************************************************************************************************************************************
Layout Elements
************************************************************************************************************************************************/
.hide {
	overflow: hidden;
	display: block;
	zoom: 1;
	width: 0;
	height: 0;
	line-height: 0;
	font-size: 0;
	text-indent: -9999em;
}

hr { display: none; }

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

ul, ol { list-style: none; }
ul.ul { list-style: inside disc; }
ol.ol { list-style: inside decimal; }

img { display: block; }

a, a:link, a:visited, a:hover, a:active, button { 
	cursor: pointer;
	text-decoration: none; 
}
a:hover { text-decoration: underline; }

address { font-style: normal; }

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

ins { text-decoration: none; }
del { text-decoration: line-through; }

acronym, abbr { 
	cursor: help; 
	border: 0.1em dotted #000;
}

object, embed { display: block; }

/************************************************************************************************************************************************
Overlay Fixes
************************************************************************************************************************************************/
.png {
	filter: alpha(opacity=0);
	opacity: 0;
	-moz-opacity: 0;
	position: absolute;
	width: 100%;
	height: 100%;
}

.iframe {
	position: absolute;
	overflow: hidden;
	z-index: 100000;
	width: 100%;
}
.iframe iframe {
	position: absolute;
	display: none;
	display/**/: block;
	top: 0;
	left: 0;
	z-index: -1;
	filter:mask();
	width: 30em;
	height: 30em;
}

/************************************************************************************************************************************************
Form Elements
************************************************************************************************************************************************/
label { cursor: pointer; }

input, select, textarea {
	margin: 0;
	padding: 0.3em;
	border: 0.1em solid #666;
	background-color: #fff;
	font: 1em arial, sans-serif;
}

input[type="radio"], input[type="submit"], 
input[type="checkbox"], button { 
	padding: 0.2em;
	width: auto;
	height: auto;
}

select { padding: 0; }
textarea { overflow: auto; }

*input.opt { 
	border: 0;
	width: 1.33em;
	height: 1.33em;  
}

:focus {
	background-color: #FEFF6F;
	color: #000;
}

/************************************************************************************************************************************************
Table Elements
************************************************************************************************************************************************/
table {
	*border-collapse: collapse;
	border-spacing: 0;
}
	
	caption, th { text-align: left; }
	th { font-weight: normal; }
	th, td { vertical-align: middle; }
	
/************************************************************************************************************************************************
CMS Tag Conversion
************************************************************************************************************************************************/
center { text-align: center; }

font { 
	color: inherit;
	font-size: inherit;
}

b { font-weight: bold; }
i { font-style: italic; }

big { font-size: large; }
small { font-size: small; }

menu { list-style: none; }

applet { display: block; }

blink { text-decoration: blink; }
s, strike { text-decoration: line-through; }
u { text-decoration: underline; }

/************************************************************************************************************************************************
Clearing Fixes
************************************************************************************************************************************************/
.clear:after {
	clear: both;
	display: block;
	content: ".";
	visibility: hidden;
	height: 0;
}
.clear { 
	*display: inline-block;
	_height: 1%;
}

br, .br {
	clear: both;
	display: block;
	overflow: hidden;
	zoom: 1;
	height: 0;
	line-height: 0;
	font-size: 0;
	text-indent: -9999em;
}

[SimonAKQA]

Is it not perhaps a bit overkill?

Setting blink to actually blink is surely a bit of a waste as no one in their right mind would use the blink tag anymore.

I certainly support use of CSS resets but I tend to focus the reset styles towards the actual site I'm working on, that way you don't waste time resetting everything.

[PicnicTutorials]

I'd say it's way overkill. Plus it doesn't validate. But, to each their own. Do what's easiest for you. But I found in the past when I had a larger reset than I currently use it ended up making it harder for me. Because when things went wrong, as they sometimes tend to do, and I had to do a little trouble shooting, I found it a lot harder to track down the problem when I had so many different rules telling so many different browsers what to do. So I find it easier to take a somewhat minimalist approach to my css resets. It works for me!

[cooper.semantics]

I'd say it's way overkill. Plus it doesn't validate. But, to each their own. Do what's easiest for you. But I found in the past when I had a larger reset than I currently use it ended up making it harder for me. Because when things went wrong, as they sometimes tend to do, and I had to do a little trouble shooting, I found it a lot harder to track down the problem when I had so many different rules telling so many different browsers what to do. So I find it easier to take a somewhat minimalist approach to my css resets. It works for me!

Yeah it is fairly large. I can agree, The CMS CSS stuff is kinda useless

[AutisticCuckoo]

My personal opinion?

:1,$ d

[cooper.semantics]

Everything else is in all good use though. You guys agree, if not state what is not needed.

[cooper.semantics]

My personal opinion?

:1,$ d

hehe - What's your take. What would you remove from this?

[cooper.semantics]

Is it not perhaps a bit overkill?

Setting blink to actually blink is surely a bit of a waste as no one in their right mind would use the blink tag anymore.

I certainly support use of CSS resets but I tend to focus the reset styles towards the actual site I'm working on, that way you don't waste time resetting everything.

Basically i'm trying to come up with the perfect reset.css which I can drop into any site with no changes :-D

[AutisticCuckoo]

hehe - What's your take. What would you remove from this?

It was a lame geeky joke. That command would delete everything if used in the ex(1) or vi(1) *nix editors.

I'm not a graphic designer, and I tend not to do the type of very precise designs where every pixel must be perfectly aligned to prevent the layout from falling apart. Therefore I'll let browser defaults prevail in many instances. I do understand the desire for a 'reset' style sheet, though, if you're doing more advanced designs.

So don't mind me. Just trying to be funny.

[orangesparkz]

I'm just learning css. Maybe you could help me out, I'm intrigued by this post. What would be the purpose of this css file? This isn't used for hacks to get around browser bugs? right? Is this just very common css code that you tend to use over and over again?
thanks

[cooper.semantics]

I'm just learning css. Maybe you could help me out, I'm intrigued by this post. What would be the purpose of this css file? This isn't used for hacks to get around browser bugs? right? Is this just very common css code that you tend to use over and over again?
thanks

Well it does provide some hacks for clearing elements and reduces some of the inconsistencies that default elements have. A reset.css is basically for over-riding browser stylesheets. I use this one for speeding up workload with advanced designs.

If you are new to css I would basically start off not using a reset to get the feel of how elements work/cross browse. Once you learn the differences then you should build a reset.css that fits your style.

The one I have provided is pretty large and covers more than is needed on most sites.

The sites I build need this because they are usually 40-70 page websites.

The CMS section is basically not needed for any sites - just a friendly reminder.

[PicnicTutorials]

Hi,

"what would you remove"

Well is it important to you that it validates? If so, for starters remove the zooms. And I think I saw a couple other things in there that don't validate as well.

z-index: 100000; doesn't z-index only go up to 1000? I don't know for sure but I'm guessing it's a safe bet that it doesn't go up to 100,000

I like these type of threads as well. I'm always looking for ways to make my reset even better.

[logic_earth]

If I were to use a reset css style sheet I would have to pick Eric Meyer's.
http://meyerweb.com/eric/thoughts/20...eset-reloaded/

[cooper.semantics]

Hi,

"what would you remove"

Well is it important to you that it validates? If so, for starters remove the zooms. And I think I saw a couple other things in there that don't validate as well.

z-index: 100000; doesn't z-index only go up to 1000? I don't know for sure but I'm guessing it's a safe bet that it doesn't go up to 100,000

I like these type of threads as well. I'm always looking for ways to make my reset even better.

Yeah the Overlay Fixes are fixes I picked up along the way via the internet.
I have heard people talk about how they have helped them. Lets all come up with a shared reset.css that can be dropped into any site available.

[cooper.semantics]

If I were to use a reset css style sheet I would have to pick Eric Meyer's.
http://meyerweb.com/eric/thoughts/20...eset-reloaded/

If I am not mistaken his reset has changed again http://meyerweb.com/eric/thoughts/20...setting-again/

The reset has outline: 0; set to all specified elements. Not good for usability

Also, I would adjust the line-height but I think Eric said that would probably be the case

Other than that his reset is good for tweaking for your own preferences.

[logic_earth]

The reset has outline: 0; set to all specified elements. Not good for usability

Hence why you define a ":focus" rule.

[PicnicTutorials]

Lets all come up with a shared reset.css that can be dropped into any site available.

It's still a work in progress, but I'm pretty happy with mine! Although after looking over Eric's resets I may add a thing or two to it. But his are a little overkill for my taste as well. Also, primarily because of all of our long discussion on relative font sizes, I'll probably end up changing my 62.5% on the body (because of the associated nesting issues) to 81.25% and therefore the typography section will change a little bit also. I'll give it a trial run on my next project.

[cooper.semantics]

Hence why you define a ":focus" rule.

Are you asking why I defined a focus rule?

I defined a focus rule to alert screen viewers which form element they have selected.

How would this effect usability in a negative way? If you know something I don't know please share the good news. I am always up for learning some new knowledge

[cooper.semantics]

It's still a work in progress, but I'm pretty happy with mine! Although after looking over Eric's resets I may add a thing or two to it. But his are a little overkill for my taste as well. Also, primarily because of all of our long discussion on relative font sizes, I'll probably end up changing my 62.5% on the body (because of the associated nesting issues) to 81.25% and therefore the typography section will change a little bit also. I'll give it a trial run on my next project.

Yeah your reset is not bad man. A few things I see that need fixing.
http://juicystudio.com/article/scree...splay-none.php
This link refers to this .hidden style.

Also, I would omit your stylesheet from using outline: 0;

.inline, .floatleft, .floatright I would get rid of.

You are a good coder and know your stuff. I have been looking at your site. Keep up the good work. Lets put our minds together and come up with an even better reset.css. I see from yours and mine combined that we could complete the missing pieces

[logic_earth]

Are you asking why I defined a focus rule....

No I mean, after you reset the browsers default you then in your main style she define how :focus should be styled. Hence you define a :focus rule.

I probably should have made it more clear.

[cooper.semantics]

No I mean, after you reset the browsers default you then in your main style she define how :focus should be styled. Hence you define a :focus rule.

I probably should have made it more clear.

Oh, ok I see what u mean. You should put together a reset.css as well. I bet it would be pretty nice. You could add on to Eric's reset to proclaim what is missing

[znebojsa]

If I am not mistaken his reset has changed again http://meyerweb.com/eric/thoughts/20...setting-again/

Actually, there has been another update.

http://meyerweb.com/eric/tools/css/reset/

But personally, I just remove the margin, padding and border from each element, and that's it for me.

[xkratosx]

* { padding: 0; margin: 0}

[Bob Carologees]

Reset on a case by case, element by element basis. I can't stand working on sites that have a million inherited rules on every element, makes debugging a pain.

[nukeemusn]

<< blinks at the blink attribute.
Ummm, I'd have to agree with overkill. I have another slant on the question: Is there anything really that the Eric Meyer reset stylesheet doesn't address?

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;
}
/* 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: 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: "" "";
}

EDIT: Sorry, it's very late here and I'm tired. That, and my Logitec MX Revolution's scroll wheel makes it WAY too easy to skim down a page when I'm tired, thus missing all of the previous references to Eric Meyers stylesheet. *snore*