Back To Website Design Forum

What's your favorite CSS reset?

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post August 15th, 2008, 3:24 am

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.  
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 15th, 2008, 3:24 am

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post August 15th, 2008, 4:07 am

Pretty handy offering there. :)

I usually zero things out as I need to. I might try this idea of doing it en masse, though.
- dM
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post August 15th, 2008, 4:09 am

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

trick.
Let's leave all our *plum* where it is and go live in the jungle ...
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post August 15th, 2008, 4:36 am

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.
Strong with this one, the sudo is.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post August 15th, 2008, 5:03 am

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 ...
Let's leave all our *plum* where it is and go live in the jungle ...
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post August 15th, 2008, 9:48 am

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.
Use your words like arrows to shoot toward your goal.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post August 15th, 2008, 12:05 pm

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.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post August 15th, 2008, 2:17 pm

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 :(
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post August 15th, 2008, 6:56 pm

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
Strong with this one, the sudo is.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post August 16th, 2008, 8:05 am

sounds like a good idea Joe, I'll look into it a bit later as I'm working on a project right now.
Use your words like arrows to shoot toward your goal.

Page 1 of 1

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 83 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
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.