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 “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.