on click submit button move itsplace

I m Using submit button for my form its work fine in all browser except ie7 when an user click on it it moved please suggest me what to do

.confirm-button-submit 
{
   width       : 79px;
   font        : bold 12px sans-serif;;
   color       : #000;
   background      : url("../images/confirm-btn.png") 0 -33px no-repeat;
   text-decoration : none;
   margin-top      :0px;
   text-align:center;
   border:0px;
   cursor : pointer;
   height:32px;
   padding     : 8px 0px 12px 0px;
}

.confirm-button-submit:hover 
{
   width       : 79px;
   font        : bold 12px sans-serif;;
   color       : #fff;
   background      : url("../images/confirm-btn.png") 0 0 no-repeat;
   text-decoration : none;
   margin-top      :0px;
   text-align:center;
   border:0px;
   cursor : pointer;
   height开发者_开发技巧:32px;
   padding     : 8px 0px 12px 0px;
}

i used this css please tell me what to do

code:

<input type="button" value="Show" name="commit" onclick="range_validation(this)" class="confirm-button-submit"/>`  

The hover class automatically inherits any values not specified, so any repeating attributes you can delete.

Also what do you mean by moved? If you mean when you hover, the button moves then deleting redundant attributes will help you narrow down which attributes are causing this.

If it's on click, then you will need to show the javascript function "Range_validation" to us to see if it's positioning anything.

First off, your css can be widely reduce:

IMPROVED CSS:

.confirm-button-submit, .confirm-button-submit:hover
{
   width           : 79px;
   font            : bold 12px sans-serif;;
   color           : #000;
   background      : url("../images/confirm-btn.png") 0 -33px no-repeat;
   text-decoration : none;
   margin-top      : 0;
   text-align      : center;
   border          : 0;
   cursor          : pointer;
   height          : 32px;
   padding         : 8px 0px 12px 0px;
}

.confirm-button-submit:hover
{
   color       : #fff;
   background  : url("../images/confirm-btn.png") 0 0 no-repeat;
}

With your css, all seems ok, the problem may be another global style that may be affecting your button, or some other element of your page... do you have a link to view the problem "in action" ?

the submit hover has diferent values for the image than the other submit class, not sure what they are for (never used extra values there) but they look like positioning or margin like values. these could be causing the image to change places when he hovers over it... maybe?