#5603 closed bug (wontfix)

Opened May 11, 2010 10:09AM UTC

Closed November 14, 2012 03:02AM UTC

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

Reported by:	probablymike	Owned by:
Priority:	major	Milestone:	1.11.0
Component:	ui.button	Version:	1.8.1
Keywords:	button height icon firefox css	Cc:
Blocked by:		Blocking:

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.

Very simple example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
    <link rel="stylesheet" href="jquery-ui-1.8.1.custom.css" type="text/css" />
    <script type="text/javascript" src="query-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.1.custom.min.js"></script>
</head>

<body style="font-family:Arial; font-size:small;">
    <button id="ButtonPlanningHistory" type="button" style="height:70px;width:170px;" onclick="top.location='search.aspx';">Planning History</button>
          
    <button id="ButtonMainRegister" type="button" style="height:70px;width:170px;" onclick="top.location='register.aspx';">Main Register</button>
       
    <script type="text/javascript">
        $("button").button({icons:{primary:'ui-icon-arrowthick-1-e'}});
    </script>           
</body>
</html>

Attachments (0)

Change History (9)

Changed August 20, 2010 12:26PM UTC by scottgonzalez comment:1

milestone:	TBD → 1.9
priority:	minor → major

Changed March 28, 2011 08:04PM UTC by fofanafi comment:2

status:	new → open

Verified: Icon appears inline on IE, Chrome and Opera, but not in Firefox using jQuery UI 1.8.11

Test case:

http://jsbin.com/ehubo/22

Changed May 14, 2011 02:42PM UTC by k_borchers comment:3

_comment0:	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 changes this during creation of the button but I'm not sure if Firefox will allow the change. → 1305384159389433

_comment0:

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 changes this during creation of the button but I'm not sure if Firefox will allow the change. → 1305384159389433

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.

Changed May 18, 2011 09:58PM UTC by cmhdave comment:4

Replying to [comment:3 k_borchers]:

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.

Changed June 09, 2011 07:31PM UTC by gnarf comment:5

keywords:	button height icon firefox → button height icon firefox css

Playing around on http://jsbin.com/ehubo/22 I came up with this CSS change:

On line 140 (currently) of jquery-ui.css -- Removed the "top: 50%" and added margin-top: 8px instead of -8px:

.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute;  margin-top: 8px; }

Seems right in FF / Chrome...

Changed July 06, 2011 10:26PM UTC by elerch comment:6

_comment0:	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, 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. → 1309991582147800

_comment0:

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, 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. → 1309991582147800

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.

Changed January 12, 2012 11:21PM UTC by eh comment:7

_comment0:	I've had what seems to be the exact same problem. My <button> 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. \ \ In Firefox, though, the icon is positioned 6px too low. Weirdly, explicitly deleting the second <span> (which probably shouldn't be there at all, IMO) moves the icon down even farther. \ \ Looking at the layout boxes in 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. 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. → 1326410532731044
_comment1:	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. \ \ In Firefox, though, the icon is positioned 6px too low. Weirdly, explicitly deleting the second <span> (which probably shouldn't be there at all, IMO) moves the icon down even farther. \ \ Looking at the layout boxes in 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. 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. → 1326465308951380
_comment2:	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. → 1326804061516569

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.

Changed October 11, 2012 02:43PM UTC by scottgonzalez comment:8

milestone:	1.9.0 → 1.11.0

Changed November 14, 2012 03:02AM UTC by mikesherov comment:9

resolution:	→ wontfix
status:	open → closed

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.

Search and Top Navigation