Button not clickable in Firefox

3 posts, 0 answers
  1. Cliff Gibson
    Cliff Gibson avatar
    45 posts
    Member since:
    Oct 2009

    Posted 25 Mar 2011 Link to this post

    I've got the code below, when rendered in IE the buttons are clickable, yet in Firefox and Safari neither buttons are clickable.  They show as enabled but mouse does not change its cursor type and cannot click on the button...

    Using button elsewhere on the site and all works just fine...all suggestions welcome...!

    Cheers
    Cliff

    <div style="clear:both; padding-top:5px;"></div>
        <div class="HeaderButtons">
            <div class="Previous">
                <telerik:RadButton ID="btnPrevious" Text="Previous" runat="server" Width="220px" onclick="btnPrevious_Click">
                    <Icon PrimaryIconCssClass="rbPrevious" PrimaryIconLeft="5" PrimaryIconTop="5" 
                          SecondaryIconCssClass="rbPrevious" SecondaryIconRight="5" SecondaryIconTop="5"/>
                </telerik:RadButton
            </div>
            <div class="Progress">
                <asp:Label ID="lblProgress" runat="server" Text="Progress"></asp:Label>
            </div>
            <div class="Next">
                <telerik:RadButton ID="btnNext" Text="Next" runat="server" Width="220px" onclick="btnNext_Click">
                    <Icon SecondaryIconCssClass="rbNext" SecondaryIconRight="5" SecondaryIconTop="5" 
                          PrimaryIconCssClass="rbNext" PrimaryIconLeft="5" PrimaryIconTop="5"/>
                </telerik:RadButton>  
            </div>
            <div id="divSubmit" runat="server" class="Progress" style="display:none" >
                <telerik:RadButton ID="btnSubmit" Text="Submit Evaluation" runat="server" Width="320px" onclick="btnSubmit_Click">
                </telerik:RadButton>  
            </div>
        </div>


    .HeaderButtons
            {
                margin:auto;
                position:relative;
                display:block;
                margin:auto;
                text-align:center;
                width:955px;
                float:left;
            }
            .Previous
            {
                width:250px;
                position:absolute;
                left:0px;
                top:0px;
                text-align:left;
                float: left;
            }
            .Next
            {
                width:250px;
                position:absolute;
                right:0px;
                top:0px;
                text-align:right;
                float: right;
            }
            .Progress
            {
                width:955px;
                position:absolute;
                top:0px;
                left:0px;
                text-align:center;
            }

  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 25 Mar 2011 Link to this post

    Hello Cliff,

    The problems comes form the custom CSS you have added. The progress div width is equal to the wrapping div width, and it overlaps the first button and prevents the click and hover. Button is just hidden under the progress div.

    If you want to keep that layout and CSS, you should add some extra CSS rules to specify z-index in order to specify the order of the elements:

    <%@ 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 id="Head1" runat="server">
        <title></title>
        <style id="Style1" runat="server" type="text/css">
            .HeaderButtons
            {
                margin: auto;
                position: relative;
                display: block;
                margin: auto;
                text-align: center;
                width: 955px;
                float: left;
            }
            .Previous
            {
                width: 250px;
                position: absolute;
                left: 0px;
                top: 0px;
                text-align: left;
                float: left;
                z-index: 1;
            }
            .Next
            {
                width: 250px;
                position: absolute;
                right: 0px;
                top: 0px;
                text-align: right;
                float: right;
            }
            .Progress
            {
                width: 955px;
                position: absolute;
                background: red;
                top: 0px;
                left: 0px;
                text-align: center;
                z-index: 0;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <div style="clear: both; padding-top: 5px;">
        </div>
        <div class="HeaderButtons">
     
            <div class="Previous">
                <telerik:RadButton ID="btnPrevious" Text="Previous" runat="server" Width="220px">
                    <Icon PrimaryIconCssClass="rbPrevious" PrimaryIconLeft="5" PrimaryIconTop="5" SecondaryIconCssClass="rbPrevious"
                        SecondaryIconRight="5" SecondaryIconTop="5" />
                </telerik:RadButton>
     
            </div>
            <div class="Progress">
                <asp:Label ID="lblProgress" runat="server" Text="Progress"></asp:Label>
            </div>
            <div class="Next">
                <telerik:RadButton ID="btnNext" Text="Next" runat="server" Width="220px">
                    <Icon SecondaryIconCssClass="rbNext" SecondaryIconRight="5" SecondaryIconTop="5"
                        PrimaryIconCssClass="rbNext" PrimaryIconLeft="5" PrimaryIconTop="5" />
                </telerik:RadButton>
            </div>
            <div id="divSubmit" runat="server" class="Progress" style="display: none">
                <telerik:RadButton ID="btnSubmit" Text="Submit Evaluation" runat="server" Width="320px">
                </telerik:RadButton>
            </div>
        </div>
        </form>
    </body>
    </html>


    Kind regards,
    Bojo
    the Telerik team
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Cliff Gibson
    Cliff Gibson avatar
    45 posts
    Member since:
    Oct 2009

    Posted 25 Mar 2011 Link to this post

    Problem solved, changed z-index of the divs to keep the buttons on top and all working in Firefox now :-)
Back to Top