Firefox stuck on "waiting for" or "transferring data from"

Question

I have a website that includes a button which is CSS-styled to show a distinct image on hover. I wait for the page to load completely, then move my mouse over that button.

Firefox will show the new image, but the status bar becomes stuck showing either "transferring data from www.server.com" or "waiting for www.server.com" and this never goes away. I can see via Firebug's net view that the image is correctly downloaded at hover-time, and I see no other errors anywhere.

What can cause this? I am asking because I am having a spurious problem on this page with subsequent Ajax-call completion scripts.

Is it a common problem that Firefox gets stuck showing this status? What are the reasons?

Answer 1

Don't know why it's getting stuck, but there are better methods of doing rollovers. Put both the regular and hover images in the same image. Then use background-position to do the rollover:

a.btn {
  background-image: url("/img/btn.png");
  background-position: 0px 0px;
}
a.btn:active {
  background-position: 0px 50px;
}
a.btn:hover {
  background-position: 0px 25px;
}

The above CSS is for a 3-state rollover with a height of 25px. The top image is just the regular image; beneath that is the hover image; and beneath that is the active image, which is shown when the link is clicked on.

This gets rid of any loading delays between rollover state changes. If you want to get fancy, you can even animate the transitions using JavaScript (by including transition frames).