Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Theme: removed or changed occurrences of zoom #852

Closed
wants to merge 3 commits into from

3 participants

@selfthinker

Fixes #7975 - Remove invalid CSS for legacy browsers

Because of overlapping issues, this also reverts most of e77edc6 and fixes it in a different way. The original commit tried to fix it in core while the real issue was actually in the demo.

@selfthinker selfthinker Theme: removed or changed occurrences of zoom. Fixes #7975 - Remove i…
…nvalid CSS for legacy browsers

Because of overlapping issues, this also reverts most of e77edc6 and fixes it in a different way.
d649f33
@scottgonzalez

Thanks, can you just change the for IE7 comments to support: IE7? We use the support: format to document all browser-specific code so that it's easy to find when changing our level of support.

demos/button/toolbar.html
@@ -11,12 +11,8 @@
<link rel="stylesheet" href="../demos.css">
<style>
#toolbar {
- padding: 11px 4px 9px 4px;
- }
-
- /* support: IE7 */
- *:first-child+html #toolbar {
- padding: 4px 0px 4px 5px;
+ padding: 4px;
+ display: inline-block;
@mikesherov Collaborator

@selfthinker, I'm guessing you checked, how do these changes effect the toolbar demo in IE7. I literally just landed this so I want to be sure :-)

Yes, I've checked and my changes in toolbar.html fixes the same main issue that the toolbar background looked all weird.
Although the original code "fixed" one more issue (in the button css), i.e. that the buttons were not lined up properly, it also introduced a new bug that made every <button> with more than 1 word unusable (e.g. the button in the split button demo was running over 3 lines).

A further explanation what was the problem in the first place: The #toolbar is a span (for whatever reason) and therefore top and bottom paddings won't behave properly. By making it have a display of either "block" or "inline-block", it can properly contain its elements and can/should take the same top and bottom padding as the left and right padding.
(Ideally using a div instead of a span would make much more sense anyway.)

I have no idea why the padding of the #toolbar was changed for IE7. In all browsers there is a bit more space on the right than on the left, because every button has a right margin. In all IE versions it seems to be a bit more, but IE7 is not different to other IEs. Maybe it was before my fix, though.

If you'd like I can make screenshots before and after the fixes.

@scottgonzalez Owner

I'm not sure why it's a span either. We can certainly change it to a div if it'll help with styling.

It's not necessary for the styling as the display: inline-block; works the same for both divs and spans. It's just if it had been a div, it wouldn't have needed it in the first place. But a div makes much more sense for many other reasons.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@mikesherov
Collaborator

@selfthinker, thanks for following up here. this needs to be landed along with gh-851?

@selfthinker

Well, this and the other PR started out as two different things. But the fix for the toolbar demo got in between and concerns both. They don't necessarily need to land together. If they don't or the other comes first, the only downside is what I commented on gh-851 (i.e. toolbar spacing will look unbalanced).

@mikesherov
Collaborator

Ok, I'm going to land this then. Thanks!

@mikesherov
Collaborator

Thanks, landed in d7bff01. Can you please check to make sure I merged correctly, @selfthinker?

@mikesherov mikesherov closed this
@selfthinker

Yup, looking good. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Nov 29, 2012
  1. @selfthinker

    Theme: removed or changed occurrences of zoom. Fixes #7975 - Remove i…

    selfthinker authored
    …nvalid CSS for legacy browsers
    
    Because of overlapping issues, this also reverts most of e77edc6 and fixes it in a different way.
  2. @selfthinker
  3. @selfthinker
This page is out of date. Refresh to see the latest.
View
14 demos/button/toolbar.html
@@ -11,12 +11,12 @@
<link rel="stylesheet" href="../demos.css">
<style>
#toolbar {
- padding: 11px 4px 9px 4px;
+ padding: 4px;
+ display: inline-block;
}
-
/* support: IE7 */
- *:first-child+html #toolbar {
- padding: 4px 0px 4px 5px;
+ *+html #toolbar {
+ display: inline;
}
</style>
<script>
@@ -91,7 +91,7 @@
</head>
<body>
-<span id="toolbar" class="ui-widget-header ui-corner-all">
+<div id="toolbar" class="ui-widget-header ui-corner-all">
<button id="beginning">go to beginning</button>
<button id="rewind">rewind</button>
<button id="play">play</button>
@@ -106,12 +106,12 @@
<input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
<input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
</span>
-</span>
+</div>
<div class="demo-description">
<p>
A mediaplayer toolbar. Take a look at the underlying markup: A few button elements,
- an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.
+ an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.
</p>
</div>
</body>
View
3  themes/base/jquery.ui.accordion.css
@@ -14,7 +14,7 @@
position: relative;
margin-top: 2px;
padding: .5em .5em .5em .7em;
- zoom: 1;
+ min-height: 0; /* support: IE7 */
}
.ui-accordion .ui-accordion-icons {
padding-left: 2.2em;
@@ -35,5 +35,4 @@
padding: 1em 2.2em;
border-top: 0;
overflow: auto;
- zoom: 1;
}
View
3  themes/base/jquery.ui.button.css
@@ -15,7 +15,6 @@
margin-right: .1em;
cursor: pointer;
text-align: center;
- zoom: 1;
overflow: visible; /* removes extra width in IE */
}
.ui-button,
@@ -42,7 +41,7 @@ button.ui-button-icons-only {
/* button text element */
.ui-button .ui-button-text {
- display: inline-block;
+ display: block;
line-height: 1.4;
}
.ui-button-text-only .ui-button-text {
View
2  themes/base/jquery.ui.core.css
@@ -43,7 +43,7 @@
clear: both;
}
.ui-helper-clearfix {
- zoom: 1;
+ min-height: 0; /* support: IE7 */
}
.ui-helper-zfix {
width: 100%;
View
1  themes/base/jquery.ui.dialog.css
@@ -40,7 +40,6 @@
padding: .5em 1em;
background: none;
overflow: auto;
- zoom: 1;
}
.ui-dialog .ui-dialog-buttonpane {
text-align: left;
View
3  themes/base/jquery.ui.menu.css
@@ -22,7 +22,6 @@
.ui-menu .ui-menu-item {
margin: 0;
padding: 0;
- zoom: 1;
width: 100%;
}
.ui-menu .ui-menu-divider {
@@ -37,7 +36,7 @@
display: block;
padding: 2px .4em;
line-height: 1.5;
- zoom: 1;
+ min-height: 0; /* support: IE7 */
font-weight: normal;
}
.ui-menu .ui-menu-item a.ui-state-focus,
View
1  themes/base/jquery.ui.tabs.css
@@ -11,7 +11,6 @@
.ui-tabs {
position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
padding: .2em;
- zoom: 1;
}
.ui-tabs .ui-tabs-nav {
margin: 0;
View
5 themes/base/jquery.ui.theme.css
@@ -41,9 +41,10 @@
background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/;
color: #222222/*{fcHeader}*/;
font-weight: bold;
- zoom: 1;
}
-.ui-widget-header a { color: #222222/*{fcHeader}*/; }
+.ui-widget-header a {
+ color: #222222/*{fcHeader}*/;
+}
/* Interaction states
----------------------------------*/
Something went wrong with that request. Please try again.