SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    when beggining a CSS page us this code?

    I have seen this used sometimes and other times not. Should this be used all the time to begin a CSS page?

    Code:
    body, ol, li, h2, h3, p { margin : 0; padding : 0; }
    Also should you preview in Firefox and get it looking right and then later on make fixes for IE?

  2. #2
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have it exactly right. That CSS is used to reset all the different built-in browser stylesheets for the specified elements so that you have a 'clean state' to work from. A more efficient and effective rule, would be :-

    Code:
    * {
    padding:0;
    margin:0;
    }
    which by using the the specified selector, resets EVERY elements margin and padding to 0;

    Yes, a good way to preview your page would be to view it in a browser that is deemed one of the most standards compliant (at the moment, thats FF), and THEN look in IE to see whats going on and whether you need to apply any IE-specifc workarounds

  3. #3
    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)
    I typically use the global reset above, though it should always be mentioned that there are some adverse effects on form elements when using the above method in some browsers that can't be rectified.

    Many choose a method similar to this instead for this reason,
    http://meyerweb.com/eric/thoughts/20...eset-reloaded/

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by keano View Post
    Also should you preview in Firefox and get it looking right and then later on make fixes for IE?
    I always preview in both (especially IE6) during the site development - that way you can catch problems as they occur. Waiting until the page is finished before checking in IE will be a lot more work...

  5. #5
    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)
    I always preview in both (especially IE6) during the site development - that way you can catch problems as they occur. Waiting until the page is finished before checking in IE will be a lot more work...
    Hmm, I have always started and finished my CSS work using firefox, then when completed tested in IE, and other browsers and applied fixes.

    When I was starting out it took a while to find the fixes but you begin to learn the differences and just code IE's quirks out as you go. Things like always applying a width is a good way to fix many IE bugs, and the FAQ on hasLayout is fantastic for understanding how to get rid of nearly all of them.

  6. #6
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I thought
    Code:
    * {
    padding:0;
    margin:0;
    }
    would do it but I saw a book called Transcending CSS and he used foolowing:

    Code:
    /* Normalizes margin, padding */
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td 
    { margin : 0; padding : 0; }
    
    /* Normalizes font-size for headers */
    h1,h2,h3,h4,h5,h6 { font-size : 100%; }
    
    /* Removes list-style from lists */
    ol,ul { list-style : none; }
    
    /* Normalizes font-style and font-weight to normal */
    address, caption, cite, code, dfn, em, strong, th, var
    { font-style : normal; font-weight : normal; }
    
    /* Removes list-style from lists */
    table { border-collapse : collapse; border-spacing : 0; }
    
    /* Removes border from fieldset and img */
    fieldset,img { border : 0; }
    
    /* Left-aligns text in caption and th */
    caption,th { text-align : left; }
    
    /* Removes quotation marks from q */
    q:before, q:after { content :''; }
    
    
    /* layout.css */
    
    html 	{ text-align : center;  }

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It kinda does the same thing, but the problem with that approach is that it touches the form controls - some browsers will not let you re-apply margins or padding to form controls once they've been zero'd out, so I don't touch them.

    Here's what I do instead:

    Code:
    html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
    dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
    a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
    strong, sub, sup, textarea, tt, var {
    	margin: 0;
    	padding: 0;
    }
    And just so you know, you should test in IE 6, IE 7, Firefox, Opera and Safari at the same time as you go along (if you add a section to your HTML and/or CSS, stop, validate your code, then check in those four browsers (ok, five if you go by instances of those browsers) for any rendering problems. Lather, rinse, repeat.

    And yes, I zero'd out the margins and padding on inline elements as well for a reason - I don't want to leave anything to chance (except for form controls since i really don't have a choice there).


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
  •