button rendering problem

[Alex]

Hello,

When I am using FormDecorator, my buttons have a dashed line under them and the hover style does not work on Firefox 3 or 2, but works on IE. The dashed line is caused by the hidden RealInputButton, that apparently isn't hidden. This is not a browser issue since the decorated buttons on your demo site look ok on my Firefox. What could be the problem causing this?

Thank you in advance.

[Martin]

Hello Alex,

The issue you have reported may be caused by global styles. Please, try to exclude your styles and see whether the problem still persists. If it is gone, check if your click / submit buttons have the CSS display: block property applied to and remove it if possible.

You cannot handle the problem, prepare a small running project that contains your layout and styles and RadFormDecorator as well and we will try to fix it for you.

Best wishes,
Martin Ivanov
the Telerik team

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

[Alex]

The solution for the dashed line is to modify the generated css from

a.radfd_Web20 span
   line-height:21px;
}

to a line-height: 20px; This way the background image is directly behind the radfdOuterSpan. display: block; is active for the radfdSkinnedFormButton span class.

I haven't been able to see how the hover style is applied. I have commented all CSS's on your site using Firebug and haven't been able to figure it out :)

[Martin]

Hello Alex,

Which versions of FireFox 2 and 3 are you using? I am asking for this, because when 3.0 was released, it came with a number of CSS bugs, which were fixed later, and the hover problem is already gone. I've tested your scenario with version 3.0.4 (latest) and everything seems to work like charm, as it is seen on the screenshots I have attached - there is no dashed line and there is a hover style.

However, there is an issue with FireFox 2.0.0.16, which can be fixed by adding float: left to the skinned buttons. In version 3x FireFox finally implemented the display: inline-block property and this allowed us to remove certain vendor-specific CSS properties from our code, and this is why in some cases issues emerge with older versions of FireFox, but as they release it every 3-4 weeks we decided to drop certain features and to support better CSS, as this allowed decrease in the size of the stylesheets and easier maintenance.

Best wishes,
Martin Ivanov
the Telerik team

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

[Alex]

I am using Firefox 3.04. But as I said, It is not a browser issue. It works fine on your demo site, but not in my project. I have created a new project and added just a button, script and decorator, and no hover style, but correct rendering without the dashed line under.
On IE 8 Beta 2, it doesn't render anything, blank page. Works on compatibility mode. Maybe this is a version specific bug. I am using version 2008.2.826.35.

Thanks.

[Martin]

Hi Alex,

Please, prepare a small running project, and include in it your page, layout, css and the decorated controls. Open a new support ticket and send it to us so as we are able to observe the issue and think of a solution.

Best wishes,
Martin Ivanov
the Telerik team

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

[Alex]

Hi,

The problem was solved by upgrading to Q3.

Thank you.