Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Button: Fixed 5254: Input, button and anchor buttons aren't consistent in IE7 #273

Closed
wants to merge 3 commits into from

5 participants

David Murdoch Maggie Wachs Corey Frang Mike Sherov Jörn Zaefferer
David Murdoch

Fixed 5254: Input, button and anchor buttons aren't consistent in IE7. They really weren't consistent in any browser. Now they are. http://bugs.jqueryui.com/ticket/5254

There is some heavy use of CSS hacks to get the buttons to play nicely together. Most of the hacks are well-known: _ (IE6), !ie (IE6-7), \0/ (IE 8-9), and a new one I haven't named yet for IE9 (goo.gl/OCKzi).

davidmurdoch added some commits
David Murdoch davidmurdoch Fixed 5254: Input, button and anchor buttons aren't consistent in IE7…
…. They really weren't consistent in any browser. Now they are.
114b541
David Murdoch davidmurdoch The \0/ CSS hack needs a space before it to target only IE, otherwise…
… it will apply to Opera as well. Thanks mathias.
755214e
Jörn Zaefferer jzaefferer commented on the diff
themes/base/jquery.ui.button.css
@@ -36,3 +42,11 @@ input.ui-button { padding: .4em 1em; }
/* workarounds */
button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
+@-moz-document url-prefix() {
Jörn Zaefferer Owner

Do we really need two different moz specific hacks? Or in other words, can't you use ::-moz-focus-inner or the moz-document thingy for both of these?

I believe ::-moz-focus-inner acts similarly to ::after and ::before in that the CSS rules don't apply to the element itself, but some psudeo element, instead. So, -moz-focus-inner isn't really a hack...it is modifying the focus "ring" in firefox (http://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links)

I sounded like I wasn't sure about '-moz-document url-prefix()' so I just want to make it clear that I am positive about what I said in my previous statement. :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
David Murdoch davidmurdoch Updating the IE9 hack to be less verbose - the media expression wasn'…
…t actually needed. Also, I've appended "ie8+9" and "ie9" to the end of the winning-man hack, aka \0/, just to show exactly what that hack targets (don't want to confuse future devs TOO much).
8aeb0ab
Maggie Wachs

Hi guys. This seems like an awful lot of hackiness to fix an edge case -- when will a button, input, and anchor element (or some combination) with identical styles sit side-by-side in a real site? My understanding is that we want to avoid browser-specific hacks whenever possible, so I vote that we don't include this fix, and instead rework the button demo page so that it reflects a more realistic scenario (and looks better).

David Murdoch

I agree, it is pretty hacky; but jQuery ui buttons are expected to look identical, or as close to it as possible, regardless of their node-type.

While these browser hacks may not be the best solution, modifying the demo page just to hide an inconsistency in the library is definitely not the way to go.

Maggie Wachs

I'm not suggesting that we do anything sketchy like "hide an inconsistency." I'm questioning whether the inconsistency here is a real problem, or a perceived one because of how the demo pages are set up. I can't think of a use case where different markup for each button is absolutely necessary on the same line.

When we start integrating hacks to this degree -- for multiple browsers and versions -- we start down a path that I think is unsustainable. And it doesn't seem justified in this case.

David Murdoch

I don't know whether the extra css hacks are justified here, but the problem is real. Here is an example use-case of a relatively common button layout: http://jsfiddle.net/musicisair/vHRfF/.

Corey Frang
Owner

I think that the best solution would be to include the CSS hacks, or better yet find a way to do it without browser specific hacks, on the DEMO / documentation pages. If someone happens to run into the situation where they need a <a> <input> <button> and <div> button all on the same line - we should at least document what is needed to make it happen.

We avoid browser specific hacks, and this whole pull request feels like one.

Mike Sherov
Collaborator

Thanks for contributing this pull request! However, we're going to close it as the original ticket describes the approach we're going to take during the rewrite, which is to wrap the native elements in a consistently styleable element. Thanks again!

Mike Sherov mikesherov closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on May 13, 2011
  1. David Murdoch

    Fixed 5254: Input, button and anchor buttons aren't consistent in IE7…

    davidmurdoch authored
    …. They really weren't consistent in any browser. Now they are.
  2. David Murdoch

    The \0/ CSS hack needs a space before it to target only IE, otherwise…

    davidmurdoch authored
    … it will apply to Opera as well. Thanks mathias.
Commits on May 20, 2011
  1. David Murdoch

    Updating the IE9 hack to be less verbose - the media expression wasn'…

    davidmurdoch authored
    …t actually needed. Also, I've appended "ie8+9" and "ie9" to the end of the winning-man hack, aka \0/, just to show exactly what that hack targets (don't want to confuse future devs TOO much).
This page is out of date. Refresh to see the latest.
2  tests/visual/button/button_ticket_5254.html
View
@@ -52,4 +52,4 @@ <h3 id="ua"></h3>
</dl>
</body>
-</html>
+</html>
19 themes/base/jquery.ui.button.css
View
@@ -7,7 +7,11 @@
*
* http://docs.jquery.com/UI/Button#theming
*/
-.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
+
+/* the overflow property removes extra width in IE */
+/* margins need to be reset. In some browsers "button", and "input" have margins by default but anchors do not*/
+/* vertical-align:middle is required to align anchors with their input and button brothers */
+.ui-button { display: inline-block; position: relative; padding: 0; margin:0 .3em 0 0; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; vertical-align: middle; }
.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
.ui-button-icons-only { width: 3.4em; }
@@ -15,13 +19,15 @@ button.ui-button-icons-only { width: 3.7em; }
/*button text element */
.ui-button .ui-button-text { display: block; line-height: 1.4; }
-.ui-button-text-only .ui-button-text { padding: .4em 1em; }
+.ui-button-text-only .ui-button-text { padding: .38em 1em .37em; padding: .36em 1em\0/; }
+
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
+
/* no icon support for input elements, provide padding by default */
-input.ui-button { padding: .4em 1em; }
+input.ui-button { padding: .46em 1em; }
/*button icon element(s) */
.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; top: 50%; margin-top: -8px; }
@@ -36,3 +42,10 @@ input.ui-button { padding: .4em 1em; }
/* workarounds */
button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
+@-moz-document url-prefix() {
Jörn Zaefferer Owner

Do we really need two different moz specific hacks? Or in other words, can't you use ::-moz-focus-inner or the moz-document thingy for both of these?

I believe ::-moz-focus-inner acts similarly to ::after and ::before in that the CSS rules don't apply to the element itself, but some psudeo element, instead. So, -moz-focus-inner isn't really a hack...it is modifying the focus "ring" in firefox (http://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links)

I sounded like I wasn't sure about '-moz-document url-prefix()' so I just want to make it clear that I am positive about what I said in my previous statement. :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ input.ui-button { padding: .43em .71em; } /* reset extra padding in Firefox */
+}
+a.ui-button-text-only .ui-button-text { padding: .46em 1.1em .56em !ie; } /* IE<8 needs some extra love to style anchors correctly */
+input.ui-button { margin-right: .34em !ie; padding-top:.47em\0/ie8+9; } /* IE6,7 need help with margins and IE8 doesnt treat our em padding correctly */
+
+input.ui-button { padding-top:.45em \0/ie9; } /* IE9 is also a bit odd */
Something went wrong with that request. Please try again.