SuperSatellite ||

If there is one common truth in web design, it’s that the creation of CSS (Cascading Style Sheets) was a great (and much needed) development that has been butchered in the end by the browser industry. Time and time again we are forced to deal with the inconsistencies that are surfaced when you view layouts in different browsers. One browser renders space above an <h1> differently, another spaces elements of a <form> as if padding were free money. It’s frustrating. It’s irritating. It’s time consuming. And in many cases, the issues can be worked out, but only after tweaking any number of attributes. One would assume the best solution would be an industry standard default rendering scheme. Go ahead and keep reading once you’re done laughing.

There are a number of solutions that web developers use to get around these differences. Most of these involve coding two style sheets that can be selected based on the user’s browser (keep in mind, I am discussing legitmate difference in element positioning, and not the need for certain types of hacks to trick Internet Explorer into rendering an element how it should, although those can be included in a separately coded CSS file as well). That cures the symptom, not the problem. The other involves specifically defining all an elements parameters (or at least the offending ones) as problems occur, a sort of process akin to putting out fires. This is much closer to being on the right road to a solution.

The differences between browsers can prove challenging in even the absolute most basic layouts. Take the two screenshots below, for example. Nothing fancy is being done here, just a little text with a couple headings, and a no-nonsense form tossed in for good measure (and to really screw with things). Overlaying the two renderings brings out just how much difference a little change can make over the course of a page. In the composite, red is Firefox, and blue is Internet Explorer.

In a lot of ways, I am nitpicking here. This is nothing new, and is an issue designers have dealt with for years. It’s no new thing that browser developers have had to choose how much of a margin to put around element X when they write their rendering engine. And most layouts are fluid enough that a little difference in spacing, especially in body text, isn’t going to be even a remote issue. But, for the first time, we actually have some power over this. With CSS, we can force certain behaviors. Or, more specifically, we can force no behaviors.

When you write a spot of CSS, let’s say:

…you are telling the browser exactly how much space to give your heading above and to the left (but leaving yourself open to browser defaults on the bottom and right). Many designers generally do this on demand, as needed for elements as they produce a template. It stands to reason you could set these all to 0, and have nothing to begin with. At this point, I am sure you see where I am going with this. And the primary reason no one writes a zeroed out style sheet to begin with is the amount of work involved, and the risk of missing something. But at some point, we have all sat down and thought about this idea. And luckily, there are programmers out there with more time than us. Yahoo is one that has been kind enough to release a prewritten reset CSS, that zeroes out everything on a document, allowing you to specify each element from scratch.

To include Yahoo’s default CSS, use this link:

Doing so to my test page produces the following composite. “But wait,” you say. “It’s still off!” And yes, you would be right. There is still a tiny amount of built in browser inconsistency that cannot be overridden. In this case it is about 1 pixel worth of height per line, which stacks up, throwing things off further as you go down. But notice the lack of horizontal difference. And as I said before, most all templates are designed to be flexible enough that hopefully that tiny pixel can be absorbed with no ill effects. Elements line up nearly identically now. You can also view Yahoo’s example page for yourself, as well as one done by Rik Lomas from rikrikrik.com. Again, in this composite, red is Firefox, and blue is Internet Explorer.

With that done, you can now build your template’s style sheet on top of the reset, pulling out elements and defining them as you build it, with the assurance that things will render the same. Granted, this does mean you need to address all the elements. In the screenshot above, you’ll notice that the reset CSS removes all formatting, so <h1> will look just like <p> and <strong> will look like <em> and everything will have 0 padding and 0 margins. So if you build everything and forget to define <h2>, when you go to use it one day down the road you’ll notice it looks very…plain. It is work, but it has a high degree of value, especially when you start laying out more complex things like forms, which are notorious about their spacing issues in different browsers (it’s all right for you to hate IE6, don’t worry, we all do).

Below, you can see Yahoo’s reset CSS code. I have included their copyright information in the code, which I recommend you should as well if you intend to use their CSS as the basis for yours. Give credit where it’s due.

That’s all there is to it! Simple no? This also can give you an idea of just how many elements have the potential to vary between browsers, so it warrants a few minutes of your time to just check things out, and make sure everything looks the way you’d like it to. Yahoo has also released two additional reset type tools for fonts and grid elements. Worth looking at if you have a lot of concern about such things in your layout.