Radu Darvas shim image replacement method with a fixed-size link
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)?
I had previously tackled this with by styling both the link and a wrapper div, because it wasn't within the scope of the problem to remove the wrapper div that existed in the site template anyway. See http://codepen.io/m2bn/pen/xbgZJQ. Then I tried streamlining the code by only targeting the link itself with the Leahy-Langridge padding-top overflow hidden method (http://codepen.io/m2bn/pen/JoEKoR). This made nice clean code but it didn't suit my particular use case for a couple reasons, see that example for details.
The method used here is the Radu Darvas shim, with a transparent gif. It's kind of ugly, but it's right for this particular use case.
CSS image replacement report card:
- CSS ON / Images ON: pass
- CSS ON / Images OFF: pass, but still fails due to a webkit bug in Safari/Chrome
- CSS OFF / Images ON: text only
- CSS OFF / Images OFF: double text. can't solve everything.
- Extra unnecessary markup:
- non-semantic blank.gif, span
- 2 selectors where L-L offers a way with just one
Conclusion: Since this site (a) has potential low-bandwidth applications where CSS ON / Images off is a plausible use setup, and (b) IE 7 support matters for this site, this should be the best available method for this particular application. In general, though, other methods are probably more performant and achieve better separation of content and style.
- Typically works as described above
- CSS ON / Images OFF fails in Safari/Chrome due to webkit bug (http://www.456bereastreet.com/archive/200912/safari_webkit_and_alt_text_for_missing_images/)
- Works on IE 6+
- blank.gif linked image border is visible on IE 6-7, could set border: 0 if we wanted to
- Older versions of FF also show linked image border on blank.gif, otherwise works as expected
- Opera works as expected
- 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/