title: Jquery Ui dialog button changes position on mouse hover
body: <p>I am using jquery ui dialogue and adding buttons using jquery like this:</p>
  
  <pre><code> $("#151").dialog({
                  autoOpen: false,
                  autoResize: true,
                  buttons: {
                      "OK": function () {
                          jQuery(this).dialog('close');
                      }
                  }
                  ,
                  open: function () {
                      $('.ui-dialog-buttonset').find('button:contains("OK")').focus();
                      $('.ui-dialog-buttonset').find('button:contains("OK")').addClass('customokbutton');
                  }
              });
  </code></pre>
  
  <p>and custombutton class looks like this:</p>
  
  <pre><code>.customokbutton { 
      text-indent: -9999em; /* hides the text */
      color: transparent; /* also hides text */
      background-image: url(images/login-icon.png); /*replaces default image */
       background-repeat: no-repeat; 
      background-color: transparent;  
      background-repeat: no-repeat;   
      cursor: pointer;  
      border:none;
      height:30px;
      outline: none;
  }
  </code></pre>
  
  <p>but when I bring mouse on button, it goes a bit down and right. I see using Firebug that following css classes are added when i bring mouse away ( changes position )</p>
  
  <pre><code>&lt;button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only customokbutton" role="button" aria-disabled="false"&gt;&lt;span class="ui-button-text"&gt;OK&lt;/span&gt;&lt;/button&gt;
  </code></pre>
  
  <p>and this one when i hover over button:</p>
  
  <pre><code>&lt;button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only customokbutton ui-state-hover" role="button" aria-disabled="false"&gt;&lt;span class="ui-button-text"&gt;OK&lt;/span&gt;&lt;/button&gt;
  </code></pre>
  
  <p>and css is like this:</p>
  
  <pre><code>.ui-state-hover,
  .ui-widget-content .ui-state-hover,
  .ui-widget-header .ui-state-hover,
  .ui-state-focus,
  .ui-widget-content .ui-state-focus,
  .ui-widget-header .ui-state-focus {
      border: 1px solid #707070;
  /*  background: #dadada;*/
      font-weight: normal;
      color: #212121;
  }
  </code></pre>
  
  <p>How can I fix it?</p>