Text styles don't go back to normal post-hover on PIEed link
I've run into a PIE problem that only shows up in IE8. I've created a set of navigation tabs by giving a border, border-radius, and background color to a series of links in an unordered list. The tab's background color and text color changes on hover, and an underline is added to the tab text. PIE rounds the corners of these tabs as expected, and the correct changes take place on hover.
However, in IE8 the text styles don't revert to their non-hovered state if someone mouses over the tabs quickly enough. Instead, the text retains it's hovered-state color and the underline remains but changes from the hover color to black. The problem seems to be related to how close together the mouseenter and mouseleave events happen. In IE6 and IE7 the reversion back to normal after hover may be very slightly delayed, but it still happens. Things only get "stuck" in IE8.
Here's a screen shot of the entire tab row being affected by the bug after a fast mouse swipe over all the tabs:
And here's a page pulled from the site in question
to demonstrate the problem. On the production site
, I've fixed the issue by only changing the background color on hover in IE8*. Only changing the color and text-decoration properties on hover also works; it's combining those with a background color change that causes problems. Any suggestions for a fix that would make the combination work?
It's probably worth mentioning that I'm not using the standard beta 2 distribution of PIE. I made the changes described in this forum thread
to prevent VML shapes from printing, then minified the edited file using Packer
After further discussion with my client, I switched from only changing background color in IE8 to not using PIE at all on the tabs.