Making IE7 support a little more "bulletproof." Also, added <main> ta…

…g support to the _reset.sass file.
nathansmith · Feb 8, 2013 · bb1a9f1 · bb1a9f1
1 parent e82cacf
commit bb1a9f1
Show file tree

Hide file tree

Showing 14 changed files with 847 additions and 767 deletions.
diff --git a/assets/javascripts/html5.js b/assets/javascripts/html5.js
diff --git a/assets/sass/partials/_reset.sass b/assets/sass/partials/_reset.sass
@@ -52,6 +52,7 @@ kbd,
 label,
 legend,
 li,
+main,
 mark,
 menu,
 meter,
@@ -107,6 +108,7 @@ figure,
 footer,
 header,
 hgroup,
+main,
 menu,
 nav,
 section
@@ -132,13 +134,13 @@ img
   // http://css-tricks.com/ie-fix-bicubic-scaling-for-images
   -ms-interpolation-mode: bicubic
 
-ol,
-ul
+ul,
+ol
   list-style: none
 
 li
   // For IE6 + IE7:
-  // 
+  //
   // "display: list-item" keeps bullets from
   // disappearing if hasLayout is triggered.
   display: list-item
@@ -159,7 +161,7 @@ q
 
 q:before,
 q:after
-  content: ''
+  content: ""
   content: none
 
 sub,

diff --git a/assets/sass/partials/_unsemantic-vars.sass b/assets/sass/partials/_unsemantic-vars.sass
@@ -23,9 +23,7 @@ $unsemantic-ie7-support: true !default
 
 $container-max-width: 1200px !default
 
-$gutter-half-num: 10 !default
-
-$gutter-half: #{$gutter-half-num}px !default
+$gutter-half: 10px !default
 
 $lang-forward: left !default
 
@@ -99,8 +97,8 @@ $lang-reverse: right !default
     //     for browsers that support box-sizing.
     & > *
       /* <IE7> */
-      *margin-left: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === "block") && "#{$gutter-half}")
-      *margin-right: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === "block") && "#{$gutter-half}")
+      *margin-left: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === "block" && this.currentStyle.width === "auto") && "#{$gutter-half}")
+      *margin-right: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === "block" && this.currentStyle.width === "auto") && "#{$gutter-half}")
       /* </IE7> */
 
 // `Push & Pull, to rearrange column order (for potential "SEO").
@@ -143,7 +141,7 @@ $lang-reverse: right !default
 
     @if $unsemantic-ie7-support == true
       /* <IE7> */
-      *width: expression(Math.floor(#{$decimal} * (this.parentNode.offsetWidth - #{$gutter-half-num * 2})) + "px")
+      *width: expression(Math.floor(#{$decimal} * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px")
       /* </IE7> */
 
   %prefix-#{$num}
@@ -157,15 +155,15 @@ $lang-reverse: right !default
 
     @if $unsemantic-ie7-support == true
       /* <IE7> */
-      *#{$lang-forward}: expression(Math.floor(#{$decimal} * (this.parentNode.offsetWidth - #{$gutter-half-num * 2})) + "px")
+      *#{$lang-forward}: expression(Math.floor(#{$decimal} * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px")
       /* </IE7> */
 
   %pull-#{$num}
     #{$lang-forward}: $percent * -1
 
     @if $unsemantic-ie7-support == true
       /* <IE7> */
-      *#{$lang-forward}: expression(Math.floor(#{$decimal * -1} * (this.parentNode.offsetWidth - #{$gutter-half-num * 2})) + "px")
+      *#{$lang-forward}: expression(Math.floor(#{$decimal * -1} * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px")
       /* </IE7> */
 
 //
@@ -183,6 +181,11 @@ $lang-reverse: right !default
     @extend %grid-columns
     width: $percent
 
+    @if $unsemantic-ie7-support == true
+      /* <IE7> */
+      *width: expression(Math.floor(#{$decimal} * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px")
+      /* </IE7> */
+
   // Prefix, to add extra columns before.
   %prefix-#{$num}
     margin-#{$lang-forward}: $percent
@@ -197,15 +200,15 @@ $lang-reverse: right !default
 
     @if $unsemantic-ie7-support == true
       /* <IE7> */
-      *#{$lang-forward}: expression(Math.floor(#{$decimal} * (this.parentNode.offsetWidth - #{$gutter-half-num * 2})) + "px")
+      *#{$lang-forward}: expression(Math.floor(#{$decimal} * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px")
       /* </IE7> */
 
   %pull-#{$num}
     #{$lang-forward}: $percent * -1
 
     @if $unsemantic-ie7-support == true
       /* <IE7> */
-      *#{$lang-forward}: expression(Math.floor(#{$decimal * -1} * (this.parentNode.offsetWidth - #{$gutter-half-num * 2})) + "px")
+      *#{$lang-forward}: expression(Math.floor(#{$decimal * -1} * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px")
       /* </IE7> */
 
 //

diff --git a/assets/stylesheets/demo.css b/assets/stylesheets/demo.css
@@ -49,6 +49,7 @@ kbd,
 label,
 legend,
 li,
+main,
 mark,
 menu,
 meter,
@@ -106,6 +107,7 @@ figure,
 footer,
 header,
 hgroup,
+main,
 menu,
 nav,
 section {
@@ -124,8 +126,8 @@ img {
   -ms-interpolation-mode: bicubic;
 }
 
-ol,
-ul {
+ul,
+ol {
   list-style: none;
 }