Button with icon not displayed correctly in Firefox when button has css height.

Description

Got a couple of html buttons that I'm applying the jQuery UI button widget to, with icons on the buttons.

These buttons have a css style to set the width & height.
In IE the icons are fine, to the left of the button in the middle aligned with the text.
However, in Firefox 3.6 the icon is at the bottom left corner of the button.

If I take the height style off the button then the icon is aligned correctly.

I am not sure there is a good solution to this issue as it is being caused by Firefox not following the standard box model when displaying buttons. If a height is set, Firefox converts that to a combination of a smaller height and top/bottom padding that total that set height. I am attempting to find a way to change this during creation of the button but I'm not sure if Firefox will allow the change.

I am not sure there is a good solution to this issue as it is being caused by Firefox not following the standard box model when displaying buttons. If a height is set, Firefox converts that to a combination of a smaller height and top/bottom padding that total that set height. I am attempting to find a way to change this during creation of the button but I'm not sure if Firefox will allow the change.

I have a fix for this but it's not a *good* fix as it relies on browser sniffing to render the button differently in Firefox than it renders in other browsers. I've confirmed it works as expected in Firefox, IE and Chrome but again, it's not a very good fix. I'm investigating a way to handle this better without the need for browser sniffing.

I successfully worked around this problem in one case by changing my "height" style to "min-height". This will render the same in IE 8/9 (in standards mode), FF 4/5, and Chrome (v13 tested). Changing the inline styles on ​http://jsbin.com/ehubo/22 also yielded the expected results.

I also achieved the proper effect in my own application by specifying line-height, although I can't seem to replicate that, and I don't think I'd recommend it anyway.

I've had what seems to be the exact same problem. My <button> is in an explicitly sized <div>, each 20px square. The button widget is icon-only. The icon is 10px square, and these CSS rules for the icon <span> work just fine for Chrome and IE:
{

width: 10px;
height: 10px;
margin-top: -5px;
margin-left: -5px;

}
This is an exact analogy with what's already in the jQuery UI CSS source for the smaller size. They fail, however, in Firefox 9.0.1, and the icon is positioned 6px too low. Weirdly, explicitly deleting the second <span> (the one for label text, and which shouldn't be there at all, IMO) moves the icon down even farther.

Looking at the layout boxes with Firebug, though, reveals the Firefox defect. The horizontal positions, margins, padding, and width add up correctly to the width of the containing element. In the vertical, though, they add up consistently to 9 instead of 20, and that's with a variety of style instructions. I haven't dug into this enough to know why. Regardless of how Firefox rendering works out in the end, it's pretty clear it's going to take some browser-specific code, which is what I'm doing to work around it.

Update: The button widget was declared with { text: false }, but no 'label' property. Adding label text removes the need for Firefox-specific code. Adding label text that was empty or just a single space did not.

Looks like this was fixed way back in Firefox 10: ​http://jsbin.com/ehubo/22 I confirmed this on browserstack. Seeing as we don't support anything other than the latest 2 firefox's, this is now a wontfix. If anyone else has evidence this bug still exists, please feel free to file a new report.