Fieldset padding difference in IE8 vs Firefox & Crome

2 posts, 0 answers
  1. Thomas
    Thomas avatar
    22 posts
    Member since:
    Mar 2011

    Posted 23 Jun 2011 Link to this post

    Hi!

    When using FormDecorator on Fieldset the page render with different paddings for IE8 compared to Firefox and Crome.
    Use this link: http://demos.telerik.com/aspnet-ajax/formdecorator/examples/default/defaultcs.aspx to see the difference att the top, "Decoration Zone".
    Is there a fix for this? If I hit the compatibly button in IE8 it renders almost the same as in Firefox and Crome.

    Sincerely, Thomas
  2.
  3. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 27 Jun 2011 Link to this post

    Hello Thomas,

    The different padding comes from the different HTML rendering we are using for IE6/7/8 and other browsers. While in all modern browsers (Including IE9, Firefox, Opera, Safari, Chrome) we are using CSS3 border radius property, in IE6/7/8 we are rendering an additional table element to create the rounded borders. Because of the different elements and different CSS classes and CSS cascades.

    You could use the following CSS fix in order to have equal padding in all browsers:

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title>Padding</title>
        <style type="text/css">
            .rfdRoundedWrapper_fieldset fieldset
            {
                padding: 0 0 0 8px !important;
            }
             
            fieldset.rfdRoundedCorners
            {
                padding: 1px 0 0 10px !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="rs1" runat="server">
        </asp:ScriptManager>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All"
            Skin="Forest" />
        <fieldset style="width: 400px; height: 200px;">
            <legend>Fieldset Title</legend>
            <asp:CheckBox ID="chb1" runat="server" Text="Text" />
            <div style="background-color: Red; width: 100px; height: 100px;"></div>
        </fieldset>
        </form>
    </body>
    </html>


    Greetings,
    Bojo
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
Back to Top