Generic image replacement method for a link, with a wrapper
The problem: What is the best way to replace a link with an image, keeping the link target aligned with the image (using a wrapper div if desired, because it is not going to be removed from the markup regardless of what decisions I make here)?
This is my original intuitive approach to the problem.
CSS image replacement report card:
- CSS ON / Images ON: pass
- CSS ON / Images OFF: fail (font-size 0)
- CSS OFF / Images ON: text only
- CSS OFF / Images OFF: pass
- Extra unnecessary markup: the div wrapper is unnecessary, but that is the whole point. The div is being autogenerated by the cms template and this is just a hotfix.
- Works in IE 6+, Chrome, Safari, FF, Opera.
- In IE 6-7 the link text underline is visible despite font-size 0.
Conclusion: it's probably cleaner to just target the link and ignore the div even though I'm not going to be able to eliminate the div.
- the CSS Tricks css image replacement museum: http://css-tricks.com/examples/ImageReplacement/
- the CSS Tricks image replacement report card: http://css-tricks.com/css-image-replacement/