What's your favorite CSS reset?

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

There're quite a few out there. For those that don't know, browsers have their own built in css file that tells them how to render objects. This is how a browser knows where to start a page, how big headers, footers, and body text should be, etc. It's the biggest reason sites look so different between browsers. So a CSS reset is a CSS file that resets everything to 0 so you can start from scratch in all browsers. Which is your favorite CSS reset? If you have your own, post the code for everyone else to see; if it's a reset from the internet, post the link.

Code: [ Select ]
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;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    color: #000000;
    font-size: 100%;
}
 
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
 
:focus {
    outline: 0;
}
 
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
 
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code,
  4. del, dfn, em, font, img, ins, kbd, q, s, samp,
  5. small, strike, strong, sub, sup, tt, var,
  6. b, u, i, center,
  7. dl, dt, dd, ol, ul, li,
  8. fieldset, form, label, legend,
  9. table, caption, tbody, tfoot, thead, tr, th, td {
  10.     margin: 0;
  11.     padding: 0;
  12.     border: 0;
  13.     outline: 0;
  14.     font-size: 100%;
  15.     vertical-align: baseline;
  16.     background: transparent;
  17.     color: #000000;
  18.     font-size: 100%;
  19. }
  20.  
  21. body {
  22.     line-height: 1;
  23. }
  24. ol, ul {
  25.     list-style: none;
  26. }
  27. blockquote, q {
  28.     quotes: none;
  29. }
  30.  
  31. :focus {
  32.     outline: 0;
  33. }
  34.  
  35. ins {
  36.     text-decoration: none;
  37. }
  38. del {
  39.     text-decoration: line-through;
  40. }
  41.  
  42. table {
  43.     border-collapse: collapse;
  44.     border-spacing: 0;
  45. }
  46.  
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Pretty handy offering there. :)

I usually zero things out as I need to. I might try this idea of doing it en masse, though.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Wow ... thanks MFS ... I usually just do the old
Code: [ Select ]
*{margin:0px;padding:0px;}

trick.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

I quit using the *{margin/padding} trick when Dan Schulz mentioned that it can cause accessibility problems, I think it was in forms where it would happen. :scratchhead:
I never did look into it to see exactly what was happening, Dan is usually spot on with things like that so I took his word for it & altered my practices.

I didn't choose to go with the monstrosity mindfullsilence has there either, instead I tend to zero things out as needed like dM mentioned, with the exception of <h1-h6> which always seem to give me problems. I zero out the margin on those and set a good top/bottom padding. Depending on where they are I might use a left/right padding of a few pixels to keep things off of the walls.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

joebert wrote:
I quit using the *{margin/padding} trick when Dan Schulz mentioned that it can cause accessibility problems

I'll have a look at that even though I haven't found any problems concerning that yet ...
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

I prefer using the "monstrosity" because it saves time. As mentiond by a lot of you, it seems to be prefered to zero things out as you go, the reason I do it this way is to save time. One file that's readily avaliable so all I have to do is throw the link to it in my html files and start work without worrying if something is zeroed out or not. I'm sure it's a little overkill but why not? The file size is only about 1-2KB, taking it about .1 seconds to load on a 56k modem.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

I'm actually a fan of the one that comes with the YUI library. It seems to be a little on the lighter side without resetting everything the way Eric Meyer's does...

I did end up adding body{font-size:100%) however.

I don't really agree that resetting things can be a usability issue. You just need to remember to go and add those things back into form fields, etc as you need them. I find that resets are actually quite useful and I rarely see much difference in my designs across FF,IE7, Safari and Opera on either the mac or the pc. The only one that doesn't benefit completely in my experience is IE6 but that has a lot less to do with the reset and more to do with its rendering issues.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

righteous_trespasser wrote:
Wow ... thanks MFS ... I usually just do the old
Code: [ Select ]
*{margin:0px;padding:0px;}

trick.


I started to use that and then add padding and margins as I go and as needed. Didn't find any problems with the forms. I'm using that thing on my site right now which you can't see for some sql problems I've got on it right now :x :(
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

mindfullsilence, have you ever thought about hosting it on Google Code & linking to it there as well as encouraging other people to link to it too ?

The Downloads at Google code can be linked to by webpages, I know because I was linking to one of the jQuery downloads at Google Code for quite awhile without any problems whatsoever.

I remember reading something somewhere about Google wanting to be the centerpoint for shared libraries like that anyways.
It would be kinda neat to see a shared CSS library with various reset & common effect files on Google code. :D
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

sounds like a good idea Joe, I'll look into it a bit later as I'm working on a project right now.

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 66 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.