This is a migrated thread and some comments may be shown as answers.

Button not clickable in Firefox

2 Answers 183 Views

Button

This is a migrated thread and some comments may be shown as answers.

Cliff Gibson asked on 25 Mar 2011, 04:01 PM

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>

.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 Answers, 1 is accepted

answered on 25 Mar 2011, 04:37 PM

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

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

</form>

</body>

</html>

Kind regards,
Bojo
the Telerik team

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!