Comments on: CSS Image replacement revised

By: Javier

Javier — Sat, 04 Feb 2006 23:04:43 +0000

A simple solution, em units instead of px. I like it

Thanks again koke!

By: koke

koke — Sat, 04 Feb 2006 18:46:32 +0000

That's right but maybe you want to check the following article I found some time ago: http://www.bigbaer.com/css_tutorials/css.scale.image.html.tutorial.htm I have to test is and post something about that, but looks nice.

By: Javier

Javier — Sat, 04 Feb 2006 13:11:13 +0000

Thanks for the explanation Koke

But i still see some accesibility problems here. For example with someone that have visual problemas but resolves them by making fonts bigger. That wouldn’t affect the logo and he couln’t see the alternative text.

In the future SVG will be the solution, at least i hope so

By: koke

koke — Sat, 04 Feb 2006 11:39:34 +0000

The img tag should be used when the image is ‘content’. When it’s only decorative, it’s definition belongs to the realms of the style sheets.

This case is mostly focused on headers/titles, where the important part is the text itself, and the image is only to make this text beautier.

By: Javier

Javier — Fri, 03 Feb 2006 11:05:05 +0000

And, what’s the problem of using the alt option on img tag as usually?

By: koke

koke — Fri, 03 Feb 2006 06:54:29 +0000

Matt, that was a nice option too, but AFAIK doesn’t work on IE5

By: koke

koke — Fri, 03 Feb 2006 06:52:08 +0000

Ok, you were right, thanks a lot!

By: Matt Good

Matt Good — Fri, 03 Feb 2006 02:10:42 +0000

Here’s what I use that avoids the screenreader problems of FIR and doesn’t require the tag:

#header {
  width: 131px;
  height: 98px;
  background: transparent url(/files/fir-test.png) no-repeat;
  text-indent: -9999px;
}

The negative text indent ensures that the text isn’t visible on the page, but the screenreaders don’t ignore it.

By: Michael Zeltner

Michael Zeltner — Fri, 03 Feb 2006 00:48:05 +0000

I meant the line below the Imagine your page starts with something …

By: koke

koke — Fri, 03 Feb 2006 00:31:40 +0000

Actually the span was (and is) there, but I missed to put an absolute url for the image.