Beast-Blog.com
The Power of Zero

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.

Filed under Coding & Markup, Do It CSS Style —

Bookmarking Links » del.icio.us | Digg | blogmarks | StumbleUpon | Technorati |

These posts may be related:

Accessible Web Developers on Facebook »

How to Write Content for the Web »

Accessites.org Launches »