Chris Cottrell
Top achievements
Rank 1
Rank 1
Chris Cottrell
asked on 11 Aug 2011, 03:59 PM
Here is a really simple example and I wish I could show a screenshot. What I'm doing is trying to create a margin. In only IE (using version 8) the margin in the div seems to affect the button. It creates an additional set of padding in front of the button and almost toward the end of the button, a strip of white padding overlays the button. I am not using any additional styling. Actually, when you tab to it, the white space in the front of the button also appears to be part of the button. This is it on the page. I have tried several things from using a css class (not doing that here to keep it as simple as possible) to including an additional div tag. or using span tags
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title></title></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" Runat="server" /> <div style="margin: 20px"> <p>text that is indented with margin: 20px, however, the button seems to take on strange margins</p> <telerik:RadButton runat="server" id="btnContinue" Text="Example" /> </div> </form></body></html>1 Answer, 1 is accepted
0
Hello Chris,
When a HTML element has margin applied and contains a RadButton control, usually under older versions of IE that margin takes effect on the button as well. This is a specific browser behavior and can be avoided by setting overflow: auto or overflow: visible to the the parent element that has margin applied.
If you still experience problems resolving the issue, please send us a live URL that displays your case so that we can inspect it locally and pinpoint the cause.
Kind regards,
Slav
the Telerik team
When a HTML element has margin applied and contains a RadButton control, usually under older versions of IE that margin takes effect on the button as well. This is a specific browser behavior and can be avoided by setting overflow: auto or overflow: visible to the the parent element that has margin applied.
For the following example I have used your code sample and modified it a bit, in order to include the fix:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title></title> <style type="text/css"> /*Fix for IE problem*/ *+html .classDiv { overflow: auto; } </style></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" Runat="server" /> <div style="margin: 20px" class="classDiv"> <p>text that is indented with margin: 20px, however, the button seems to take on strange margins</p> <telerik:RadButton runat="server" id="btnContinue" Text="Example" /> </div> </form></body></html>If you still experience problems resolving the issue, please send us a live URL that displays your case so that we can inspect it locally and pinpoint the cause.
Kind regards,
Slav
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.