SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Getting away from Global Reset

    So it has been brought to my attention by both DeathShadow and Stomme poes that using my Global Style Reset isn't such a great idea.
    Code:
    *{
    	margin: 0;
    	padding: 0;
    }
    I have read up some on this topic, but most of what I've seen online are these ginormous Style Resets which confuse me.

    Can someone here give my some practical advice on this topic?!

    Personally I'm very content with what I have been doing, however, since I am re-writing my entire website, now would be the time to fix things like this!!

    Thanks,


    Debbie

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    You don't actually need a reset at all, as you can simply set styles on each element as you come to it, so some people despise resets altogether—as you set a lot of styles (like zero margins) only to re-instate them later on. So it's a bit inefficient.

    However, I still find it nice to wipe the slate clean of the main browser defaults from the start (call me lazy), so I often just use something like this:

    Code:
    html, body,
    h1, h2, h3, h4, h5, h6, p, a, blockquote, img,
    form, fieldset, legend, label, textarea, 
    span, em, strong, sub, sup, cite,
    table, tbody, td, tfoot, th, thead, tr, tt,
    dl, dt, dd, ol, ul, li {
        margin: 0;
        padding: 0;
    }
    
    img {
        border: 0;
    }
    If there are elements I'm not likely to use, I'll remove them from that list.

  3. #3
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    The problem with using the universal selector on margins and paddings to remove these from all elements is that you can't add them back to some form elements in Mozilla (some versions of FF, anyway) and Opera, so using a global reset with *(margin:0; padding:0; ) is not a good idea unless you know that you won't be using forms anywhere on your site.

    Therefore it makes for good practice to do what Ralph suggested; reset only those styles you really need and leave the rest be.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Like Kohoutek said, The only serious issue was that it caused some form elements ( checkboxes & radio I believe) to lose padding you can't get back, so if you're just building regular content pages and don't have these elements I don't think there's anything wrong with the reset.

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    The problem with using the universal selector on margins and paddings to remove these from all elements is that you can't add them back to some form elements in Mozilla (some versions of FF, anyway) and Opera, so using a global reset with *(margin:0; padding:0; ) is not a good idea unless you know that you won't be using forms anywhere on your site.

    Therefore it makes for good practice to do what Ralph suggested; reset only those styles you really need and leave the rest be.
    I tested with the Global Reset "On" and "Off" and I saw no difference while using Input Boxes in FireFox 8.0.1, Safari 5.1.2, Chrome 15.0, and Opera 11.6

    (Stomme poes said that a Global Reset would screw up my Form Inputs and Submit Buttons, but from my testing I didn't see that...)


    Debbie

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I tested with the Global Reset "On" and "Off" and I saw no difference while using Input Boxes in FireFox 8.0.1, Safari 5.1.2, Chrome 15.0, and Opera 11.6

    (Stomme poes said that a Global Reset would screw up my Form Inputs and Submit Buttons, but from my testing I didn't see that...)


    Debbie
    How about something like this...
    Code:
    html, body, 
    h1, h2, h3, h4, h5, h6, p,
    div, span, blockquote, pre,
    a, abbr, acronym, address, big, cite,
    del, em, img, ins, q,
    small, strike, strong, sub, sup,
    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-family: inherit;
    	vertical-align: baseline;
    }		/**/
    /*	font-size: 100%;*/

    When I tried it, it didn't break my Home Page.

    Maybe you are all right in that it is still more overhead than I need, but some people swear by them...


    Debbie

  7. #7
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,053
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    On a scale of 1 – 10 the things you always seem to get caught up on are a 1… maybe a 2. deathshadow60 posted a good recent a couple months ago… just use that and stop wasting time on these relatively small things. Man… if you working in the industry you would be making about a dollar an hour in regards to how much you concern yourself with micro issues.
    The only code I hate more than my own is everyone else's.

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    form elements in Mozilla (some versions of FF, anyway) and Opera
    You mean FF and IE -- or more specifically that FF and IE have paddings on form elements you have no control over in ADDITION to the properties we use.

    There's ABSOLUTELY NOTHING wrong with how Opera handles form elements because they *SHOCK* treat them EXACTLY as if they were inline-block. (what a crazy concept!!!)... apart from the fact that nobody else has the common sense to treat them that way; what with IE's 'extra' em padding, ignoring height while obeying line-height, FF's 'extra' px padding ignoring line-height while obeying height... and don't even get me STARTED about the absolute DISASTER that are form elements in Webkit.

    ... and when I say 'extra' padding, I'm referring to it not having ANYTHING to do with what you set the padding attribute to... though that's also why you want to leave padding on said elements alone -- since every browser accepts that padding differently changing the total size.

    As to the question at hand, as already stated there's problems with the "universal reset" because of what it does to form elements -- AND many of the larger resets out there aren't even resets, they're layout frameworks; see Meyer's massively bloated and pointless "reset reloaded"

    Which is why I use this:
    Code:
    /* null margins and padding to give good cross-browser baseline */
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    }
    
    img,fieldset {
    	border:none;
    }
    Resetting just the elements that NEED to be reset, and doing so in less than a quarter of a K... Usually ends up less code than constantly having to say it on every one of those elements when I use them, and failing to use a reset usually just results in a layout that's broken somewhere on some browser...

    Oh and Debs, you said using the reset didn't change your form element sizes? Did you notice they were different sizes in EVERY browser using the universal reset because, well... they are... massively so. (Opera in particular will give you the smallest of them as so far as they're concerned inputs are inline-block elements)

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    On a scale of 1 – 10 the things you always seem to get caught up on are a 1… maybe a 2. deathshadow60 posted a good recent a couple months ago… just use that and stop wasting time on these relatively small things. Man… if you working in the industry you would be making about a dollar an hour in regards to how much you concern yourself with micro issues.
    Ya think?

    Yes, I am a perfectionist. And, yes, I have been known to be a victim of "Analysis Paralysis", but then again...

    I *do* work in the IT industry, and guess what?!

    Currently I'm on a multi-miilion-dollar project that is about to go belly-up. Why? Because no one wanted to take the time to actually plan and think things out. And no one wanted to ask "What are the consequences if we choose A or B?"

    The reason I take the time that I do and ask the pain-staking questions that I often do, is because I have spent nearly the last 20 years working in the Business and IT worlds, and for *my* website and *my* company I don't want to put together a heaping pile that never gets off the ground.

    ----

    In the world of HTML/CSS, seemingly "little" things like coming up with a good CSS Reset, or designing a solid Page Layout or a Templating System go a LONG WAY once you get into a 500 page website with dynamic content.

    "Measure twice... Cut once"


    Debbie

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Which is why I use this ...
    Just out of interest, why is div included? Do any browsers set margin/padding on a div?

  11. #11
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,053
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by DoubleDee
    The reason I take the time that I do and ask the pain-staking questions that I often do, is because I have spent nearly the last 20 years working in the Business and IT worlds, and for *my* website and *my* company I don't want to put together a heaping pile that never gets off the ground.
    Fair enough but that hasn't stopped google, yahoo, facebook, twitter, new york times and countless other businesses regardless of poor code quality. In the end it all comes down marketing and how well you can sell it. It doesn't matter if your site is deathshadow60 approved or whatever. A great sales and marketing strategy surpasses code quality in terms audience any day. Just look at wordpress. Wordpress is a steaming pile of crap in terms of quality but easily the most popular blogging platform and I throw up a little in my mouth when I say this CMS around. It is hard to argue when thousands if not millions of sites run on wordpress.
    The only code I hate more than my own is everyone else's.

  12. #12
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Deathshadow, no I mean Opera. At least it was an issue sometime ago. Paul wrote an article about this and Opera did have its woes as well. It may be obsolete now, however. I haven't tested it.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  13. #13
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    Deathshadow, no I mean Opera.
    Ok, the minor issue with SELECT... I use select so infrequently it wouldn't come up in the first place. (I really consider select annoying in most cases people use it).

    Which has nothing to do with INPUT... but yes, that is a form element with cross-browser issues even if you don't set the padding... IN ALL browsers SELECT sucks.

  14. #14
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Just out of interest, why is div included? Do any browsers set margin/padding on a div?
    I think it was Blazer or iCab (don't quote me on that)... one of those was putting the same margin on it as a paragraph. Been a good six years since Dan and I sat down to figure out what parts of a reset we needed, and what ones were pointless... We knew a reset would be less code the way we were building CSS... we knew the universal reset had too many problems... and what was out there at the time (like reset reloaded) were NOT resets, they were frameworks... we tested like 20 or so browsers back then to come up with just enough of a reset to make the browsers behave, and no more.

    Of course, iCab is now webkit based so... Well, unless you need it for MacOS 9/earlier.

  15. #15
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Ok, the minor issue with SELECT... I use select so infrequently it wouldn't come up in the first place. (I really consider select annoying in most cases people use it).

    Which has nothing to do with INPUT... but yes, that is a form element with cross-browser issues even if you don't set the padding... IN ALL browsers SELECT sucks.
    I never said it did.

    I've given up trying to make form elements behave identical in all browsers. It just isn't worth it.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  16. #16
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    I've given up trying to make form elements behave identical in all browsers. It just isn't worth it.
    Agreed. It's why as a rule of thumb I leave them alone on padding and height, only setting widths as needed... and being ready for no two browsers to interpret the meaning of width the same way (typically allocating 5-10% room for growth)

  17. #17
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Pardon the slow response. Battling the "Cold from Hell"!!


    Quote Originally Posted by deathshadow60 View Post
    As to the question at hand, as already stated there's problems with the "universal reset" because of what it does to form elements -- AND many of the larger resets out there aren't even resets, they're layout frameworks; see Meyer's massively bloated and pointless "reset reloaded"
    I will agree that I think Meyer's re-set is pointless. (Anyone who has a re-set on "Applets" should be ignored...)


    Which is why I use this:
    Code:
    /* null margins and padding to give good cross-browser baseline */
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    }
    
    img,fieldset {
    	border:none;
    }
    Resetting just the elements that NEED to be reset, and doing so in less than a quarter of a K... Usually ends up less code than constantly having to say it on every one of those elements when I use them, and failing to use a reset usually just results in a layout that's broken somewhere on some browser...
    I tried your code above and it didn't break anything.

    Think I'll adopt it, since it is even simplier than my attempt of whittling down Meyer's re-set.



    Oh and Debs, you said using the reset didn't change your form element sizes? Did you notice they were different sizes in EVERY browser using the universal reset because, well... they are... massively so. (Opera in particular will give you the smallest of them as so far as they're concerned inputs are inline-block elements)
    Not sure I follow you.

    I ran my Home Page with the Universal Reset on and then off for FireFox, Safari, Opera, and Chrome.

    When I compared how any apparent internal padding looked on the same Input box, I saw no differences within a given browser with the Universal Reset "On" or "Off". Leading me to believe that the Universal Reset does NOT screw up the padding on Form Controls.

    Maybe I missed something, but that is what I saw.

    Nonetheless, I like your streamlined Reset, DeathShadow, and since it didn't break my Home Page, I plan to make it my NEW Reset!

    Thanks,


    Debbie

  18. #18
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Quote Originally Posted by oddz View Post
    Fair enough but that hasn't stopped google, yahoo, facebook, twitter, new york times and countless other businesses regardless of poor code quality. In the end it all comes down marketing and how well you can sell it. It doesn't matter if your site is deathshadow60 approved or whatever. A great sales and marketing strategy surpasses code quality in terms audience any day. Just look at wordpress. Wordpress is a steaming pile of crap in terms of quality but easily the most popular blogging platform and I throw up a little in my mouth when I say this CMS around. It is hard to argue when thousands if not millions of sites run on wordpress.
    I never said that "crap" didn't sell to the masses. I did say that it is important for me to code a website that would make the SitePoint Gurus proud!

    Do I take longer than I should? Maybe.

    But I am learning the *right* way to do things, and I am laying a foundation that will speed development and ease maintenance down the road. PLUS, I'll have the satisfaction of actually knowing what in the hell I am doing which is more than the SharePoint Developers that we are paying $125/hour at work...


    Debbie

  19. #19
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    try this quick demo:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    
    </style>
    
    <title>
    	input size test
    </title>
    
    </head><body>
    
    <form action="#" method="post">
    	<fieldset>
    		<legend>Test Inputs</legend>
    		<input type="text" /><br />
    		<select>
    			<option>Test 1</option>
    			<option>Test 1</option>
    			<option>Test 1</option>
    		</select><br />
    	</fieldset>
    </form>
    
    
    </body></html>
    and check the sizes across all browsers.

    Opera:
    Input: 160x22
    Select: 64x24

    FF:
    Input: 171x22
    Select: 69x22

    IE:
    Input: 151x19
    Select: 62x19

    Now delete the universal reset, and you get:

    Opera:
    Input: 162x24
    Select: 65x24

    FF:
    Input: 175x26
    Select: 75x24

    IE9:
    Input: 183x25
    Select: 69x22

    Radically different sizes in all browsers, but notice how much IE shrinks in size with the reset compared to without -- or even compared to Opera which USUALLY has them smallest with padding zero'd. It sucks either way, but it sucks more with the reset nabbing those form elements.

    Of course if your layout is designed to handle form elements changing size as much as 28% (19..26 on INPUT?) you might not notice that reset off FF is 28% larger than universal reset + IE.

  20. #20
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    DeathShadow,

    Good to know, but your numbers basically back up what I was saying earlier...

    Visually in the non-IE browsers, there isn't much of a jump - for a given browser - on Input Boxes that have the Global Reset "on" versus "off". (Just a few pixels.)

    If you include Selects and Internet Explorer, there is obviously a larger difference.

    Nonetheless, I have decided to adopt your CSS Reset, so that should take care of things.

    Thanks,


    Debbie

  21. #21
    Non-Member
    Join Date
    Sep 2007
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to everyone in here for the information posted, it helped me as well. I was still using the global reset thinking it was a smart thing haha Thanks again guys and gals


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
  •