maxnorton/Leahy-Langridge-image-replacement-with-a-fixed-size-link.markdown

## index.html
<a  href="http://yahoo.com">Text link</a>

## Leahy-Langridge-image-replacement-with-a-fixed-size-link.markdown

      
    Raw
  

              Leahy-Langridge-image-replacement-with-a-fixed-size-link.markdown
            
          
    Leahy-Langridge image replacement 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. In doing that, I decided it would be more streamlined to target only the <a> anyway, even though the wrapper was still present in the code.
Here I'm trying the Leahy-Langridge technique (http://css-tricks.com/examples/ImageReplacement/) because it the markup is nice and clean.
CSS image replacement report card:

CSS ON / Images ON: pass
CSS ON / Images OFF: fail
CSS OFF / Images ON: text only
CSS OFF / Images OFF: pass
Extra unnecessary markup: none

Conclusion: CSS ON / Images OFF would be preferable given the potential low-bandwidth applications of the site in question. Also, this technique requires box model fixes for older versions of IE, and IE 7 is in some use on this site.
Compatibility: didn't test, but CSS Tricks states that box model fixes are needed for old IE.
Reference:

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/

A Pen by Max Norton on CodePen.
License.

  
## style.css
a {
  background: url("http://joidesresolution.org/sites/default/files/image/kidsPage_blogHere.png") no-repeat transparent;
  display: block;
  height: 0;
  overflow:hidden;
  padding: 88px 0 0 0;
  width: 116px;
}

/* pen readability settings */
  body {
    background: #006;
  }

  a {
    margin: 10%;
  }
/* /readability */
	a {
	background: url("http://joidesresolution.org/sites/default/files/image/kidsPage_blogHere.png") no-repeat transparent;
	display: block;
	height: 0;
	overflow:hidden;
	padding: 88px 0 0 0;
	width: 116px;
	}

	/* pen readability settings */
	body {
	background: #006;
	}

	a {
	margin: 10%;
	}
	/* /readability */