Pushing my buttons

July 30, 2001

What’s the most common use of JavaScript on Web sites today? What’s the most common thing people do in Macromedia Fireworks? The answer is the same: rollovers for things that look like buttons. I suppose I could play the curmudgeon and say that such things are needless glitz. Instead, I’m just going to say that they might be needless bloat.

First World users of the Internet increasingly have access to fast connections. In many countries, cable, DSL and other variations on the broadband theme are finally coming of age. Between the folks who surf at work and the folks with fast connections at home, there’s a growing share of Web users who no longer suffer from dial-up slowdowns. So designers of sites with First World audiences are learning that they don’t need to keep their pages quite so lean anymore. A few graphics, a bit of codebloat – what’s a few dozen kilobytes when cable modems have transfer speeds of up to half a megabyte per second?

Pity the poor folks who are still on dial-up, and anyone coming from those countries where Net access is still in the early stages of its life cycle. I’m not opposed to richer content, and I certainly don’t propose that we act like it’s still 1994 and we have to cater to the Netscape 2.0 user with a Windows 3.1 box attached to a 9600-baud modem. Still, unless your typographic needs are really specific, you can do without graphic buttons.

Eric Meyer has already explained how CSS rollovers work in an article on the O’Reilly Network. But because of browser incompatibilities, he still has to use graphics to demonstrate the point.

It’s all so unnecessary.

Down on the border

It seems that almost nobody realises that the CSS border property allows you more than just a plain border. You can do dotted ones like the folks at A List Apart use. There are ridged and indented and grooved borders. But best of all there’s the “outset” style, which looks just like the sort of border people construct to make a graphic button look like a button.

When we first introduced the “Refer a friend” function to MacEdition (yes, that thingy at the bottom), I was in a hurry and didn’t have time to do a graphic button. So I thought I’d put my markup where my mouth is and create a button in CSS.

All I needed was a paragraph with centered text (text-align:center) and then some fairly standard styles on the link, like this:

p.button a:link {
 background-color:#69f;
 color:black;
 padding:6px;
 border: 4px outset #69f;
}
/* and similarly for a:visited and a:active */

p.button a:hover {
 background-color:#ffc;
 color:red;
 padding:6px;
 border: 4px outset #ffc;
}

It looks perfect in IE5, Opera and Netscape 6 (you need to define A as well as A:link or the padding doesn’t show up in Opera). It looks perfectly acceptable in Internet Explorer 4.5 and IE5/Windows, although you don’t get the exact same look as in fully CSS-aware browsers. Because iCab doesn’t yet support padding and margin on inline elements like links, it only shows the plain text, but hopefully the final version will display the “button”.

Netscape 4 punishes good behaviour

However, the border breaks Netscape 4. Aside from the well-known problem of gaps between content and borders in Netscape 4, it turns out that borders on A elements just seem to stop the link from working at all. What a joke. (The padding isn’t displayed but at least it doesn’t stop the link from working.) So I tried to fix it by having a paragraph, then a span with all the padding and borders to make the button, and finally the link inside the span. Now Netscape works, but it looks stupid in IE5/Mac, because of the span. If you put the span either outside or inside the link (A element), the border and background start at the left edge of the paragraph, instead of being centered as before. Messing with the paragraph’s margins doesn’t give a satisfactory solution either.

Moreover, the nice trick with the hover doesn’t work anymore: you can’t change the color of the entire button including its border, since these are no longer part of the A element. Netscape 6 and friends do allow the :hover pseudoclass on elements other than anchors, but too few people use Mozilla-based browsers to bother with that method.

So much for my text-only button. This is the sort of nonsense Web designers have to deal with. I can work around just about any bug, but I can’t work around two or more bugs simultaneously when their solutions are mutually incompatible.

IE5/Mac has very good CSS support, but obviously it’s not perfect, even for the Level 1 specification with which it claims full compliance. I can live with that, although I wish it didn’t have glitches. I would never have encountered the glitch if it hadn’t been for Netscape, anyway.

What makes me grumpy is the way Netscape 4 actively destroys pages that its brain-dead CSS implementation can’t cope with. Borders should not break links. Borders on DIVs should not make content disappear or crash the browser. And so on, and so on, all the way to Version 4.78. This is not just certain styles not working – I could live with that – it’s page destroying. So instead, people use graphics and JavaScript rollovers. That’s right, JavaScript, with its own raft of browser incompatibilities.

If we want to avoid the Web being an entirely IE/Windows affair, alternative browsers like Netscape need to support standards. Netscape 6 does. So do Opera, Konqueror and IE for the Mac. And if Netscape the company, not the sainted open-source community, was really serious about standards, it would have removed Version 4 from its servers. Bug-fix releases like 4.78 should have been patches, not a full application download. The last thing we want is new Netscape 4 users.

Note to Netscape users: if you want to avoid the Web being an entirely IE/Windows affair, stop using Version 4. No ifs, no buts. Because these bugs really push my buttons.

— CodeBitch (codebitch@macedition.com) is the grumpy cow who does the HTML production for MacEdition. Read other articles by CodeBitch

E-mail this story to a friend