From 114b5416b93a4b250174803c8d734e588adb7783 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Fri, 13 May 2011 22:45:10 +0000 Subject: [PATCH 1/3] Fixed 5254: Input, button and anchor buttons aren't consistent in IE7. They really weren't consistent in any browser. Now they are. --- tests/visual/button/button_ticket_5254.html | 2 +- themes/base/jquery.ui.button.css | 20 +++++++++++++++++--- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/tests/visual/button/button_ticket_5254.html b/tests/visual/button/button_ticket_5254.html index 9031861e948..1583227e6c2 100644 --- a/tests/visual/button/button_ticket_5254.html +++ b/tests/visual/button/button_ticket_5254.html @@ -52,4 +52,4 @@

- + \ No newline at end of file diff --git a/themes/base/jquery.ui.button.css b/themes/base/jquery.ui.button.css index 0d11065f4de..07c8aa04958 100644 --- a/themes/base/jquery.ui.button.css +++ b/themes/base/jquery.ui.button.css @@ -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,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() { + 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/; } /* IE6,7 need help with margins and IE8 doesnt treat our em padding correctly */ +@media all and (min-width:0) { + input.ui-button { padding-top:.45em\0/; } /* IE9 is also a bit odd */ +} \ No newline at end of file From 755214eb44070d55508bcfd1a8faaa59ecd430aa Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Fri, 13 May 2011 22:50:47 +0000 Subject: [PATCH 2/3] The \0/ CSS hack needs a space before it to target only IE, otherwise it will apply to Opera as well. Thanks mathias. --- themes/base/jquery.ui.button.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/base/jquery.ui.button.css b/themes/base/jquery.ui.button.css index 07c8aa04958..097eea147cf 100644 --- a/themes/base/jquery.ui.button.css +++ b/themes/base/jquery.ui.button.css @@ -46,7 +46,7 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad 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/; } /* IE6,7 need help with margins and IE8 doesnt treat our em padding correctly */ +input.ui-button { margin-right: .34em !ie; padding-top:.47em \0/; } /* IE6,7 need help with margins and IE8 doesnt treat our em padding correctly */ @media all and (min-width:0) { - input.ui-button { padding-top:.45em\0/; } /* IE9 is also a bit odd */ + input.ui-button { padding-top:.45em \0/; } /* IE9 is also a bit odd */ } \ No newline at end of file From 8aeb0ab7a16a6bbbada0951f1f57bd1c04e02c23 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Fri, 20 May 2011 06:25:37 -0700 Subject: [PATCH 3/3] 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). --- themes/base/jquery.ui.button.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/themes/base/jquery.ui.button.css b/themes/base/jquery.ui.button.css index 097eea147cf..5f191237e49 100644 --- a/themes/base/jquery.ui.button.css +++ b/themes/base/jquery.ui.button.css @@ -46,7 +46,6 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad 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/; } /* IE6,7 need help with margins and IE8 doesnt treat our em padding correctly */ -@media all and (min-width:0) { - input.ui-button { padding-top:.45em \0/; } /* IE9 is also a bit odd */ -} \ No newline at end of file +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 */ \ No newline at end of file