Button states in Firefox 3

[-DJ-]

Hi,

have you noticed that the hover and clicked states in Firefox 3 aren't displayed unless you have the mouse cursor at the right end of the button?

You can for example see it in action here: http://www.telerik.com/DEMOS/ASPNET/Prometheus/FormDecorator/Examples/Skinning/DefaultCS.aspx

Just select a skin like Vista, that has different images for all states.

Regards,
-DJ-

[Georgi Tunev]

Hello -DJ-,

Thank you for bringing this problem to our attention - I logged it in our database and we will do our best to have it fixed for the Q2 release.

Your points were updated.



Kind regards,
Georgi Tunev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[John]

Has this been fixed yet or is there a workaround?

Thanks

[Martin]

Hi John,

Unfortunately, the release of FireFox 3 came with a lot of CSS and JavaScript bugs, which they are currently fixing. The issue with the hover state of the decorated buttons is the result of a CSS bug, however, I found a fix. Add the following CSS in the head section of your webpage, or n your external stylesheet. The details of the bugfix are commented in the code:

/* Gecko, Opera, WebKit */
a.radfdSkinnedFormButton span
{
 position: relative !important;
 z-index: 1 !important;
}
   
/* IE7 fix */
*+html a.radfdSkinnedFormButton span
{
 position: static !important;
 z-index: 1 !important;
}

* IE6 */
* html a.radfdSkinnedFormButton span
{
 position: static !important;
 z-index: 1 !important;
}

However, I need to make some tests before including this in the assembly, because there are scenarios in which relative positioning delivers side problems.

Have a great weekend,
Martin Ivanov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.