Forums
View unanswered posts | View active topics It is currently Wed Jul 30, 2014 1:03 am



Reply to topic  [ 3 posts ] 
 Functionality Issue with IE7 and IE8 
Author Message

Joined: Tue Jun 05, 2012 11:43 am
Posts: 3
Post 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.


Last edited by Sean500 on Thu Jun 07, 2012 5:36 pm, edited 1 time in total.



Tue Jun 05, 2012 1:03 pm
Profile

Joined: Tue Jun 05, 2012 11:43 am
Posts: 3
Post Re: Functionality Issue with IE7 and IE8
while working with the issue we found that removing the border caused the button to work correctly, however we still need the border to show.


Thu Jun 07, 2012 5:12 pm
Profile

Joined: Tue Jun 05, 2012 11:43 am
Posts: 3
Post Re: Functionality Issue with IE7 and IE8
we found a workaround. after removing the border we added a box shadow without x or y offsets and then a 1px border. the result is that the button works like it should and looks like it did previously.

in short the fix is:
remove:
Code:
border: 1px solid [color];

add:
Code:
box-shadow: [color] 0px 0px 0px 1px;


Thu Jun 07, 2012 5:35 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 3 posts ] 

Who is online

Users browsing this forum: No registered users and 5 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.