Safari "Hanging Chad" Button Issue

Anonymous
Not applicable

Safari "Hanging Chad" Button Issue

Hi,

Does anyone have a remedy to fix the "Hanging Chad" on a custom button. I followed the instructions to change the color of the button; however, when you view the button in Safari, the button seems to "repeat" even though I've disabled that function. 

0EM50000000PugO.jpg

Code:
<script language="JavaScript" src="/js/public/jquery-latest.min.js" type="text/javascript"></script>
<script>
var $jQ = jQuery.noConflict();
// Use jQuery via $jQ(...)
$jQ(document).ready(function(){
$jQ("#mktFrmSubmit").wrap("<div class='buttonSubmit'></div>");
$jQ(".buttonSubmit").prepend("<span></span>");
});
</script>
 
<style>
 
/* Start fancy button */
 
div.buttonSubmit {
position:relative;
float:left;
}
 
div.buttonSubmit input, div.buttonSubmit span {
background-image:url(image url);
background-position:left 0px;
background-repeat:no-repeat;
border:0px none;
color:#;
cursor:pointer;
float:left;
font-weight:bold;
height:36px;
margin:0px;
padding:0px 15px 2px;
position:relative;
z-index:5;
}
div.buttonSubmit span {
background-position:left -36px;
left:-4px;
padding:0px;
position:absolute;
top:0px;
width:4px;
z-index:10;
}
div.buttonSubmit input {
width:auto;
padding-left: 6px !important;
padding-right: 10px !important;
 
}
 
#mktFrmSubmit{
color: #FFFFFF !important;
font-size: 13px;
}
 
div.buttonSubmit:hover input { background-position: right -72px;}
div.buttonSubmit:hover span { background-position: left -108px;}
 
/* end fancy button */
</style>

Thx,
Matt
Tags (1)
2 REPLIES 2
Anonymous
Not applicable

Re: Safari "Hanging Chad" Button Issue

Hey Matt-
This is a no-testing out on a limb statement. but you can prefix browser's code, so you can target only iOS and specify something slight different. You do so by adding -o- infront of most css styles. You then leave the first definition and add the prefixed definition right below it.

I'd start by adding below the general definition instead.

background-position:left 0px;
-o-background-position:left -10px;

See if that helps.


If nothing, try instead

padding-left: 6px !important;

Then as a last option, i'd look at


div.buttonSubmit span {
left:-4px;


Sorry to not help more, if that does nothing for you let me know and post the actual URL,  I'll open up firefox and look at the site in firebug.
 
Anonymous
Not applicable

Re: Safari "Hanging Chad" Button Issue

Matt,

I've actually gotten rid of the Marketo "sliding doors" button altogether on our forms. Here's some CSS3 button code that degrades gracefully: https://gist.github.com/245a07a54ecd30aec288

You can create other buttons here: CSS3 Button Generator