CSS Reset

[RyanReese]

Also that's just a crap load of typing that slows down the development process .

[Dan Schulz]

That's where copy/paste comes in. As does starting off with a template file.

[cooper.semantics]

Also that's just a crap load of typing that slows down the development process .

The thing is, I usually reset each of my elements I use in the document to 'specific' values.

In the future, I think the best bet is to 'totally' drop the reset and just set 'explicit' values as I go.

[cooper.semantics]

This is what I am currently doing:

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;
	background: transparent;
	font-size: 100%;
	vertical-align: baseline;
}

/* Overriding Resets */
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { padding: 0 0 0.5em; }
#content blockquote, #content p, #content ul, 
#content ol, #content dl, #content address,
#content form, #content fieldset { padding: 0 0 1em; }
#content table { margin: 0 0 1em; }

Right now, this looks like 'overkill' but, Eric's reset will take care of pretty much all browsers.

@Dan, You seem to be 'very' knowledgeable with 'css'.

What do you think I should do in this case?

[RyanReese]

That's where copy/paste comes in. As does starting off with a template file.

How can you copy and paste when I'm talking about something like this

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

You might have misread my post. Or perhaps I just typed it wrong.

[Dan Schulz]

Drag mouse over text, select, Ctrl C, go to text editor, Ctrl V.

Copy and paste.

[rochow]

#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { padding: 0 0 0.5em; }
#content blockquote, #content p, #content ul,
#content ol, #content dl, #content address,
#content form, #content fieldset { padding: 0 0 1em; }

Wouldn't margin be more applicable? Bit anal, I always try and use padding for "padding" things and margin for "seperating" things. And as you want to "seperate" them from the next one, (not pad them so you can use a background and achieve whatever visual effect) I'd say margin would be better. Plus, if you highlight the page, some browsers include padding in their selection which looks gay.

I use a similar reset, and I'm considering dropping things such as "abbr" and "acronym" as they're rarely used, and even if they are I'm pretty sure they don't have any margin or padding by default. Not sure if the lack of vertical-align:bottom; will affect them... that's something I'll have to test.

Put these styles in your reset. I find that adding the list-style-position of inside cross browses pretty nicely.

#content ul { list-style: inside disc; }
#content ol { list-style: inside decimal; }

Yes, but it changes the effect. Make your list item go onto 2 lines and it sucks - bad for readability.

[RyanReese]

Drag mouse over text, select, Ctrl C, go to text editor, Ctrl V.

Copy and paste.

Nah man you are misunderstanding me. Those are all different elements. So you can't copy and paste because you have to TYPE out each element. Understand?

[Dan Schulz]

Only the first time. After that, it's either copy/paste to a new blank text file, or as I already suggested, use a bare bones template (which is what I do) and then "Save As" to create a new file.

[RyanReese]

Yes, that's my point. You have to type that all out.

