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
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
1 Answer, 1 is accepted
0
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:
Greetings,
Bojo
the Telerik team
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"><html xmlns="http://www.w3.org/1999/xhtml"><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.