Common CSS Forgettables Part 1

This post is a quick reminder to all of us who code and test web sites on Macs. We often take some common Safari behavior for granted, but the reality is a little bit different. No matter how much one dislikes PCs and has an aversion to anything but the divine Mac OS, the truth is – there’s more visitors with IE5.x than with Safari. Said that, here’re the most common CSS flaws. Workarounds included.

Negative text-indent and underline

This one is huge. Even the most respected standards aware ladies and gentlemen are forgetting it, project after project.

The Phark image replacement is very popular, since the screen reader is still able to read the replaced content. Here’s the common HTML and CSS setup:

...
a.replaced {
    display: block;
    width: 100px;
    height: 50px;
    text-indent: -9999px;
    background: url(cool_image.gif);
}
...
<a class="replaced" href="http://www.coolsite.com/">Cool site</a>
...

No matter how far on the left the real text is, the underline will be stretched all the way to the right in some PC browsers, namely the Firefox. So, even though the text itself is virtually somewhere in the next room, I’d say 3.5 meters to your left, the space of the link itself is right there where it has always been – in the browser on your screen.

The trouble is – nobody likes too many default underlines in their designs, but one often applies underline for the hover state, simply to inform the user about interaction existence for the given element. It’s usually done at the beginning in a CSS as a site-wide generic rule and by the time you start styling those replaced links, you completely forgot about the underlines.

The workaround is more than obvious and it’s best to apply it automatically:

...
a.replaced,
a.replaced:hover {
    display: block;
    width: 100px;
    height: 50px;
    text-indent: -9999px;
    background: url(cool_image.gif);
    text-decoration: none;
}
...
<a class="replaced" href="http://www.coolsite.com/">Cool site</a>
...

To be continued…