Compare the typing speed of code]*{margin:0;padding:0;}[/code] to

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{padding:0; margin:0;

Also include the time needed to remember all those elements.

[rochow]

Yes, that's my point. You have to type that all out.

Compare the typing speed of code]*{margin:0;padding:0;}[/code] to

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{padding:0; margin:0;

Also include the time needed to remember all those elements.

Why would anyone type it? I have a folder called Default which contains an images folder, css folder with stylesheets (reset and basic CSS already in there), and index.html (with the doctype, head etc). I copy+paste it, name it for my project, then start working. I don't have to type anything except for the code for the actual design, so it's as quick as it can get. Also quicker than typing {margin:0;padding:0} and it does a better job

[cooper.semantics]

Wouldn't margin be more applicable? Bit anal, I always try and use padding for "padding" things and margin for "seperating" things. And as you want to "seperate" them from the next one, (not pad them so you can use a background and achieve whatever visual effect) I'd say margin would be better. Plus, if you highlight the page, some browsers include padding in their selection which looks gay.

I usually use padding for most elements and margins for containers. I tend to swap back and fourth to test browser consistences.

<div class="cycling">
	<h2>Cycling</h2>
	<p>...</p>
</div>	

.cycling { margin: 1em 0; }		
	.cycling h2, .cycling p { padding: 1em 0; }

I use a similar reset, and I'm considering dropping things such as "abbr" and "acronym" as they're rarely used, and even if they are I'm pretty sure they don't have any margin or padding by default. Not sure if the lack of vertical-align:bottom; will affect them... that's something I'll have to test.

I understand. I usually still use abbr tags but not acronyms so much.

Yes, but it changes the effect. Make your list item go onto 2 lines and it sucks - bad for readability.

Correct, I actually ran into this issue on my current project

[rochow]

I understand. I usually still use abbr tags but not acronyms so much.

I want to drop tons - my reset weighs in at around 500 bytes - I'd like to make that around 100.

[Dan Schulz]

500 bytes? That's not bad (less than 1/2k). Unless you mean kilobytes. Then you'd have a problem.

[rochow]

500 bytes? That's not bad (less than 1/2k). Unless you mean kilobytes. Then you'd have a problem.

Still... why worry about using an unnecessary class that's 8 bytes when I have 500 potentially un-needed bytes in the css.

[cooper.semantics]

I want to drop tons - my reset weighs in at around 500 bytes - I'd like to make that around 100.

Do you condense everything for production to 1 line per css rule?

[rochow]

Yes - I write it that way. Only format it vertically if requested.

[cooper.semantics]

You probably do not have any issues with this but, if you ever are rushing a huge site:
http://services.immike.net/css-checker/

[cooper.semantics]

Yes, that's my point. You have to type that all out.

Compare the typing speed of code]*{margin:0;padding:0;}[/code] to

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{padding:0; margin:0;

Also include the time needed to remember all those elements.

I see what you are saying but, what if you have a reset.css already saved on your machine, then you will never have to worry about typing this out. Also, the universal selector should be avoided to leave out form fields.

[Luki_be]

As far as I know IE7 needs display: block; also. That's what helps it clear the float. display inline-block just gives it "haslyout".

This explains it better than I can.
http://www.tanfa.co.uk/archives/show.asp?var=300

The author in this article states that IE7 is disregarding the * HTML hack, as most of us now. But there is still a way to use the *html hack in IE7:
with a "+" symbol, as in * + html. This way, you cat still use the hack in IE7.

Just for your information

[rochow]

You probably do not have any issues with this but, if you ever are rushing a huge site:
http://services.immike.net/css-checker/

I also have some toolbar one, however it only checks the current page, and of course there's a billion unused selectors so it doesn't work. What would be great is one that you enter the main URL, it crawls the whole site then checks against the CSS.

[RyanReese]

Well I for one don't have that big resetter. I would have to type it all out. It's just simpler for me to use the universal resetter and manually deal with the forms.

[rochow]

Well I for one don't have that big resetter. I would have to type it all out. It's just simpler for me to use the universal resetter and manually deal with the forms.

How do you fix the <select> dropdowns?

[Paul O'B]

and manually deal with the forms.

Well that's the point - you can't manually re-instate the form defaults once you have stripped them. Many of the appearance properties of form elements are applied via the browsers own stylesheet using proprietary properties and once you strip them they can't be re-instated back to default.

For example here is how some forms are styled by default in Firefox.

extract from Firefox forms.css

button, 
input[type="reset"],
input[type="button"],
input[type="submit"] { 
  -moz-appearance: button;
  /* The sum of border-top, border-bottom, padding-top, padding-bottom
     must be the same here, for text inputs, and for <select>.  For
     buttons, make sure to include the -moz-focus-inner border/padding. */
  padding: 0px 6px 0px 6px;
  border: 2px outset ButtonFace;
  background-color: ButtonFace;
  color: ButtonText; 
  font: -moz-button;
  line-height: normal !important;
  white-space: pre;
  cursor: default;
  -moz-box-sizing: border-box;
  -moz-user-select: none;
  -moz-binding: none;
  text-align: center;
}

button {
  /* Buttons should lay out like "normal" html, mostly */
  white-space: normal;  
  text-indent: 0;
}

*|*::-moz-button-content {
  display: block;
}

button:active:hover,
input[type="reset"]:active:hover,
input[type="button"]:active:hover,
input[type="submit"]:active:hover {
  padding: 0px 5px 0px 7px;
  border-style: inset;
}

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
  padding: 0px 2px 0px 2px;
  border: 1px dotted transparent;
}

button:focus::-moz-focus-inner,
input[type="reset"]:focus::-moz-focus-inner,
input[type="button"]:focus::-moz-focus-inner,
input[type="submit"]:focus::-moz-focus-inner,
input[type="file"] > input[type="button"]:focus::-moz-focus-inner {
  border-color: ButtonText;
}

This is one of the main reasons that reset stylesheets were offered as a means of avoiding this problem

[rochow]

Well that's the point - you can't manually re-instate the form defaults once you have stripped them

Talk about a party pooper! I knew they can't be redone without setting a width - which is fine... until you want to add a longer option. That's why I asked

Does anyone have a list of elements that have margin and padding by default?