Functionality Issue with IE7 and IE8
On our website we are using buttons with a gradient and rounded corners. I've done a little debugging and determined that the css3pie background is covering the button itself causing only the text and the border to be clickable. This issue is much more prevalent if the span is much wider than the text. To reproduce this issue you move the cursor between the text and the border of the button we see that there is a spot that is unclickable. I've only tested IE7 and IE8 but this issue could be in other versions as well. We have a button with a span within it that holds text as follows:
Code:
<button type="submit" class="class1 class2 class3 class4"><span>TEXT HERE</span></button>
The css goes as follows:
Code:
.class1 {
position: relative;
border: 0;
padding: 0;
cursor: pointer;
overflow: visible; /* REMOVES EXTRA SIDE PADDING IN IE*/
}
.class1 span {
position: relative;
display: inline-block;
white-space: nowrap;
}
.class2 {
margin: 0;
text-align: right;
text-decoration: none;
display:inline-block;
color: #fff;
padding:0 15px;
}
.class2 span {
color: #fff;
display: inline-block;
line-height:25px;
font-size: 12px;
font-weight:bold;
padding-bottom:3px;
width:100%;
}
.class3 {
font-size: 11px;
margin: 0;
text-align: right;
text-decoration: none;
color: #fff;
position:relative;
background: #F9AA01;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F9AA01), to(#FD5D16));
background: -webkit-linear-gradient(#F9AA01,#FD5D16);
background: -moz-linear-gradient(#F9AA01,#FD5D16);
background: -ms-linear-gradient(#F9AA01,#FD5D16);
background: -o-linear-gradient(#F9AA01,#FD5D16);
background: linear-gradient(#F9AA01,#FD5D16);
-pie-background: linear-gradient(#F9AA01,#FD5D16);
background-position: 130px center;
border-radius: 30px;
border: 1px solid #F98E2B;
behavior: url(/PATH/PIE.php);
display: inline-block;
padding: 0 15px;
}
.class3 span {
color: #fff;
display: inline-block;
line-height:20px;
text-align:center;
width:100%;
}
.class3.class4 span{
background: url('../class4.png') right center no-repeat;
padding-right:8px;
}
is there a way to fix this issue? the button still works but i would like to fix this issue.
Forums
