A Link with an Image Rollover

This is a very complicated…and possible overly complicated text/img link combo with a rollover.  I created this for a high profile project I was working on.  Here is the thing.  I often find that when dealing with links with images and rollovers the line height of the pc vs mac creates an alignment issue which is incredibly annoying.  I finally found a solution I like…

Here is the markup:

<div class=”back-to-top”><a onclick=”window.scrollTo(0,0); return false” href=”#top”><span></span>Back to top</a></div>

No big deal.  We have a wrapping class an a tag an empty span (better to include that with JS, but whatever) and some text.

Here is the CSS:

.back-to-top {   padding: 0px 50px 0px 0px; text-decoration: none; margin-top: 20px; margin-bottom: 20px; }
.back-to-top a { position: relative; float: right; padding: 0px 0px 0px 20px; height: 15px; display: block; text-decoration: none; font: bold 11px Arial; color: #4c4c4c; }
.back-to-top a span { display: block; position: absolute; top: -1px; left: 0px;  height: 15px; width: 15px; background: url(”../img/tech_specs_2/back_arrow_up_and_over.jpg”) 0px 0px no-repeat; }
.win .back-to-top a span { top: 0px; }
.back-to-top a:hover { background-position: 0 0px; }
.back-to-top a:hover span { height: 15px; width: 15px; display: block; background: url(”../img/tech_specs_2/back_arrow_up_and_over.jpg”) 0px -15px no-repeat; }

/* standard float clearing…not important */
.back-to-top:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; }
.back-to-top{display: inline-block;}
* html .back-to-top {height: 1%;}
.back-to-top {display: block;}

The money here is I put the image with CSS sprite rollover in a span tag and apply a .win class to the a tag.  This allows me to just modify the positioning of the span tag for Windows (you can figure that one out on your own).  Works perfectly: cross browser and cross system.