IE8: Background Image Jump On Click Of Input type="submit"

I do a lot of styled submit buttons. An awful lot. In fact, I tend to earmark an entire day on any sizeable project for sorting out the button styles. I’m not talking about a bit of padding and border colour, but full-blown background image with rollover (and sometimes hover) styles, for maybe one hundred different submit and anchor elements across a site.

Using background images for anchor elements is bulletproof across all browsers, the same used to be true for submit inputs, before IE8 came along.

The set-up

To minimise HTTP requests and enable a separate image on rollover, I use the old-but-reliable CSS sprites technique to create a single image containing the background images of buttons across the entire site. This is a small part of a full image:

This requires a fair bit of CSS, but once condensed and gzipped, the additional size is negligible. I apply a class of “button” to any element styled as a submit button (be it anchor or input) which sets up the basic styles, then add an additional class such as “btn-confirm” which applies a background-position specific to that button.

Jumpin` jerwillikers!

This is all fine and dandy until you click on an <input type=”submit”/> element styled in this way, in IE8.

The first button is in its focused state, the second has been clicked on. As you can see, when clicking on the button, the background image jumps one pixel up and to the left, presumably in an attempt to indicate an action performed on the button, by the user. Unfortunately, when using image sprites, the buttons look completely broken when clicked in IE8.

I turned up a few possible solutions (see here and here) though none that suited the exact problem I had. The most promising suggestion was to use the proprietary Microsoft CSS properties -ms-background-position-x and -ms-background-position-y, but this would mean doubling my CSS for all button background positions in an IE8-only style sheet, which adds a maintenance overhead and leaves a slightly different visual glitch once the button is clicked. I also didn’t want to rely on JavaScript for this solution, or drastically change the HTML.

Show me the money

I eventually settled on a solution of my own, which was to replace all

<input type=”submit” class=”button btn-confirm”/>

with

<input type=”image” src=”blank.gif” class=”button btn-confirm”/>

That’s right. “blank.gif”. A chilling throwback to the spacer GIF days. By keeping the same classes, there will appear to be no difference when you make the switch, only IE8 will behave itself this time. The downside is that background images aren’t displayed in a print view, so when printed, your forms will lack any visible submit buttons, but this doesn’t bother me too much, and it’s certainly more acceptable than a bug that will be glaringly apparent to the client, who will inevitably be using IE8!

You can vote for a resolution of this this bug on Microsoft Connect