Weird IE problem

5 posts, 0 answers
  1. Daniel
    Daniel avatar
    175 posts
    Member since:
    Feb 2009

    Posted 16 Dec 2010 Link to this post

    Hi. I've got two RadButton's side-by-side and display okay in FireFox but not IE7/8. My main container is a DIV and fills the middle part of the page as a percentage. I've got other controls in there like RadTextBoxes and RadComboBoxes that don't have any issues. To get it to display properly, I need to place each button inside their own DIV with a set width and float them. Regular buttons don't have the same problem. I've attached some screens which best describes the problem. I'm using 2010_3_1215. Thanks.
  2. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 16 Dec 2010 Link to this post

    Hi Daniel,

    I din`t succeed to reproduce the issue. I have used the following code:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .wrapper
            {
                width: 770px;
                margin: auto;
                border: 1px solid red;
                height: 500px;
            }
             
            .button
            {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div class="wrapper">
            <div class="button">
                <telerik:RadButton ID="rb1" runat="server" Text="OK" Width="50%">
                </telerik:RadButton>
                <telerik:RadButton ID="RadButton1" runat="server" Text="Cancel">
                </telerik:RadButton>
            </div>
        </div>
        </form>
    </body>
    </html>

    This makes me to think that you have set some global styles to elements like A or INPUT and they are applied to RadButtona and breaks it:

    You could try to use the following CSS in the head section of your page to fix the A element button  width:

    .rbSkinnedButton {width: auto !important;}


    Kind regards,
    Bojo
    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
  4. Daniel
    Daniel avatar
    175 posts
    Member since:
    Feb 2009

    Posted 16 Dec 2010 Link to this post

    Thanks for the reply Bojo. I can reproduce the problem with the code below. After measuring the gap, it looks like button is inheriting the 274px margin I've applied to the layout. On the RadButton, I've tried zeroing the margins and applied the style you posted above but nothing changes.

    What I did notice is that if I zero the margins in the second DIV below <div style="margin: 0 274px 0 274px;"> --> <div style="margin: 0;"> or change it to padding <div style="padding: 0 274px 0 274px;">  it comes good but the first one destroys the layout. Thanks.

    Daniel

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <div style="float: left; width: 100%;">
        <div style="margin: 0 274px 0 274px;">
            <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton">
            </telerik:RadButton>
            <br />
            <br />
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>
    </div>
    <div style="float: left; width: 274px; margin-left: -100%; background: #ededed;">
        <h1>
            LEFT COLUMN</h1>
    </div>
    <div style="float: left; width: 274px; margin-left: -274px; background: #ededed;">
        <h1>
            RIGHT COLUMN</h1>
    </div>
  5. Daniel
    Daniel avatar
    175 posts
    Member since:
    Feb 2009

    Posted 16 Dec 2010 Link to this post

    Hi Bojo. After a bit of testing, I can live with using padding on that DIV. It behaves the same in both IE and FireFox. It would be good to know why IE is applying that margin to the RadButton. Thanks.

    Daniel
  6. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 20 Dec 2010 Link to this post

    Hello Daniel,

    It`s a known issue with IE6 and IE7. This problem was reported by a couple of customers and I am aware of it. Unfortunately it is not related to the RadButton control in a way that we could fix it in the code. It is good that you could use the padding alternative. However if you have the same problem and you can not use padding for some reasons, the problem could be solved by setting overflow: auto to the element that contains the broken button. Bellow is the fix applied to the code provided by you in your previous post:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
             
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div style="float: left; width: 100%;">
            <div style="margin: 0 274px 0 274px; overflow: auto;">
                <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton">
                </telerik:RadButton>
                <br />
                <br />
                <asp:Button ID="Button1" runat="server" Text="Button" />
            </div>
        </div>
        <div style="float: left; width: 274px; margin-left: -100%; background: #ededed;">
            <h1>
                LEFT COLUMN</h1>
        </div>
        <div style="float: left; width: 274px; margin-left: -274px; background: #ededed;">
            <h1>
                RIGHT COLUMN</h1>
        </div>
        </form>
    </body>
    </html>


    Kind regards,
    Bojo
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017