diff --git a/STARTERKIT/STARTERKIT.info.txt b/STARTERKIT/STARTERKIT.info.txt index c311877..ef7910b 100644 --- a/STARTERKIT/STARTERKIT.info.txt +++ b/STARTERKIT/STARTERKIT.info.txt @@ -51,13 +51,13 @@ stylesheets[all][] = css/forms.css stylesheets[all][] = css/fields.css stylesheets[all][] = css/print.css -; Add conditional stylesheets that are processed by IE. See the css/README.txt. - -; To target all versions of IE with an ie.css, uncomment the following line: -;stylesheets-conditional[IE][all][] = css/ie.css -stylesheets-conditional[lte IE 7][all][] = css/ie7.css -stylesheets-conditional[lte IE 6][all][] = css/ie6.css - +; Conditional stylesheets have been removed since Zen 7.x-5.x +; Conditional comments have been moved to the html element, this method adds classes +; that can be used in your stylesheets such as .ie6 .ie6-7 etc. +; see Paul Irish's method for more information +; http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ +; If you wish to use conditional stylesheets, check out the conditional stylesheets module +; http://drupal.org/project/conditional_styles ; Optionally add some JavaScripts to your theme. diff --git a/STARTERKIT/css/ie6.css b/STARTERKIT/css/ie6.css deleted file mode 100644 index 17a2fdf..0000000 --- a/STARTERKIT/css/ie6.css +++ /dev/null @@ -1,83 +0,0 @@ -/** - * @file - * CSS targeted specifically for Internet Explorer 6 for Windows. - * - * Any CSS in this file will override the rules specified in the ie.css file. - * - * References: - * 1. http://www.positioniseverything.net/explorer/doubled-margin.html - * 2. http://browservulsel.blogspot.com/2005/04/ie-overflow-auto-scrollbar-overlap.html - * 3. http://www.howtocreate.co.uk/wrongWithIE/?chapter=overflow%3Avisible%3B - */ - - -/* - * Layout CSS - */ - -#main-wrapper { - zoom: 1; /* Otherwise with a liquid layout, sidebars disappear when resizing the windows in IE6 */ -} - -#content, -#navigation, -.region-sidebar-first, -.region-sidebar-second /* Floating divs */ { - display: inline; /* display inline or double your floated margin! [1] */ - overflow: hidden; /* in IE6, overflow auto is broken [2] and so is overflow visible [3] */ - overflow-y: visible; -} - -/* - * Tabs - IE6 doesn't support PNGs with alpha transparency. - */ - -ul.primary li a, -ul.primary li a .tab, -ul.secondary li a, -ul.secondary li a .tab { - display: inline-block; /* Otherwise the blocks mistakenly get 100% width in IE6 */ -} - -ul.primary li a { - background: url(../images/tab-left-ie6.png) no-repeat left -38px; -} - -ul.primary li a .tab { - background: url(../images/tab-right-ie6.png) no-repeat right -38px; -} - -ul.primary li a:hover, -ul.primary li a:focus { - background: url(../images/tab-left-ie6.png) no-repeat left -76px; -} - -ul.primary li a:hover .tab, -ul.primary li a:focus .tab { - background: url(../images/tab-right-ie6.png) no-repeat right -76px; -} - -ul.primary li.active a, -ul.primary li.active a:hover, -ul.primary li.active a:focus { - background: url(../images/tab-left-ie6.png) no-repeat left 0; -} - -ul.primary li.active a .tab, -ul.primary li.active a:hover .tab, -ul.primary li.active a:focus .tab { - background: url(../images/tab-right-ie6.png) no-repeat right 0; -} - -/* - * Wireframes - IE6 doesn't support the outline property. - */ -.with-wireframes #header .section, -.with-wireframes #content .section, -.with-wireframes #navigation .section, -.with-wireframes .region-sidebar-first .section, -.with-wireframes .region-sidebar-second .section, -.with-wireframes .region-footer, -.with-wireframes .region-bottom { - border: 1px solid #ccc; -} diff --git a/STARTERKIT/css/ie7.css b/STARTERKIT/css/ie7.css deleted file mode 100644 index ec8dc91..0000000 --- a/STARTERKIT/css/ie7.css +++ /dev/null @@ -1,39 +0,0 @@ -/** - * @file - * CSS targeted specifically for Internet Explorer 7 (and earlier) for Windows. - * - * Any CSS in this file will apply to all versions of IE before IE 8. You can - * target specific versions of IE by using conditional comments. See your - * sub-theme's .info file for an easy way to use them. - */ - - -/* - * Tabs - */ - -ul.primary li a, -ul.primary li a .tab, -ul.secondary li a, -ul.secondary li a .tab { - cursor: pointer; -} - -/* - * Drupal nodes - */ - -.node-unpublished>*, -.comment-unpublished>* { - position: relative; /* Otherwise these elements will appear below the "Unpublished" text. */ -} - -/* - * Drupal admin tables - */ -tr.even th, -tr.even td, -tr.odd th, -tr.odd td { - border-bottom: 1px solid #ccc; /* IE doesn't display borders on table rows */ -} diff --git a/STARTERKIT/css/layout-fixed.css b/STARTERKIT/css/layout-fixed.css index 633121e..21ec00c 100644 --- a/STARTERKIT/css/layout-fixed.css +++ b/STARTERKIT/css/layout-fixed.css @@ -56,6 +56,10 @@ body { position: relative; } +.ie6 #main-wrapper { + zoom: 1; /* Otherwise with a liquid layout, sidebars disappear when resizing the windows in IE6 */ +} + #main { } @@ -94,6 +98,15 @@ body { padding: 0; } +.ie6 #content, +.ie6 #navigation, +.ie6 .region-sidebar-first, +.ie6 .region-sidebar-second /* Floating divs */ { + display: inline; /* display inline or double your floated margin! [1] */ + overflow: hidden; /* in IE6, overflow auto is broken [2] and so is overflow visible [3] */ + overflow-y: visible; +} + /* * Navigation */ diff --git a/STARTERKIT/css/layout-liquid.css b/STARTERKIT/css/layout-liquid.css index b990f6c..50ca0d3 100644 --- a/STARTERKIT/css/layout-liquid.css +++ b/STARTERKIT/css/layout-liquid.css @@ -49,6 +49,10 @@ body { position: relative; } +.ie6 #main-wrapper { + zoom: 1; /* Otherwise with a liquid layout, sidebars disappear when resizing the windows in IE6 */ +} + #main { } @@ -84,6 +88,15 @@ body { padding-right: 200px; /* The width + right margin of .region-sidebar-second. */ } +.ie6 #content, +.ie6 #navigation, +.ie6 .region-sidebar-first, +.ie6 .region-sidebar-second /* Floating divs */ { + display: inline; /* display inline or double your floated margin! [1] */ + overflow: hidden; /* in IE6, overflow auto is broken [2] and so is overflow visible [3] */ + overflow-y: visible; +} + /* * Navigation */ diff --git a/STARTERKIT/css/nodes.css b/STARTERKIT/css/nodes.css index 6010d3e..8680616 100644 --- a/STARTERKIT/css/nodes.css +++ b/STARTERKIT/css/nodes.css @@ -5,7 +5,6 @@ * Style anything that isn't in the $content variable. */ - .node /* Node wrapper */ { } @@ -37,6 +36,12 @@ word-wrap: break-word; /* A very nice CSS3 property */ } +/* IE7 < fix */ +.ie6-7 .node-unpublished>*, +.ie6-7 .comment-unpublished>* { + position: relative; /* Otherwise these elements will appear below the "Unpublished" text. */ +} + .node-by-viewer /* A node created by the current user */ { } diff --git a/STARTERKIT/css/pages.css b/STARTERKIT/css/pages.css index 6e576f0..2c9ae76 100644 --- a/STARTERKIT/css/pages.css +++ b/STARTERKIT/css/pages.css @@ -126,6 +126,13 @@ tr.odd { /* background-color: #eee; */ /* Drupal core uses a #eee background */ } +.ie6-7 tr.even th, +.ie6-7 tr.even td, +.ie6-7 tr.odd th, +.ie6-7 tr.odd td { + border-bottom: 1px solid #ccc; /* IE doesn't display borders on table rows */ +} + div.messages /* Important messages (status, warning, and error) for the user. See also the declarations in messages.css. */ { margin: 1.5em 0; /* Drupal core uses "6px 0" margin */ } diff --git a/STARTERKIT/css/tabs.css b/STARTERKIT/css/tabs.css index db59568..2937550 100644 --- a/STARTERKIT/css/tabs.css +++ b/STARTERKIT/css/tabs.css @@ -126,3 +126,51 @@ ul.secondary a.active:focus { color: #000; background: url(../images/tab-secondary.png) repeat-x left top; } + +/* + * IE6 doesn't support PNGs with alpha transparency. + */ + +.ie6 ul.primary li a, +.ie6 ul.primary li a .tab, +.ie6 ul.secondary li a, +.ie6 ul.secondary li a .tab { + display: inline-block; /* Otherwise the blocks mistakenly get 100% width in IE6 */ +} + +.ie6 ul.primary li a { + background: url(../images/tab-left-ie6.png) no-repeat left -38px; +} + +.ie6 ul.primary li a .tab { + background: url(../images/tab-right-ie6.png) no-repeat right -38px; +} + +.ie6 ul.primary li a:hover, +.ie6 ul.primary li a:focus { + background: url(../images/tab-left-ie6.png) no-repeat left -76px; +} + +.ie6 ul.primary li a:hover .tab, +.ie6 ul.primary li a:focus .tab { + background: url(../images/tab-right-ie6.png) no-repeat right -76px; +} + +.ie6 ul.primary li.active a, +.ie6 ul.primary li.active a:hover, +.ie6 ul.primary li.active a:focus { + background: url(../images/tab-left-ie6.png) no-repeat left 0; +} + +.ie6 ul.primary li.active a .tab, +.ie6 ul.primary li.active a:hover .tab, +.ie6 ul.primary li.active a:focus .tab { + background: url(../images/tab-right-ie6.png) no-repeat right 0; +} + +.ie6-7 ul.primary li a, +.ie6-7 ul.primary li a .tab, +.ie6-7 ul.secondary li a, +.ie6-7 ul.secondary li a .tab { + cursor: pointer; +} diff --git a/STARTERKIT/css/wireframes.css b/STARTERKIT/css/wireframes.css index 4be67e9..ccd4fed 100644 --- a/STARTERKIT/css/wireframes.css +++ b/STARTERKIT/css/wireframes.css @@ -15,3 +15,16 @@ .with-wireframes .region-bottom { outline: 1px solid #ccc; } + +/* + * Wireframes - IE6/7 do not support the outline property. + */ +.ie6-7 .with-wireframes #header .section, +.ie6-7 .with-wireframes #content .section, +.ie6-7 .with-wireframes #navigation .section, +.ie6-7 .with-wireframes .region-sidebar-first .section, +.ie6-7 .with-wireframes .region-sidebar-second .section, +.ie6-7 .with-wireframes .region-footer, +.ie6-7 .with-wireframes .region-bottom { + border: 1px solid #ccc; +} \ No newline at end of file diff --git a/STARTERKIT/sass/_zen-columns.scss b/STARTERKIT/sass/_zen-columns.scss index 51e7e34..31b42f1 100644 --- a/STARTERKIT/sass/_zen-columns.scss +++ b/STARTERKIT/sass/_zen-columns.scss @@ -2,8 +2,6 @@ // Mixins for Zen Columns layout method. // -$legacy-support-for-ie6: true !default; - // // This mixin should be applied to a container so that the children elements @@ -48,6 +46,35 @@ $legacy-support-for-ie6: true !default; // $navbar-width must also be specified so that the width plus leading gutter // plus padding isn't greater than 100% of the container's width. // + +@mixin zen-columns-fixed-ie6 ( + // Information about the columns. + $selectors: ('.sidebar1', '.content', '.sidebar2'),$navbar-selector: false) { + // Apply rules to the container. + zoom: 1; // Otherwise with a liquid layout, sidebars disappear when resizing the windows in IE6. + $container-children: $selectors; + @if $navbar-selector { + $container-children: append($container-children, $navbar-selector); + } + // #{} interpolation doesn't work when converting lists into selectors, so + // convert the list into an unquoted string before using it. + $string: false; + @each $child in $container-children { + @if $string == false { + $string: unquote($child); + } + @else { + $string: unquote($string + ', ' + $child); + } + } + $container-children: $string; + #{$container-children} { + display: inline; // display inline or double your floated margin! [1] + overflow: hidden; // in IE6, overflow auto is broken [2] and so is overflow visible [3] + overflow-y: visible; + } +} + @mixin zen-columns-fixed ( // Information about the columns. $selectors: ('.sidebar1', '.content', '.sidebar2'), @@ -192,12 +219,6 @@ $legacy-support-for-ie6: true !default; } } - // Apply rules to the container. - position: relative; - @if $legacy-support-for-ie6 { - _zoom: 1; // Otherwise with a liquid layout, sidebars disappear when resizing the windows in IE6. - } - // Apply rules to the navbar. @if $navbar-selector { #{$navbar-selector} { @@ -213,12 +234,6 @@ $legacy-support-for-ie6: true !default; #{$container-children} { overflow: visible; word-wrap: break-word; // A very nice CSS3 property. - - @if $legacy-support-for-ie6 { - _display: inline; // display inline or double your floated margin! [1] - _overflow: hidden; // in IE6, overflow auto is broken [2] and so is overflow visible [3] - _overflow-y: visible; - } } } diff --git a/STARTERKIT/sass/ie6.scss b/STARTERKIT/sass/ie6.scss deleted file mode 100644 index 15650c6..0000000 --- a/STARTERKIT/sass/ie6.scss +++ /dev/null @@ -1,83 +0,0 @@ -// -// CSS targeted specifically for Internet Explorer 6 for Windows. -// -// Any CSS in this file will override the rules specified in the ie.css file. -// -// References: -// 1. http://www.positioniseverything.net/explorer/doubled-margin.html -// 2. http://browservulsel.blogspot.com/2005/04/ie-overflow-auto-scrollbar-overlap.html -// 3. http://www.howtocreate.co.uk/wrongWithIE/?chapter=overflow%3Avisible%3B -// - - -// -// Layout CSS -// -#main-wrapper { - zoom: 1; // Otherwise with a liquid layout, sidebars disappear when resizing the windows in IE6 -} - -#content, -#navigation, -.region-sidebar-first, -.region-sidebar-second { // Floating divs - display: inline; // display inline or double your floated margin! [1] - overflow: hidden; // in IE6, overflow auto is broken [2] and so is overflow visible [3] - overflow-y: visible; -} - - -// -// Tabs - IE6 doesn't support PNGs with alpha transparency. -// -ul.primary li, -ul.secondary li { - a, - a .tab { - display: inline-block; // Otherwise the blocks mistakenly get 100% width in IE6 - } -} - -ul.primary li { - - a { - background: url(../images/tab-left-ie6.png) no-repeat left -38px; - - .tab { - background: url(../images/tab-right-ie6.png) no-repeat right -38px; - } - - &:hover, - &:focus { - background: url(../images/tab-left-ie6.png) no-repeat left -76px; - - .tab { - background: url(../images/tab-right-ie6.png) no-repeat right -76px; - } - } - } - - &.active a, - &.active a:hover, - &.active a:focus { - background: url(../images/tab-left-ie6.png) no-repeat left 0; - - .tab { - background: url(../images/tab-right-ie6.png) no-repeat right 0; - } - } -} - - -// -// Wireframes - IE6 doesn't support the outline property. -// -.with-wireframes #header .section, -.with-wireframes #content .section, -.with-wireframes #navigation .section, -.with-wireframes .region-sidebar-first .section, -.with-wireframes .region-sidebar-second .section, -.with-wireframes .region-footer, -.with-wireframes .region-bottom { - border: 1px solid #ccc; -} diff --git a/STARTERKIT/sass/ie7.scss b/STARTERKIT/sass/ie7.scss deleted file mode 100644 index 43a805b..0000000 --- a/STARTERKIT/sass/ie7.scss +++ /dev/null @@ -1,31 +0,0 @@ -// -// CSS targeted specifically for Internet Explorer 7 (and earlier) for Windows. -// -// Any CSS in this file will apply to all versions of IE before IE 8. You can -// target specific versions of IE by using conditional comments. See your -// sub-theme's .info file for an easy way to use them. -// - - -// -// Tabs -// -ul.primary li, -ul.secondary li { - a, - a .tab { - cursor: pointer; - } -} - - -// -// Drupal admin tables -// -tr.even, -tr.odd { - th, - td { - border-bottom: 1px solid #ccc; // IE doesn't display borders on table rows - } -} diff --git a/STARTERKIT/sass/layout-fixed.scss b/STARTERKIT/sass/layout-fixed.scss index 888c210..f54d245 100644 --- a/STARTERKIT/sass/layout-fixed.scss +++ b/STARTERKIT/sass/layout-fixed.scss @@ -96,6 +96,15 @@ body { ); } +@if $legacy-support-for-ie6 { + .ie6 .sidebar-first #main { + @include zen-columns-fixed-ie6 ( + $selectors: ('.region-sidebar-first', '#content'), + $navbar-selector: '#navigation' + ); + } +} + // The layout when there is only one sidebar, the right one. .sidebar-second #main { @include zen-columns-fixed ( @@ -115,6 +124,15 @@ body { ); } +@if $legacy-support-for-ie6 { + .ie6 .sidebar-second #main { + @include zen-columns-fixed-ie6 ( + $selectors: ('#content', '.region-sidebar-second'), + $navbar-selector: '#navigation' + ); + } +} + // The layout when there are two sidebars. .two-sidebars #main { @include zen-columns-fixed ( @@ -134,8 +152,14 @@ body { ); } - - +@if $legacy-support-for-ie6 { + .ie6 .two-sidebars #main { + @include zen-columns-fixed-ie6 ( + $selectors: ('.region-sidebar-first', '#content', '.region-sidebar-second'), + $navbar-selector: '#navigation' + ); + } +} // // Footer diff --git a/STARTERKIT/sass/pages.scss b/STARTERKIT/sass/pages.scss index bb42b42..3ec79a3 100644 --- a/STARTERKIT/sass/pages.scss +++ b/STARTERKIT/sass/pages.scss @@ -6,6 +6,7 @@ // ul.links, .pager, .more-link, etc. // +@import "base"; // // Body @@ -130,6 +131,16 @@ tr.odd { // background-color: #eee; // Drupal core uses a #eee background } +@if $legacy-support-for-ie7 { + .ie6-7 tr.even, + .ie6-7 tr.odd { + th, + td { + border-bottom: 1px solid #ccc; // IE doesn't display borders on table rows + } + } +} + div.messages { // Important messages (status, warning, and error) for the user. See also the declarations in messages.css. margin: 1.5em 0; // Drupal core uses "6px 0" margin diff --git a/STARTERKIT/sass/tabs.scss b/STARTERKIT/sass/tabs.scss index b6ea8eb..b0eccab 100644 --- a/STARTERKIT/sass/tabs.scss +++ b/STARTERKIT/sass/tabs.scss @@ -7,6 +7,7 @@ // of which is in drupal6-reference.css, line 510.) // +@import "base"; div.tabs { margin: 0 0 5px 0; @@ -122,3 +123,62 @@ ul.secondary { } } } + +// +// Tabs - IE6 doesn't support PNGs with alpha transparency. +// + +@if $legacy-support-for-ie6 { + .ie6 ul.primary li, + .ie6 ul.secondary li { + a, + a .tab { + display: inline-block; // Otherwise the blocks mistakenly get 100% width in IE6 + } + } + + + .ie6 ul.primary li { + + a { + background: url(../images/tab-left-ie6.png) no-repeat left -38px; + + .tab { + background: url(../images/tab-right-ie6.png) no-repeat right -38px; + } + + &:hover, + &:focus { + background: url(../images/tab-left-ie6.png) no-repeat left -76px; + + .tab { + background: url(../images/tab-right-ie6.png) no-repeat right -76px; + } + } + } + + &.active a, + &.active a:hover, + &.active a:focus { + background: url(../images/tab-left-ie6.png) no-repeat left 0; + + .tab { + background: url(../images/tab-right-ie6.png) no-repeat right 0; + } + } + } +} + +// +// Tabs +// + +@if $legacy-support-for-ie7 { + .ie6-7 ul.primary li, + .ie6-7 ul.secondary li { + a, + a .tab { + cursor: pointer; + } + } +} \ No newline at end of file diff --git a/STARTERKIT/sass/wireframes.scss b/STARTERKIT/sass/wireframes.scss index 33990a8..3df5a22 100644 --- a/STARTERKIT/sass/wireframes.scss +++ b/STARTERKIT/sass/wireframes.scss @@ -4,6 +4,7 @@ // Add wireframes to the basic layout elements. // +@import "base"; .with-wireframes { #header .section, @@ -16,3 +17,21 @@ outline: 1px solid #ccc; } } + +// +// Wireframes - IE6/7 do not support the outline property. +// + +@if $legacy-support-for-ie6 { + .ie6 .with-wireframes { + #header .section, + #content .section, + #navigation .section, + .region-sidebar-first .section, + .region-sidebar-second .section, + .region-footer, + .region-bottom { + border: 1px solid #ccc; + } + } +} \ No newline at end of file