Hey all,
Kind of as title states - Whats your technique to implement image replacement over text and have you found some techniques more beneficial than others…?
Looking forward to hearing lots of different thoughts on this matter…
Benisjamin 
I used to use sIFR… now I use Google Web Fonts. Cheers.
Hi again,
I probably did not word the original question properly, so Ill try again - Im currently going through a video series off lynda.com called “css for designers”, and I know the series was compiled in 2007 so its probably a little out of date with how certain things are achieved now, but one way they style headers alot is through “image replacement” and by that I mean, for example take a standard <h2>, attach a background url to it but then shunt the actual <h2> header “offleft” by -9999px so your just left with the background image - Is this a good practise and do budding designers still use this technique or is there now a different way to achieve the same result ?
Any comments to clarify this matter would be greatly appreciative.
Benisjamin
Nosebleed! Don’t use those terms! I’ll get brain damage 
Just kidding…
Anyway, about this kind of website designing. Frankly speaking, I don’t get some of your terms. I was using dreamweaver so I don’t know that. But i know a site that teaches techniques about designing. Maybe they can help you.
Yes I believe this is good practice as far as SEO goes as it is still outputs it in the source code as a normal heading.
The down side of doing it this way is that it’s a static image, so not very helpful for dynamically built menus and headings as the average user won’t know how to or have the means to replace the image if they want the text changing.
I use this method on logos and company names, parts of the design that i know won’t change.
For dynamic text you need to use a dynamic replacement tool such as sIFR.
I hope that helps!
Yup I still use that with the text-indent. Although I use -999em instead of -9999px. Just personal preference I suppose; both work.
Take care that when you do this for submit buttons you also need to add text-transform: capitalize to the rule, otherwise it doesn’t work in IE7.
Weird solution, I know.
A massive negative text-indent for image replacement is a miserable /FAIL/ at accessibility that pretty much misses the POINT of using an image replacement in the first place! That point being that there’s text for the user to use when images are disabled – and many users will turn off images but leave CSS on, or use a browser that does so automatically (like some handhelds).
This is why I use a variation of gilder-levin, which requires an extra empty element (like a span) as a hook (at least until generated content is real word deployable) to which you apply your image, which is then absolute positioned OVER the text hiding it.
<h1>Some text<span></span></h1>
h1 {
position:relative;
width:320px;
padding:11px 0;
font:bold 24px/26px arial,helvetica,sans-serif;
}
h1 span {
position:absolute;
top:0;
left:0;
width:320px;
height:48px;
background:url(images/h1Logo.png) 0 0 no-repeat;
}
I place the span after because at one point or another FF started screwing up the default position of APO’s… and having it after also means some other techniques like inline-block corners can be applied.
There are issues with said approach; it doesn’t work with transparencies for example as the text underneat will show through – but as a rule I don’t use alpha .png’s since they tend to be fat bloated train wrecks that are painful to work with in the first place… it also breaks for the people using the idiotic 1990’s style text-resize that used to be the nyetscape default; where the text zoom would incorrectly resize px elements. Thankfully that’s now only an optional setting in FF, so the handful of people using that broken zoom I really could give a flying fig about.
Besides, that ‘zoom text only’ setting breaks 99% of the internet ANYWAYS – just another reason people who actually care about accessibility or worse need it do not use gecko based browsers in the first place.
Pretty much the best test for a image replacement is to leave CSS on and turn images off – if the page cannot pass that simple test, yer doing it all wrong.
A massive negative text-indent for image replacement is a miserable /FAIL/ at accessibility that pretty much misses the POINT of using an image replacement in the first place! That point being that there’s text for the user to use when images are disabled – and many users will turn off images but leave CSS on, or use a browser that does so automatically (like some handhelds).
This needs to be repeated as often as necessary til this technique (negative text-indent) dies. I’ve only used negative text-indent in a moment of desperation and was never happy with the results.
Pretty much the best test for a image replacement is to leave CSS on and turn images off – if the page cannot pass that simple test, yer doing it all wrong.
Amen.
This test is why there are places where we can’t use Gilder-Levin though: icons and such things (too small to show all the text), and where we have to decide whether to overflow: hidden the element to stop text from popping out from behind the image upon text-enlarge… which fails CSS-on, images-off + text-enlarge (for logos, I’ve just been letting the text pop out, but this may cause confusion in some visitors so it’s not optimal).
Which is why I’m NOT a fan of “just icons” in the first place – I prefer text since how the *** am I supposed to know what that tiny little picture even means.
THOUGH – if you are using ICONS instead of text, wouldn’t those suddenly be CONTENT? IF they’re content, that’s when you use a IMG tag with ALT text, and maybe TITLE on the anchor around it. (AND NOT ON THE IMG SINCE THAT MAKES NO SENSE!!!)
Image replacement is for when it’s a presentational affectation replacing text – if there’s no text in the image being used as a replacement, it’s not a replacement element, it’s CONTENT.
Which is why I’m NOT a fan of “just icons” in the first place – I prefer text since how the *** am I supposed to know what that tiny little picture even means.
Yeah, I remember my mom asking “what’s the little flag in the water mean again?” right when the engine was about to explode/catch fire. Smarter cars actually say “ENG. TEMP” on them.
THOUGH – if you are using ICONS instead of text, wouldn’t those suddenly be CONTENT? IF they’re content, that’s when you use a IMG tag with ALT text, and maybe TITLE on the anchor around it. (AND NOT ON THE IMG SINCE THAT MAKES NO SENSE!!!)
Unfortunately, due to browsers being retards, this dies too. The images have dimensions, and when they don’t appear, some browsers will retain those dimensions and then try to fit the alt text inside (instead of letting it spill out).
One neat trick I did with titles was
a[title]:focus:after {
content: " " attr(title);
}
a[title]:focus:hover:after {
content: "";
}
because one thing I hate about title is how it requires a mouse. Screw that. Of course, if you’ve got titles on your icons, it’s because, as stated above, people aren’t being told in the plain text what the hell the goofy things mean.
Image replacement is for when it’s a presentational affectation replacing text – if there’s no text in the image being used as a replacement, it’s not a replacement element, it’s CONTENT.
Frankly, if you’re not building an application with actual buttons, I believe instead of icons there should be text links. Which the boss then insists gets turned into a goofy cutesy icon. Which is why icons are, indeed, replacing content (whether I agree with cute little images replacing the content or not, that is what they are doing).
Icons also have the “added benefit” of making the clickable area smaller than they would have if you had just kept link text, making them that much more difficult for people to use.
I’m a copycat. I see something that works and copy it. In this case I use whatever SitePoint is using for their logo (Gilder/Levin?)
I’ve used negative text-indents for some years now. Accessibility is a good argument, sacrificing semantics for accessibility seems fine. I wouldn’t agree that negative text-indents completely miss the point. Bots are able to see the text either way but yes, accessibility is sacrificed in place of semantics when using negative text-indents. Good point deathshadow60 I’ll take it to heart next project – I really do hate presentational mark-up so much so apart of me wants to keep using negative text indents.
I use a mix of CSS and PHP to create dynamic PNG images for my headers on the fly, in the background using a TTF font file. Sounds crazy, but it’s pretty straight forward, you use the PHP file as an image file and it will process and output the image data for you.
I wrote a tutorial on this a while ago and have the source for use/download.
Demo: PHP Image Creation
Hopefully you have it set up to somehow cache those results so if a image fitting that text already exists it just links the file instead of wasting server resources (and hordes of RAM) rebuilding it on every request?
I’ve been playing with making a auto-thumbnail script that puts the thumbs in an image directory – with a .htaccess to route 404’s to a php in same… If the thumbnail already exists, it just gets sent. If it does not, the 404 PHP handler loads, it looks for the same file without the _thumb suffix and if it exists it creates it and sends it… otherwise it does the 404.
That type of handling could really make your routine a bit more… robust.
I hate it too - but ‘empty’ unclassed elements don’t bother me as much as say… wrapping div with classes on them, presentational tags/attributes (as in elements that only have presentational use like CENTER, ALIGN, etc), or presentational classnames like “red” or “bigtext” – barf.
In that way a empty semantically neutral tag like SPAN or DIV? Really not that offensive to me… I don’t even mind it with B or I if it’s empty.
Thankfully when/if CSS3 becomes real world deployable it will let us stop adding empty spans to do this, since we can just use generated content instead. Just say :after and no more extra empty sandbag tag.
Though I won’t consider a property real world usable until I can call it in FF and Webkit without the prefixes… since by definition the prefixes mean “unstable”, “for testing” and “not for use on deployment sites”
Bots are able to see the text either way but yes, accessibility is sacrificed in place of semantics when using negative text-indents.
Yeah bots, fine, whatever, but the problem with neg text indent is… HUMANS. As Crusty already mentioned, we devs can’t assume someone with images off also have CSS off. Nor can we assume they’ve got a screen reader (neg text indent is as accessible to screen readers as to bots). That’s why you don’t want to use it: it fails images-off, CSS-on.
And, agreed with Crusty that semantics matter little when elements are empty. User agents are pretty good at ignoring empty elements.