« Tri-modal CSS Tabs | Main | Thanks for the memories... »

Tuesday, August 05, 2003

Comments

vavroom

THANK YOU!!!

I have been looking at the image replacement solution and finding it attractive, but entirely too problematic.

I found your suggestion and just tried it, viewing it both on the monitor, and with monitor off using JAWS, it works like a charm!

Fantastic. Thank you.

p

very good indeed, i'll be trying this out and using it later on, thanks!

Oliver

Uh-oh. This technique could kick your site off search engines. As well as you can throw in text meant for screen reader users, you could throw in some keywords or some other text fooling search engines. Hiding stuff like that the way you describe is used by SEOs (Search Engine Optimizers) since years with questionable results. I strongly suggest not to use it.

Jonathan

I've done virtually the same thing by moving text below the threshhold with the line-height property. Good job!

Mike

Oliver:
That's definitely true. I should contact people at google or yahoo to see what they think.

Jon:
Kick ass website! That line-height idea sounds real useful, especially with very wide elements where the text-indent value would be really high, and a quick line-height value would be easier to write.

Andy

As a further tweak for use with headers, etc., how about:

<h1 style="background-image:url(header.gif);">
Header replaced with image
</h1>

<h1>Header without image</h1>

h1 {
background-image: none;
}

h1[style] {
background-repeat: no-repeat;
text-indent: -100em;
}

That way, if you want a h1 without replacing the text, simply use it as normal; if you want to use an image, stick it directly in the h1 tag, and the CSS selector for h1[style] will apply the text-indent to only h1 tags with style attributes.

Mike

That's pretty slick Andy, I'll have to try that!

Levin

This technique is not accessible for me. I mostly surf with images disabled and sites that use FIR are sometimes really plain:
http://levin.grundeis.net/files/20030812/images_off.jpg

However, there is a solution:
http://levin.grundeis.net/files/20030809/alternatefir.html
(which sadly relies on an additional span)

Paul Watson

p.s. You were mentioned on Zeldman.com

Mike

Rob, can you post some code?

Paul, I know!!! I seriously thought I was going into cardiac arrest when I saw it. I met Jeffrey just this past year in Albany, NY, and had him sign my PowerBook!

Levin:
Its tough not using a span tag AND have the technique work when images are turned off (CSS on). I think everyone and their brother is trying to find that holy grail, and when they do, you can bet that it'll be all over the net within minutes :)

Mike

Cool technique, IE does have some trouble rendering unordered lists (and a bunch of other "regular" HTML tags lol), so before I make a decision, I always check my page out in Lynx to see if the layout sans-CSS works or not.

Greg

In reference to the posible search engine problems, I think its important to note that most search engines ignore CSS.

In fact that is one reason to switch to CSS based design - your code is more content based and hence easier to search and index.

Thats one thing that A List Apart and others have pushed about it..

Search engines tend to analyse content for spam, rather than a technique. Hence loads of keywords is flagged, but not a short description.

Again, as most search bots ignore CSS there should be no problem with this technique in modern search engines.

Mike

I remember reading that ALA article, and I believe you're right.

Bob

Your technique with the text-indent fails in IE5.5, at least for me. I have a DIV containing an H1 and a P, with the background image set. The DIV height and width dimensions are the same as the background image, and I used your text-indent: -100ems to move the text out of the way. Unfortunately, in IE5, I get a blank space where the DIV should be. I'm still tweaking it - if I come up with a solution, I'll post it here.

Mike

Bob:

Thanks for checking in IE 5.5, I think that's one of the few browsers I have left to use this technique with.

Can you post a screenshot (or a link to a screenshot lol)? I'd like to see what it looks like and if anything could be done.

Mike

Aled

Remember that IE.5.5 has a broken box model and so you will need to use the workaround.

Incidently I use a variation on the above for headings. I use:


#replaceText h1 {
text-indent: -100em;
overflow: hidden;
background: url(bg.gif);
line-height: size of bg.gif;
}

Works on IE5.5, IE 6.0, NS 6.2 , NS 7, Safari 1.0.

Sadly it breaks on IE5.2 on the Mac, but as Safari and Mozilla are both available on the Mac I'm not too concerned about this.

Mike

Aled:

I really like the combination of using the line-height and the negatively indented text.

I'm going to be incorporating both from now on ;)

Also, I was asked to write an article for Made for All regarding accessible image replacement techniques, and I think that I'll mention the line-height idea as well as the text-indent one as ideas to conquer image replacement.

I'll post back here when its all said and done with to see what everybody thinks.

Mike

Paul

Recognition from Zeldman, Congrats...great tip...

Paul

Bob

Sorry for the delay in the screen cap. I hadn't been back here since I posted my comment above. However, Aled's reminder about the box model in IE5 (something I almost never remember) should fix the problem.

chris

Of all of the FIR image replacements I've seen, I believe this is the best one. You can also make them be links!

CSS:
h1 { background: your_bg_info; height: 30px; text-indent: -100em; overflow: hidden }
a { display: block; height: 30px }

<h1><a href="/">Home Page</a></h1>

Tested Opera 5/6/7 and NS 6/7 (NS 7 wasn't actually displaying the bg image, but then again, it only displays some of the images some of the time for me. Link still worked, though).

Mike

Great call! Some people take the method at face-value, and forget that you can pretty much do whatever you want with the code to make it fit your design.

Consider if you are replacing a logo on the right side of your page... instead of doing a negative text-indent, just take the negative sign off and push your text off to the right. Or increase the value to something like -10,000 lol.

Oh, and I realized that there's really no need to keep the overflow rule in there, if you're moving the text a virtual "foot" off the screen anyway, there's no chance your user will ever see it. Overflow is what chokes IE5 for the Mac and some other browsers, so see if that helps.

Mike

Seth Thomas Rasmussen

The text-indent technique doesn't work in IE5.01 unless position: absolute; and overflow: hidden; are added. this breaks it in 5.5 though.

Jakob

After having worked with the -text-indent method, FIR, and LIR as image replacement methods, I have found that applying the negative Text Indent is a successful method for replacing text with an image on most browsers. Like all workarounds, there is no concrete solution, and the largest drawback currently with this method is that with images turned off, the stylistic information is lost (the "alt text" if you will). However, despite this shortcoming, this method of image replacement requires not only the smallest amount of changes to existing CSS, but is the most compatible with preexisting layouts and designs.

Thank you very much for this wonderful article.

Alun David Bestor

For the record: The negative text-indent method will work in IE/Win 5.01, *if* absolute positioning or floating are used on the containing element. Otherwise, IE5.01 will correctly outdent the text, but will carry the background-image with it - even if the background image is aligned right instead of left.

An alternative solution is to use an internal span and apply the text indent to that, and the background-image to the container element. However, this defeats one of the main advantages of this technique.

Mike

Great pickup Alun, thanks!

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment