jquery ui button icon not centered in firefox

Question

I've this button

$('#galery .buttonClose').button({
    icons: {
        primary: "ui-icon-closethick",
        text: false
    }
});

css :

  #galery .buttonClose{position: absolute; top: 3px; right: 3px; height: 30px; width: 30px;}

It's working fine on Chrome the icon is centered on the button but in Firefox the icon is completly down

jsFiddle : http://jsfiddle.net/nDMV8/2/

This seems to be a common bug in jQuery UI i think they should plan something when you try to do a button with no text to set the css correctly and working in all browsers. Like they show all the icons on their themes page (bottom): http://jqueryui.com/themeroller/

Answer 1

You also have your text: false option in the wrong place, it should be:

  { icons: { primary: "ui-icon-closethick" }, text: false }

Thanks to jmoerdyk

Then i just had to set the height at 32px and fixed !

Answer 2

#galery .buttonClose{
    top: 3px;
    right:3px;
    height: auto;
    padding-top:5px;
    padding-bottom:5px;
    width: 35px;
}

An example here. Tested in chrome, ff and ie. ​