Wierd behavior with RadButton in IE8

2 posts, 0 answers
  1. Chris Cottrell
    Chris Cottrell avatar
    5 posts
    Member since:
    Jul 2009

    Posted 11 Aug 2011 Link to this post

    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" %>
    <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>
  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 15 Aug 2011 Link to this post

    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.

    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" %>
    <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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top