SitePoint Sponsor

User Tag List

Page 1 of 10 12345 ... LastLast
Results 1 to 25 of 226

Thread: CSS Reset

  1. #1
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post CSS Reset

    Here is my reset.css - Let me know what you guys think and what should be corrected.
    Code:
    /************************************************************************************************************************************************
    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;
    }
    Last edited by cooper.semantics; Aug 19, 2008 at 11:24.

  2. #2
    SitePoint Member
    Join Date
    Aug 2008
    Location
    Essex, UK
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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!

  4. #4
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ewwatson View Post
    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

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My personal opinion?
    Code:
    :1,$ d
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Everything else is in all good use though. You guys agree, if not state what is not needed.

  7. #7
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    My personal opinion?
    Code:
    :1,$ d
    hehe - What's your take. What would you remove from this?

  8. #8
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SimonAKQA View Post
    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

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    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.
    Birnam wood is come to Dunsinane

  10. #10
    SitePoint Member
    Join Date
    Jun 2008
    Location
    cincinnati
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  11. #11
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by orangesparkz View Post
    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.

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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.

  13. #13
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    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/
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  14. #14
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ewwatson View Post
    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.

  15. #15
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    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.

  16. #16
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    The reset has outline: 0; set to all specified elements. Not good for usability
    Hence why you define a ":focus" rule.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  17. #17
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    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.
    Last edited by PicnicTutorials; Aug 19, 2008 at 18:34.

  18. #18
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    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

  19. #19
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ewwatson View Post
    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

  20. #20
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    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.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  21. #21
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    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

  22. #22
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    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.

  23. #23
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    * { padding: 0; margin: 0}


  24. #24
    Non-Member
    Join Date
    Jul 2005
    Posts
    606
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  25. #25
    <code></code><WoW></WoW> nukeemusn's Avatar
    Join Date
    Apr 2006
    Location
    Honolulu, HI
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation

    << 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 Code:
    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&#37;;
        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*
    Last edited by nukeemusn; Aug 20, 2008 at 02:19. Reason: Own personal stupidity
    My Blog
    The Obsidian Order - WoW Guild on US-Nagrand
    nukeemusn = Nuclear Electricians Mate US Navy


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •