Opened 13 years ago

Closed 11 years ago

#5603 closed bug (wontfix)

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>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <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>

Change History (9)

comment:1 Changed 13 years ago by Scott González

Milestone: TBD → 1.9
Priority: minor → major

comment:2 Changed 12 years ago by fofanafi

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

comment:3 Changed 12 years ago by 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 changes this during creation of the button but I'm not sure if Firefox will allow the change.

Version 0, edited 12 years ago by k_borchers (next)

comment:4 in reply to:  3 Changed 12 years ago by cmhdave

Replying to 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.

comment:5 Changed 12 years ago by Corey Frang

Keywords: css added

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...

comment:6 Changed 12 years ago by elerch

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.

Last edited 12 years ago by elerch (previous) (diff)

comment:7 Changed 12 years ago by eh

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.

Last edited 12 years ago by eh (previous) (diff)

comment:8 Changed 11 years ago by Scott González

Milestone: 1.9.0 → 1.11.0

comment:9 Changed 11 years ago by mikesherov

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.

Note: See TracTickets for help on using tickets.