RequiredFieldValidators break fieldsets in IE

[Dan Ware]

Hi

The fieldset border gets broken up every time a validator control is shown.  This occurs in IE6, 7 and 8 but seems OK in Firefox.

Here is a very simple form sample to demonstrate the issue:

    <telerik:RadScriptManager ID="RadScriptManager" runat="server" />
    <telerik:RadFormDecorator ID="RadFormDecorator" runat="server" DecoratedControls="Default, Textbox, Textarea, Fieldset, Select" />
    <fieldset>
      <legend>Test form</legend>
      <div>
        <asp:Label ID="lblName" runat="server" Text="Name" AssociatedControlID="txtName" />
        <asp:TextBox ID="txtName" runat="server" />
        <asp:RequiredFieldValidator ID="rfvName" runat="server" ErrorMessage="Name is required" ControlToValidate="txtName" Display="Static" Text="*" />
      </div>
      <div>
        <asp:Label ID="lblPosition" runat="server" Text="Position" AssociatedControlID="txtPosition" />
        <asp:TextBox ID="txtPosition" runat="server" />
        <asp:RequiredFieldValidator ID="rfvPosition" runat="server" ErrorMessage="Position is required" ControlToValidate="txtPosition" Display="Static" Text="*" />
      </div>
      <div style="text-align: center">
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
        <asp:ValidationSummary ID="ValidationSummary" runat="server" />
      </div>
    </fieldset>

Should I avoid using RadFormDecorator for fieldsets if the user agent is IE?

Regards,
Dan

[Dan Ware]

Well for now I'll have to rely on a different method of styling the fieldsets if the user has IE, the formdecorator only seems to cope with other browsers if any validators are inside of the fieldset (both dynamic or static).

It's only a small annoyance as IE already uses rounded corners in fieldsets.

The formdecorator is a great control but I have noticed that I need to use quite a lot of CSS fixes to get it working across all browsers in the same way.  Keep up the great work on this brilliant free control!

[Bozhidar]

Hello Dan,

Thank you for the nice words - we really appreciate it.

For Modern browsers we are using CSS 3 border-radius property to create rounded corners for text inputs and text areas. Unfortunately IE6, IE7 and IE8 do not support that property. We are using table to be rendered in IE around these elements to simulate rounded borders by setting background and border color tot eh cells. We are aware for some limitations of these decorated elements in IE, but unfortunately there isn't much that we can do about it. As you mentioned, it will be necessary to flood the CSS layout with a lot of IE style hacks to make it work partially.
I have also tried different approaches to force IE to change the fieldset height according to the new data laded inside it, but with no success. It is expected, that IE9 will support border-radius property, as other CSS 3 properties also, but we will still have to support older IE versions, and again it will not be a complete solution.

Kind regards,
Bojo
the Telerik team