Tag Archives: css

Ticks Revisited

In a previous post I covered how we tackled the insertion of ticks (otherwise known as checks). Using conditional comments to feed a character entity to modern browsers while feeding a wingding character to IE6 was workable, but terribly unwieldy.

We forgot one very basic point: The tick is a graphic symbol and not a piece of content in itself.

Most other sites we tried to refer to simply dropped a graphic in the table cell. Using the appropriate alt text, it is somewhat accessible. Adobe has a great implementation which we have decided to emulate.

Inserting “Yes” into the applicable table cells makes it extremely semantic. Throwing in a class “yes” allows us to remove the text and replace it with a graphic via CSS.

<td class="yes">Yes</td>

The CSS:

Logo Replacement

There are so many image replacement techniques out there I’ve lost count. Some using negative margins, super-small fonts or display:none, the reports are that some of them aren’t accessible.

But why replace images at all? Isn’t the alt attribute meant to replace images with text, rather than a contortion of CSS techniques?

For the MOE Website we used negative margins to do the image replacement for the MOE crest on the top left. However, under it is a black-and-white version of the crest. This is used in the printer styles, and will also be printed by browsers that aren’t CSS-enabled. The black-and-white crest has alt text to make it accessible should images be turned off.

I’m sure there are many ways to skin this particular cat.