I am utilizing the jQuery UI dialog feature and implementing buttons using jQuery in the following manner:
$("#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');
}
});
In addition, here is what the custom button class looks like:
.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;
}
However, when I hover over the button, it shifts slightly downwards and to the right. Upon inspecting with Firebug, I notice that the following CSS classes are added for the button when I move my mouse away (resulting in a change in position):
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only customokbutton" role="button" aria-disabled="false"><span class="ui-button-text">OK</span></button>
On the other hand, this is the CSS class applied to the button when I hover over it:
<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"><span class="ui-button-text">OK</span></button>
The CSS for these states is as follows:
.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;
}
What steps can I take to rectify this issue?