I am currently developing a website that includes input buttons styled with CSS as part of a form. For example, check out the sample code below:
<input type="submit" name="buttonSave" value="save" id="buttonsavejs" class="button_image button_style"/>
An issue I've encountered is that when a user clicks on the button, it sometimes shifts a few pixels down before performing the expected action intermittently. By intermittent, I mean that the button works correctly at times (redirects to the next page) and other times, nothing happens.
The developer who previously worked on this has not documented much about his code, so I am starting from scratch here (apologies for the lack of details). Upon testing the code, it appears that the problem lies in how newer browsers are rendering the css and javascript.
Here's a snippet of the javascript responsible for the button's functionality:
$("#buttonsavejs").click(function(){
$("#main").unbind("submit").submit();
And here is the CSS styling the button:
.button_style {
height:28px;
margin-left:10px;
position:relative;
right:10px;
top:-23px;
width:100px;
}
.button_image {
background-image:url(http://some_image);
border-bottom-width:0;
border-color:initial;
border-image:initial;
border-left-width:0;
border-right-width:0;
border-style:initial;
border-top-width:0;
display:block;
font-size:1px;
line-height:1px;
outline-color:initial;
outline-style:none;
outline-width:initial;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
text-indent:-9999px;
}
I also came across a similar question on Stack Overflow: Why do mouse clicks not always work for styled input buttons?
Another observation I made is that when using IE 9's developer tools and changing the Document Mode to anything other than IE 8 or 9, the button functions correctly. This led me to consider setting X-UA-Compatible to IE 7 to see if that resolves the issue, as apparently, that's how the document mode in IE functions: IE8 browser mode vs document mode
Question: After testing in earlier versions of FF (< 9.0), IE 7, the button works fine. However, in FF 9, Chrome 16, IE 8/9, it exhibits the behavior described above. Has anyone faced a similar issue and can provide advice on what I should be mindful of?