4 replies to this topic

[Sambo]

I like to create semantic markup so it often makes sense to use, say an <h2> for a column heading. However, sometimes I'd rather have an image take the place of that text so that the font looks fancier. The technique I've recently come across is called image-replacement I believe and this is how it works.

1.) You create a header tag in the XHTML and give it a class name. You also include your header text as you normally would.

CODE

<h2 class="widgets">Widgets</h2>

2.) Then in the CSS you add a background image to that class which is your fancy font.

3.) Finally, so that you don't see the original header text from the XHTML, you move it out of frame using:

CODE

text-indent: -9999px

I know that's essentially hiding text, but it seems to be fairly common on some well-known sites. Will Google kill me for that?

[chrishirst]

http://googlewebmast...s-of-flash.html

post from Mark Berghausen (a google engineer)
http://groups.google...7f4ffdf697a7124

[nick279]

sIfr is great, easy to use and looks spot on - providing you have flash + the font file to hand

using images I would 1000% match the text in the image to the replacement text. Anything else is a worthless risk.

[Sambo]

sIfr is great, easy to use and looks spot on - providing you have flash + the font file to hand

using images I would 1000% match the text in the image to the replacement text. Anything else is a worthless risk.

I'd love to use sIFR but to be honest it seems a little beyond my capabilities. I've never even used flash so...

As far as the image replacement, the image text would definitely match the HTML text 100%

[Sambo]

I know nobody cares, but I just got a CSS book that outlines how to use sIFR. I finally gave it a shot and it's sooo easy. I can't believe I hadn't tried this before.

How cool is this? Thanks for the tips!