meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

The original CSS1 specification is a very terse document-- which is another way of saying that it's really short on examples. This sort of thing almost inevitably leads to ambiguity, misunderstandings, and mistakes in interpretation. Some of these mistakes aren't caught right away, and start to circulate among designers (not to mention browser vendors) as "communal truth"-- after all, everyone knows they're the truth, so they must be true. Well, this month I'm going to take some time to debunk a few common myths about CSS1.

Background Tiling Goes Further Than You Think


Figure 1


Figure 2

We're all familiar with background tiling: in the old days, if you specified a background on the BODY tag, it would be infinitely repeated in both the horizontal and vertical directions, starting in the upper left corner of the document. In CSS1, this is replaced by background-image and background-repeat (or the shorthand property background).

So far so good; if you want to tile an image like in the old days, you just specify a background image for the BODY tag, and then set background-repeat: repeat;. All is well. But wait! In CSS1, you can change the position of the background start, using background-position. Now, instead of the background image always being tiled from the upper left corner, you could start it in the center, something like this:

background: url(bg1.gif) center repeat;

Okay, so this will start the background with an image is the exact center of the document, and repeat it down and to the right. Right?

Wrong. According the CSS1 specification (and the very slightly more verbose CSS2 specification), the background is tiled in all directions, including up and to the left. Figure 1 shows a diagram of how this should work. Similarly, if the repeat is set to repeat-x, there should be a stripe running horizontally across the middle of the document, from the right side to the left.

So what good does background-position do us? It specifies the position of the origin image, which is the basis for the rest of the background. If you like, it's the kernel around which the rest of the background grows. Figure 2 shows the difference between a fully tiled background with its origin image in the upper-left corner, and one with the origin image in the center; in each image, the origin image is marked with a white circle for purposes of clarity. Note the difference in the background along the edges of the element.

Of course, that's all in theory. In the real world, both Explorer 4 and Navigator 4 tile down and to the right, not in all possible directions; whether these browsers are fixed in their v5 incarnations remains to be seen. Meanwhile, the current beta version of Opera is rumored to handle tiling correctly.

Invisible Borders Are Skinnier Than You Think

Okay, let's assume that you are using the border properties in your document. You decide that you want to use borders to put thick lines around your images, so you declare IMG {border: 10px solid black;}. This is fine for a while, but you then you decide to change the background to a tiled image. Suddenly, the black borders don't look so good.

No problem, you think, I'll just change the border rules like this: IMG {border: 10px solid none;}. That'll make the border transparent, preserve the ten-pixel spacing, and be good enough for my purposes.

Then you load the page up in Explorer 4, and discover that your borders have effectively gone to a width of zero-- it's like they aren't even there any more! So you check the page in Navigator 4, and there's the effect you wanted. Every image has at least ten pixels of blank space around it.

Before you start swearing at the Evil Empire of Redmond, I'll break the news: Navigator gets it wrong in this case. If a border has been set to have a style of none, its width is automatically set to zero. Although this may not be obvious from the CSS1 specification, the authors of the specification have confirmed that this is the correct behavior.

You may at this point be wondering who had this particular brain drizzle. Actually, it makes a whole lot of sense. How? Let's say that you have a drinking glass. For our purposes, the only two properties of the glass are the type of liquid it contains, and the depth of that liquid. If you want to describe a half-full (or half-empty, if you prefer) glass of water, you might write the following:

glass {liquid: water; depth: 50%;}

...which makes perfect sense, right? Okay, then how about this:

glass {liquid: none; depth: 50%;}

Sure, you can say that the glass is half-full of nothing-- shades of Sartre-- but does that mean that there's something in the bottom half of the glass? Does that nothing have depth? Of course not. Therefore, even though the rule says the glass is half-full, it isn't-- the depth is, in fact, zero. The same reasoning holds true for borders around elements. If you set the style so that there is no border, then the border ceases to exist, and thus has an effective width of zero. If you want to put blank space around your images, try the margin properties instead.

Be Careful With Your Digits

The final myth this month concerns the use of numbers in class and ID names. Try specifying a rule with this sort of selector:

P {text-indent: 3em;
P.1st {text-indent: 0; font-weight: bold;}
[...]
<P class="1st">
 This is the first paragraph in its section...</P>

Okay, load that up in both Explorer 4 and Navigator 4. In Explorer, the paragraph will have no first-line indentation, and be shown in boldface. In Navigator... nothing. Just plain text, with the first line indented 3em, just like every other unclassed paragraph.

This time, though, you can go ahead and indulge in everyone's favorite pasttime; that is, griping about Microsoft. That's right, Navigator is right about this one, because in CSS1, class and ID names may not begin with a digit. Since invalid selectors cause rules to be ignored, Navigator correctly acts as though the rule doesn't exist.

Under CSS2, on the other hand, selectors can start with digits, under certain circumstance, so Explorer sort of gets away with a technicality, even though it was released before CSS2 had been finalized.

Surprised? Don't Feel Bad

I realize that many of my readers will be surprised by some of the things I've written in this article. Well, don't let it get you down. One of the reasons I know so much about these myths is that, at one time or another, I believed every single one of them. Convincing me I was wrong took, in at least one case, e-mail from one of the authors of the specification before I would believe it. What can I say? I know I've been dubbed a "CSS guru" by my editors, but, well, even gurus need enlightenment from time to time.

If you've spotted some common errors by authors, or are wondering about the correct behavior of CSS1, please write me and let me know what's bugging you. I'm always happy to write about what you want to know, and I'll always try to get back to you. See you next time!

Identity Archipelago

Projects Elsewhere

Redesign Watch

archive

Extras