SitePoint Sponsor

User Tag List

Page 4 of 10 FirstFirst 12345678 ... LastLast
Results 76 to 100 of 226

Thread: CSS Reset

  1. #76
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Miami, FL
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I started trying to get used to using a reset stylesheet about a year ago (fairly short, only about 10 lines) and found myself still repeating things, so I figured I'd just stick to what I was used to. I can understand the appeal, but I certain things have become so second nature to me and I type so quickly I haven't bothered. Besides, I do a lot of slicing markup for clients and I don't want to complicate things for them.

    Anyway, your reset is nice and well put together, except it doesn't validate. Just from a quick visual scan of it I spot about 7 errors, one of which isn't really an error so much as its a CSS3 property (opacity), and, well, we all know how many browsers fully support it. I'm pretty adamant about validation.
    http://shownd.com - Your free online design portfolio.
    http://rehashclothes.com - Swap your clothes.
    http://orpheuxdesign.com - My design studio.

  2. #77
    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 realmadrid2727 View Post
    I started trying to get used to using a reset stylesheet about a year ago (fairly short, only about 10 lines) and found myself still repeating things, so I figured I'd just stick to what I was used to. I can understand the appeal, but I certain things have become so second nature to me and I type so quickly I haven't bothered. Besides, I do a lot of slicing markup for clients and I don't want to complicate things for them.

    Anyway, your reset is nice and well put together, except it doesn't validate. Just from a quick visual scan of it I spot about 7 errors, one of which isn't really an error so much as its a CSS3 property (opacity), and, well, we all know how many browsers fully support it. I'm pretty adamant about validation.
    Yeah that was my outdated version. Here is my latest version. Still a little bulky though- in the works.

    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 {
    	position: absolute;
    	overflow: hidden;
    	left: 0;
    	top: -999em;
    	width: 1px;
    	height: 1px;
    }
    
    hr { display: none; }
    
    ul, ol { list-style: none; }
    
    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; }
    
    /************************************************************************************************************************************************
    Form Elements
    ************************************************************************************************************************************************/
    label { cursor: pointer; }
    
    input, select, textarea { font: 100% arial, sans-serif; }
    textarea { overflow: auto; }
    
    /************************************************************************************************************************************************
    Table Elements
    ************************************************************************************************************************************************/
    caption, th { text-align: left; }
    th { font-weight: normal; }
    th, td { vertical-align: middle; }
    	
    /************************************************************************************************************************************************
    Clearing Fix
    ************************************************************************************************************************************************/
    .clear:after {
    	clear: both;
    	display: block;
    	content: ".";
    	visibility: hidden;
    	height: 1%;
    }
    .clear { 
    	*display: inline-block;
    	_height: 1%;
    }

  3. #78
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Miami, FL
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Everything looks valid with the exception of this:

    Code:
    .clear { 
    	*display: inline-block;
    	_height: 1%;
    }
    I can sort of tell what you're trying to do, but a method that'll pass validation would be:

    Code:
    /* For IE7 */
    *:first-child+html .clear {display: inline-block;}
    
    /* For IE6 */
    * html .clear {height: 1%;}
    Same functionality assuming the *display: inline-block; was meant only for IE7, in which case if it is meant for IE6 too just add that display: inline-block; to the IE6 conditional. Replace what you've got with that and your reset.css will validate.
    http://shownd.com - Your free online design portfolio.
    http://rehashclothes.com - Swap your clothes.
    http://orpheuxdesign.com - My design studio.

  4. #79
    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
    Norwegian != Swedish

    Quote Originally Posted by cooper.semantics View Post
    Tommy - This states what you said earlier:
    http://archivist.incutio.com/viewlist/css-discuss/69464
    So do you believe me now?
    Birnam wood is come to Dunsinane

  5. #80
    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
    Norwegian != Swedish



    So do you believe me now?

    haha - I know deep down you are always correct, kills me

    I wonder why so many ppl get confused and think there is a wild card for css...
    Could be a great article to clear the air

  6. #81
    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 realmadrid2727 View Post
    Everything looks valid with the exception of this:

    Code:
    .clear { 
    	*display: inline-block;
    	_height: 1%;
    }
    I can sort of tell what you're trying to do, but a method that'll pass validation would be:

    Code:
    /* For IE7 */
    *:first-child+html .clear {display: inline-block;}
    
    /* For IE6 */
    * html .clear {height: 1%;}
    Same functionality assuming the *display: inline-block; was meant only for IE7, in which case if it is meant for IE6 too just add that display: inline-block; to the IE6 conditional. Replace what you've got with that and your reset.css will validate.
    Cool. Yeah if you apply display: inline-block; to safari it gets rather quirky
    So you are correct for only applying this rule to ie7.

    Always remember, even though this hack validates its still a hack as conditionals are.

  7. #82
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Why do people call it a wildcard? Because that's what it's called when you talk about regexes, and while CSS's aren't exactly regexes, they act and look a lot alike. * isn't just one instance of something. It's zero to infinite numbers of anything, as many as you want or none. I don't think there's a ? in CSS (a single instance of thing, and not none) but there's a ^ (beginning) and a $ (end) and so I think it's perfectly logical for people to call these things by their regex names (whether it's wrong or not, eh).
    Quote Originally Posted by cooper
    Yes, but it's not the smartest solution to use the wild card to zero out all elements. There are more elegant solutions.
    I dunno, a simple character referring to everyone seems more elegant and less code to me. I don't use all the other stuff in your reset, which I find bulky and not taylored to the page (which is what I prefer, rather than a single reset I can apply to all pages). I want everyone who has no padding or margins set by me to be zero, and no images to have borders unless I tell them too... other than that, I pretty much make changes as I go along the page (depends on what's on the page).

    Quote Originally Posted by Dan
    I test all the way back to IE 5.01 and Safari 1.x - I have never seen that problem. Especially the way I code.
    I'd like to see one of your pages with this, Dan. I think I've found a problem with mine: when I merely hide the skiplink on the page, I can get both focuses to move to the destination (just using someone's ID) but when I position: absolute the skip link, I can only get the visual focus to move, and the input focus remains at the top of the page. I did way too much work trying to fix this by sticking things that could accept input focus (anchors) all over the page, hidden inside p's and h2's and whatnot, because otherwise only IE moved the input focus : (
    And I'm starting to think it's the absolute positioning making the browser not know where the link is in relation to the rest of the page. But I'm not sure.

    Quote Originally Posted by tommy
    Norwegian != Swedish
    Ah, the neverending fight. Like an indignant Canadian saying he's not American... the old Lake Wobegon joke is, in Minnesota, when a Swede marries a Norwegian it's considered an interracial marriage.

  8. #83
    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 Stomme poes View Post
    * isn't just one instance of something. It's zero to infinite numbers of anything, as many as you want or none.
    Not in CSS it isn't. The universal selector matches exactly one Element node (not a Text node, a CDATASection node, etc). It doesn't matter which element type the Element node has, but it has to be an Element.

    Code:
    body>* {Rule 1}
    body>*>ul {Rule 2}
    *.my-class {Rule 3}
    *#my-id {Rule 4}
    ul * li {Rule 5}
    * html {Rule 6}
    Rule 1 matches any element that is an immediate child of the body element.

    Rule 2 matches all unordered lists, except those that are an immediate child of the body element.

    Rule 3 matches any element that belongs to the class my-class. The universal selector is usually omitted in these cases.

    Rule 4 matches any element whose ID is my-id. The universal selector is usually omitted in these cases.

    Rule 5 matches list items in lists that are descendants of an unordered list (but not list items in the top-most list).

    Rule 6 doesn't match anything (except in IE6 and older).

    Quote Originally Posted by Stomme poes View Post
    Ah, the neverending fight. Like an indignant Canadian saying he's not American... the old Lake Wobegon joke is, in Minnesota, when a Swede marries a Norwegian it's considered an interracial marriage.
    Don't get me wrong. I love Norwegians!
    Birnam wood is come to Dunsinane

  9. #84
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can I just get confirmation on what people have said about not using the wildcard selector to set both margin and padding to 0.

    I build quite small sites (under 10 pages) at the moment as I'm just starting out. So from what people have said a CSS reset is probably a bit overkill and not needed.

    I've always used this bit of code at the top of my stylesheet on every site I've built:

    Code:
    * {
       margin: 0;
       padding: 0;
       }
    Now, correct me if I'm wrong but are you saying it's better to actually set the margin and padding on each selector in my stylesheet where it's needed?

    That way for example an element would have it's defaults unless I overode it with a margin or padding value.

    So in essence what I'm trying to ask is: wildcard... or on every element selector (that needs a change) in my stylesheet?

  10. #85
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Rabbit: it's overkill if you find yourself re-adding margins and padding on everything and what you are adding back is pretty close to what the browser defaults are. In my pages, * {margin: 0; padding: 0;} makes a huge difference, and when I code, I like to do it on the assumption that everyone's sitting at zero. I add padding and margin where I need it.

    It's also overkill in the way that many things just don't have any default margins or padding, and you're setting them to zero. But that doesn't give you any visible slowdown, so that's kindof a moot point.

    As Paul's link a few pages back (!) shows, though, if you have forms of any magnitude (not "search" but a full form), your padding will need to become one of those long, taylored resets, so as to exclude form controls. This reset would be either long or short depending on what html elements you're using on your site.

    Quote Originally Posted by tommy
    The universal selector matches exactly one Element node
    Then the * {stuff;] gets re-read for each and every element? That seems pretty inefficient. Better if it acted like the expression its symbol came from and matched all possible or no elements at once. But if it only matches a single element (like ? would) then the CSS sheet goes like this?
    * {
    margin: 0;
    padding: 0;
    }
    =
    Code:
    html {
      margin: 0;
      padding: 0;
    }
    body {
      margin: 0;
      padding: 0;
    }
    div {
      margin: 0;
      padding: 0;
    }
    etc?
    substituting the single element one at a time? That's what "matches only one element" would mean to me. I'm using it to match every (or none if they don't exist) element.

    That would certainly be a reason to rethink using the *, if it makes the browser do that much work.

  11. #86
    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 Stomme poes View Post
    Then the * {stuff;] gets re-read for each and every element? That seems pretty inefficient.
    The '*' selector matches every single Element node in the DOM tree. The rules in the block following this selector should be applied to every Element node, and then be overwritten for nodes that are matched by more specific selectors. It's possbile that browsers use some optimised algorithm to speed this up, I don't know.

    Quote Originally Posted by Stomme poes View Post
    That's what "matches only one element" would mean to me.
    A selector is a pattern, whether it's '*' or 'html>head+body.foo:first-letter'. The rule block after the selector is applied to any node the pattern matches (unless it's overwritten by another rule).

    Quote Originally Posted by Stomme poes View Post
    That would certainly be a reason to rethink using the *, if it makes the browser do that much work.
    Unless you have a very slow computer or a very large document, the effects are probably negligible.
    Birnam wood is come to Dunsinane

  12. #87
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This article should clear some things up:
    http://meyerweb.com/eric/thoughts/20...mal-weirdness/

  13. #88
    Non-Member
    Join Date
    Jan 2008
    Location
    Santa Barbara
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the reset code we are currently using:
    Code:
    /* ====================== */
    /* === CSS RESET CODE === */
    /* ====================== */
    *{margin:0;padding:0;}
    img,body,html,table,fieldset{border-width:0;}
    address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
    ol,ul,li{list-style:none;}
    caption,th{text-align:left;}
    h1,h2,h3,h4,h5,h6{font-size:100%;}
    q:before,q:after{content:'';}

  14. #89
    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
    Cool. Yeah if you apply display: inline-block; to safari it gets rather quirky
    So you are correct for only applying this rule to ie7.

    Always remember, even though this hack validates its still a hack as conditionals are.
    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

  15. #90
    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
    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
    This is what your saying:
    .clearfix {
    display: block;
    display: inline-block;
    }

    One always will overwrite the other. In this case the display: inline-block;

    Quote me if i am incorrect

  16. #91
    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 johnjreeve View Post
    Here is the reset code we are currently using:
    Code:
    /* ====================== */
    /* === CSS RESET CODE === */
    /* ====================== */
    *{margin:0;padding:0;}
    img,body,html,table,fieldset{border-width:0;}
    address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
    ol,ul,li{list-style:none;}
    caption,th{text-align:left;}
    h1,h2,h3,h4,h5,h6{font-size:100%;}
    q:before,q:after{content:'';}
    Looks good.
    Quick question. Why are you stripping the default bold/italics from strong and em?

    I know that these tags strongly emphasize(strong) and emphasize(em) content but why strip them of there default weight/style?

  17. #92
    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
    This is what your saying:
    .clearfix {
    display: block;
    display: inline-block;
    }

    One always will overwrite the other. In this case the display: inline-block;

    Quote me if i am incorrect
    I'm going to have too quote you. You obviously didn't read the link right? It talks about it in there. I only know as little as I do on this because I just had to learn all the in's and out's of this method before I put it in my demo.

    Normaly you would be correct - they would just overright each other. But not when it comes to "haslayout". IE gets layout from display inline-block and then that gets overridden by display block but IE keeps "haslyout". It's called the trip switch I believe - just google it. But the two rules also have to be seperated by another in order to work. So basically, the only things you can safely eliminate are the mac hack comments if you don't care about IE5 Mac.

  18. #93
    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'm going to have too quote you. You obviously didn't read the link right? It talks about it in there. I only know as little as I do on this because I just had to learn all the in's and out's of this method before I put it in my demo.

    Normaly you would be correct - they would just overright each other. But not when it comes to "haslayout". IE gets layout from display inline-block and then that gets overridden by display block but IE keeps "haslyout". It's called the trip switch I believe - just google it. But the two rules also have to be seperated by another in order to work. So basically, the only things you can safely eliminate are the mac hack comments if you don't care about IE5 Mac.
    Interesting - I did not know that, Thank you for informing everyone with the good information, I'm sure most people do not know this

  19. #94
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stomme poes - I ran across this site and this may pertain to your skip navigation issue you posted earlier.
    http://www.jimthatcher.com/skipnav.htm

  20. #95
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by cooper.semantics View Post
    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; }

    You can remove #content ul li {list-style-type:disc;} b/c it will be no longer necessary.
    thanks for the tip, that does actually make my life a lil easier

  21. #96
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by cooper
    Stomme poes - I ran across this site and this may pertain to your skip navigation issue you posted earlier.
    http://www.jimthatcher.com/skipnav.htm
    Thx
    Yeah I read that a while back and what that was was IE needing Haslayout to keep the focus on the relevant part of the page instead of going to the top.Jim originally wrapped his anchors in a table because he didn't know it was Haslayout, only that a table seemed to fix it.

    My problem was exactly opposite-- if the link was positioned absolutely, then while IE did everything correctly (and is the only browser to do so), all the modern browsers seemed to only move the visual focus but not the input focus-- they instead go to the top of the page (or the address bar). But I'm sure Dan checks for those so I'm curious how he gets around it without adding all those unneeded destination links (which is adding something which can take input focus).

  22. #97
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to bring such an old thread back but, this would be the most appropriate place to post this.

    Would this maybe be a better option?
    Also, if I have left out an element regarding margin/padding please let me know.

    Code:
    * { 
    	font-size: 100%;
    	vertical-align: baseline;
    }
    
    body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, form, fieldset { margin: 0; }
    ol, ul, fieldset, legend, caption, colgroup, td { padding: 0; }
    
    a img, fieldset { border: 0; }
    Instead of this:
    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,
    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;
    }

  23. #98
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Code:
    body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, form, fieldset { margin: 0; }
    ol, ul, fieldset, legend, caption, colgroup, td { padding: 0; }
    By separating the margin and padding properties you are making an assumption that those elements only have those properties defined. Browsers past or present may not agree. Although it may be the case in some browsers it is not always the case and that was the reason for the reset in the first place to catch these differences.

    Take the body element for example as Opera previously always used padding for the default space around the body. Your reset would miss older versions of opera and indeed any others that may not follow your example.

    The point of a reset is that you don't know when a browser may apply padding, margin or border hence the need to control them explicitly. IE applies a default border to the body and some other browsers don't.

    I agree the reset is a bit overkill but is an easy solution to a common problem. However most practical coders could just define the elements as they go because they are aware of these issues.

  24. #99
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    I use the reset however most (if not all) have to tweak the margins.

    Simply resetting the margins to 0 and padding to 0 simply isn't enough to get elements into place the way you want (even if it does help).

    All browsers add padding and margins to elements differently so that's why it's nearly impossible to get the EXACT same look in each browser. Normally there isn't such a big difference as to effect the look scheme.

    HTH.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  25. #100
    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 Paul O'B View Post
    Hi,

    Code:
    body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, form, fieldset { margin: 0; }
    ol, ul, fieldset, legend, caption, colgroup, td { padding: 0; }
    By separating the margin and padding properties you are making an assumption that those elements only have those properties defined. Browsers past or present may not agree. Although it may be the case in some browsers it is not always the case and that was the reason for the reset in the first place to catch these differences.

    Take the body element for example as Opera previously always used padding for the default space around the body. Your reset would miss older versions of opera and indeed any others that may not follow your example.

    The point of a reset is that you don't know when a browser may apply padding, margin or border hence the need to control them explicitly. IE applies a default border to the body and some other browsers don't.

    I agree the reset is a bit overkill but is an easy solution to a common problem. However most practical coders could just define the elements as they go because they are aware of these issues.
    @Paul O'B

    Thank you for your 'logical' explanation. I am convinced it is the best solution to use the latter of the methods(Eric Meyer's).

    My method is only tested in the popular browsers, as Eric's has been tested in all browsers that interpret css correctly


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
  •