Hover with background image stops loading indication in IE7

In my asp.net webform page I have a simple form with a single inputfield and a submit button. When initiating the post request and then hover over the submit button, the browser stops showing the loading state (progress bar dissapears, the 开发者_如何学Go"Done" label appears and the loading animation in the tab becomes the site icon again.

I have been able to narrow the bug down to the followihg css rule:

.button:hover {  
    background-image:url("/content/images/buttonHoverGradient.jpg");  
}  

on the following html

<input type="submit" class="button" title="Select a provider" value="Select">

It seems to me IE initiates the request to fetch the image and then takes the status of this new request as the overal status. I don't have a clue how to prove this. Any ideas?

UPDATE

The buttons class is used all over the page and we cannot know the dimensions of them on beforehand. Therefore using a single background as suggested by @teresko image with several states embedded is not an option.

UPDATE

It seems to be in other versions of IE too. Some research seems to point to the Doctype (which is currently quircks as asp.net webforms 3.5 doesn't really alow for strict)

---

Did you try to just use a same image for both normal and :hover state of the button , and only change the position of image on mouseover? Kinda like in this example.

This should solve at least part of the problem.