The Power of Zero

Posted May 25th, 2007 by Mike Cherim

Different elements are given different initial or default layout values as ascribed by various browser rendering engines. One element may have a natural padding value of 10px in one browser, for example, while another browser may give it 15px. And in these cases, the padding may cause different renderings of the same element. What this boils down to is that the default styling of an unstyled page will look one way in one browser, yet, while close, it may be different in another browser.

Dealing with Styles

As you know, especially if you make web sites using Cascading Style Sheets (CSS), these differences present challenges. You know what it’s like… you get something looking perfect, down to the pixel, in one browser, only to learn it looks funky in another. This is something, of course, that forces us to negotiate the content based on the browser, or add some hacks.

Personally I try to avoid using hacks or browser-based style sheets if I can. If I’m going to spend time making style sheets I’d rather make ‘em for alternative media like handhelds or printers, instead of spending my time making a file for Firefox (FF), another for Internet Explorer (IE), etc. Take this blog for example. I offer three style sheets. One for screen, one for handhelds, and one for printers. (I’d also offer an aural style sheet, but support is so spotty it’s probably not worth the trouble.) What I don’t offer is additional browser-targeted styles. I don’t need them. In fact I don’t use any hacks either. Nothing like that. I found it wasn’t necessary for this straightforward. But what’s the secret?

Zero is your friend

My secret, if you will, is to embrace the common ground to get all browsers on the same page so to speak. So what do all CSS-supporting browsers have in common? What unit of measure is constant regardless of browser or even use settings? What makes whitespace behave? If you said zero, you got it right. Zero in FF is the same as zero in IE. From there you can offer measurements that, if employed carefully, will offer the same rendering regardless of the user agent used to render the page.

Let’s say you have an unordered list. Without styles it’ll have a margin to the left — which may be a variable. Making the margin zero will wipe the slate clean. From there the margin can be reset to specific value and you gain better control of the final result. Same goes with padding. And this applies to all sorts of elements, not just lists. Headings, paragraphs, blockquotes, etc.

I try to make most of my designs less specific — not pixel-perfect — so I don’t have to fuss with this stuff, but I can’t do this all the time. Some of my designs have to be pixel perfect, especially if I’m matching and sharing backgrounds. In such cases the universal selector has to be employed (as it is here) and the zero value applied to the margin and padding of everything. Like this:

 * {
   margin : 0;
   padding : 0;
 }

Not reinventing the wheel

I’m not offering anything new here. Lots of people do this for the same reason I do. It helps eliminate some aggravation at times. In fact, some developers have taken this a step further by offering a style sheet with reset values. They do this by making the works zero to bring all the variables together, then reset the common values. Eric Meyers, for one, offers some insights in this task. Roger Johansson also offers some insights here as it pertains to form styling.

I had written about this before, but it’s an older posts I made called “All Browsers Agree” and I felt it needed to be re-worked. It was written a long while ago and figured I could do a better job with it this time around. Hopefully I succeeded.


8 Responses to: “The Power of Zero”

  1. The Power of Zero | Talk Utopia responds:
    Posted: May 25th, 2007 at 11:09 am

    […] Original post by Mike Cherim Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages. […]

  2. TzYourFriend responds:
    Posted: May 25th, 2007 at 3:24 pm

    If you’ve been designing with stylesheets any length of time at all, you’ll discover UA - User Agent styling variance is something that just needs to be eliminated. The link I’ve always referred to for this is at leftjustified:
    http://leftjustified.net/journal/2004/10/19/global-ws-reset/
    By zeroing the elements and then applying a consistent set of margins, etc. you’ll have much better luck, and have to do much less debugging for the various browsers regarding layout spacing.
    I’ld love to see what anybody else is using, if they have another set of rules compared to those at left justified or these:
    1. * {
    2. padding:0;
    3. margin:0;
    4. }
    5. h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 5%; }
    6. li, dd { margin-left:5%; }
    7. fieldset { padding: .5em; }
    —————————————–
    I’ld also like to know why some CSS editors automatically take all those neatly shorthanded properties and reformat them individual tag properties, that’s a pet peeve there.
    rambling sorry :)

  3. Jermayn Parker responds:
    Posted: May 25th, 2007 at 9:01 pm

    Yeah while I agree with you Mike and follow it myself, sometimes you do get a design were you have to add the odd IE only setting in the CSS.

  4. John Faulds responds:
    Posted: May 25th, 2007 at 11:36 pm

    This link to another article on Eric Meyer’s site (also in the article you’ve linked to from Roger’s) probably provides the best set of reasons for not using * { margin: 0; padding: 0 }.

    Until recently I’d been using the global reset myself and must admit I’d never come across any particular ‘weirdness’ when styling forms, but I think the reasons Eric and others give are quite compelling so I’ve been using an imported reset stylesheet similar to Eric’s more recently.

  5. Tommy Olsson responds:
    Posted: May 28th, 2007 at 1:34 am

    If you need margins and padding to be pixel perfect for certain elements, then you should set them explicitly. But I’ve never found it necessary to zero-out everything. I also wonder what performance penalty, if any, using the universal selector will incur.

  6. Andreas responds:
    Posted: May 28th, 2007 at 6:24 am

    I agree with Tommy, never really seen a need to reset everything.
    I normally just “reset” the most common block-level elements such as ul, ol, p, h1-h6, form, etc.
    I only use divs for layout and I’ve never come across a browser that adds padding _or_ margin to a div by default, so I rarely have problems aligning backgrounds and such cross browser.

  7. Tommy Olsson responds:
    Posted: May 28th, 2007 at 7:09 am

    It will probably be negligible in most cases, but on a large page with thousands of element nodes it might not be. Especially on low-end hardware.

Sorry. Comments are closed.




Note: This is the end of the usable page. The image(s) below are preloaded for performance only.