Creating Rollover (Image) Buttons for IE & Other Browsers

Recently I've been battling a battle that I've taken on in the past, but its taken me a little while to remember what the solution was. I must have lost that post-it note that explained how I solved the problem. Here's an explanation of the battle:

Problem
Button (image) rollover would work beautifully in Firefox, but not in IE (of course).

CSS Solution
Use absolute positioning. By looking at the web page, you would think that there are two different images - one for the normal state and one for the rollover state. But actually, both states of the button are in one image. The appearance of the image is controlled with absolute positioning. So although the user only sees one image at a time, two images are actually appearing.

a#live {
color: #a81933;
white-space:nowrap;
background-image:url(..);
background-position: 25% -10%;
background-repeat: no-repeat;
font: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
position: absolute;
left: 195px;
width: 200px;
top: 148px;
height: 75px;
text-decoration: none;
padding-top: 125px;
padding-left: 27px;
}

a#live:link {
}

a#live:visited {
}

a#live:hover {
color: #000000;
white-space:nowrap;
background-image:url(..);
background-position: 25% 129%;
}

a#live:active {
}

HTML Code
href="..." id="live"

The End Result
See for yourself: http://arweb.sdsu.edu/es/prospectivestudents/video_menu.html