In taking a break from discussing such Earth-shatteringly relevant subjects as my Obsessive-Compulsive tendencies or Spanish slang, I’ve decided to get some CSS goodness out of the way.

From time to time I get emails asking questions about this or that detail of the site’s design, or CSS in general. I know first hand how difficult it can be to coerce most browsers out there into rendering a consistent layout, so I’ll try to share my experience with the nightmare that is cross-browser CSS. Hopefully this will be useful to someone.

There’s a little trick I like and that is somewhat counter intuitive. I stumbled upon it when making categories for the links page.

The unruly ruler

You know those little separator things that you can find in the Index or page headings of some books? The ones that look like someone screwed up with the title alignment and then made a half assed attempt at fixing it by adding a segmented line next to it? I love those things. So I set out to fabricate my own. Here’s what we’re aiming for, taken straight from the Game Over book¹:

Being freshly thrown into the fantastic world of CSS based design, I figured it’d be a snap to set up the little bugger.

I was all kinds of wrong.

The obvious, semantically correct way to go about making one of these would be to use an <hr> (Horizontal Ruler) tag, align it to the left and put some text over to its right. In a perfect world, we might even get away with it. But alas, it was not meant to be. The <hr> cross-browser styling support is flaky at best, as exemplified in this writeup. Not only does the element not support consistent border/background properties; it also floats all over the place in logic-defying mockery. I quickly abandoned that approach.

After considering the options, I settled for a block element with only the top border visible, floated besides a title. Now, we want this to be as semantically correct as possible, so we’ll encase the whole thing in an <h3> heading (<h1> is the image header on top of the page, <h2> is the one used for the blog entry dates and such). We also want to be able to specify different margin properties for the containing header and the title, so it’s a good idea to put the title in its own blockable element. Thus, we get the following markup:

We’ll use the <span> elements as our blocks (we could use divs, but that’s somewhat less elegant). Notice that the first one belongs to the ruler class. Far from some subtle subversive political commentary, this is done so we can style it and set it apart from the one that contains the title. The id is there so we can use this heading with an anchor². We’ll start the styling with the following:

This yields the following:

Hello World

Not quite there yet. The block element spec adds a linebreak at the end of each block, and when created they assume the maximum available width, so we need to float the ruler. After adding float: left; we get:

Hello World

Which is ghastly. The ruler span, being an empty element and now floated to the left, has collapsed into oblivion. It’s still there, mind you, but doesn’t have any noticeable width to speak of. So we add width:50%; to the ruler to pull it from under there.

Hello World

Now we’re talking! For some correctness, we’ll move the ruler further down. We could do this by using a pixel measurement, but that would be too easy, wouldn’t it? Pixels, although exact, are not resizable in IE with the text size increment tool, and our ruler would fall short of the vertical center when this happened, so we’ll go with em’s. Em’s are resizable in IE (the white whale to our Web Developer Ahab).

The Em’s approach presents another problem: due to differences in the box model implementation, IE’s rendition of n em’s is a few pixels off (remember the comment about my obsessive compulsive tendencies?). What we do is take advantage of IE’s shortcomings: we’ll specify the margin twice. Once for the browsers who do get the standard right, and the other one for the different flavours of IE:

That !important tells compliant browsers that the rule should take precedence over other rules for the same property, regardless of position. IE doesn’t get this and thus ends up with the rule specified further down (order is extremely important when working with CSS). In this case the difference is minimal (.05 em) but when I did this for the links pages, the actual difference was .2 em (that’s rather big). It’s an interesting hack, so I’ll leave it here. Finally, this yields:

Hello World

TA-DAH!!! Now that wasn’t so painful, was it? Here’s the full code for copy/pasting:

The width of the ruler can be changed by fiddling with the width value in the ruler class. The properties for the two <span>’s don’t mix up because the first one uses a more specific selector (notice the span.ruler bit).

This technique works for IE 5.0, 5.5, 6, Gecko-based browsers (Moz/Firebird), Safari, Opera, and degrades gracefully for Lynx/text based browsers (the text is enclosed in a header next to an empty span after all, so there’s not much to interfere). Hope you liked it.

_______

¹ Full Title: “Game Over — Press Start to continue” by David Sheff. Excellent recount of the story of Nintendo and the gaming industry

For info on setting up that cool image placeholder, check out Dunstan’s excellent writeup

² For more on this, see this entry

— sergio on February 02, 2004