I’ve been using the Firefox 1.5 Beta 1 for a few days, and have noticed a problem with the Accessible Image Replacement technique from Mike Rundle, which essentially ‘shifts’ the text into a negative area off the screen by using text-indent in CSS. Unfortunately Firefox 1.5 Beta isn’t displaying this in the way current Firefox 1.0+ does (as well as IE6 and Opera 8).
Accessible Image Replacement, as Mike Rundle called it, is a pretty good solution for placing images into anchor elements and maintaining accessible (and semantic) code; however Firefox 1.5 Beta 1 is now showing a selected state around the negatively-spaced area as well as the anchor. Here is a screenshot from the Codehesive.com homepage (126KB JPEG).
The same glitch is visible on the sites of Jeffrey Zeldman and CSS Vault, and I’m sure dozens of others. Realising of course this is a beta product, I checked out Bugzilla, and turns out this problem was reported to back in April – thankfully the ever-so-easy solution is just to add in overflow : hidden; to your CSS.
However, I found a comment on this Bugzilla entry by Ian ‘Hixie’ Hickson interesting:
This looks invalid to me. Try it with a more reasonable, less abusive text-indent and you’ll see why.
Fair call – technically, this is abusing text-indent. There are many, many techniques for doing replacing text with graphics, but none (to me) are totally practical or proper solution. By ‘practical’ and ‘proper’ I mean avoiding CSS hacks, JavaScript and extra tags. This is why I prefer Mike Rundle’s method: of course the text-indent is undeniably a hack, but it is a very discreet one. And until there’s anything better, I’ll stick with it – albeit adding overflow : hidden; if the final Firefox 1.5 continues to render links using Mike Rundle’s technique this way.
So, if you’re using Accessible Image Replacement, you might want to add overflow : hidden; to your CSS. So far this doesn’t affect IE6 or Opera 8, and hopefully it won’t lead to any other browser buginess. Anyone want to check this out in Safari or older versions of IE?
That’s really odd man. And Ian’s comment is pretty stupid IMO, considering “abusing text-indent” does not mean the code is invalid in any way, shape or form. Basically what is happening is that you are using valid CSS in a way that the Mozilla engineers didn’t think of, therefore it’s wrong in their eyes. Kinda crappy I think.
I have that FF beta so I’ll have to check it out on my sites I use the technique with. I’d hate to slap overflow: hidden; on everything just to make it work, but if that’s what we gotta do then that’s what we gotta do.
Thanks for pointing this out though, super informative.
It’s definitely not invalid – but abusive technically, as I doubt it was meant to be used in this way. Nonetheless it’s still the best way to implement image replacement. Maybe a CSS attribute such as
text-display : none;orbackground-layering : top;could help? Both are just off the top of my head, so I’m not exactly proposing anything solid here.If there was a way to effectively turn text off, then you could have an effect similar to alt text showing as the image downloads, which is actually a lot nicer than what you currently get, which is of course just a box that slowly fills with an image.
Actually, in retrospect, background-layering is daft. It’s a background. That said, I can’t see much logic in a
foregroundattribute either. Still,text-display : none;could be on the right track.Six months later, I find the solution to the problem:
http://www.w3.org/TR/2003/WD-css3-ui-20030703/#icon. Basically there is a
display : iconin CSS3. Of course, no browsers are supporting this yet…