Fixed widths for IE <= 7 as it doesn't use box-model

Conflicts:

    app/assets/stylesheets/responsive/_utils.css

13 files changed, 116 insertions, 1 deletions

diff --git a/app/assets/stylesheets/responsive/_attachments_layout.scss b/app/assets/stylesheets/responsive/_attachments_layout.scss
index cda00213d..1eedc601b 100644
--- a/app/assets/stylesheets/responsive/_attachments_layout.scss
+++ b/app/assets/stylesheets/responsive/_attachments_layout.scss
@@ -26,6 +26,7 @@
   @include ie8{
     padding-left: 0.9375em;
     padding-right: 0.9375em;
+    width: $main_menu-mobile_menu_cutoff;
   }
 
   .view_html_logo {
diff --git a/app/assets/stylesheets/responsive/_categorization_game_layout.scss b/app/assets/stylesheets/responsive/_categorization_game_layout.scss
index c0d612ce1..138dfe005 100644
--- a/app/assets/stylesheets/responsive/_categorization_game_layout.scss
+++ b/app/assets/stylesheets/responsive/_categorization_game_layout.scss
@@ -11,6 +11,9 @@
     @include ie8{
       padding-left: 0.9375em;
     }
+    @include lte-ie7 {
+      width: 17.438em;
+    }
   }
 }
 
@@ -21,6 +24,9 @@
     @include ie8{
       padding-right: 0.9375em;
     }
+    @include lte-ie7 {
+      width: 36.813em;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/responsive/_frontpage_layout.scss b/app/assets/stylesheets/responsive/_frontpage_layout.scss
index 24a2b21b9..4559c0f6d 100644
--- a/app/assets/stylesheets/responsive/_frontpage_layout.scss
+++ b/app/assets/stylesheets/responsive/_frontpage_layout.scss
@@ -14,6 +14,9 @@
       @include ie8{
         padding-right: 0.9375em;
       }
+      @include lte-ie7{
+        width: 36.813em;
+      }
     }
   }
 
@@ -25,6 +28,9 @@
       @include ie8{
         padding-left: 0.9375em;
       }
+      @include lte-ie7{
+        width: 17.438em;
+      }
     }
 
     input[type=text] {
@@ -57,6 +63,9 @@
       @include ie8{
         padding-right: 0.9375em;
       }
+      @include lte-ie7{
+        width: 27.125em;
+      }
     }
   }
 
@@ -67,6 +76,9 @@
       @include ie8{
         padding-left: 0.9375em;
       }
+      @include lte-ie7{
+        width: 27.125em;
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/responsive/_global_layout.scss b/app/assets/stylesheets/responsive/_global_layout.scss
index 4a04b15fc..d7b24df41 100644
--- a/app/assets/stylesheets/responsive/_global_layout.scss
+++ b/app/assets/stylesheets/responsive/_global_layout.scss
@@ -13,6 +13,9 @@
     padding-left: 0.9375em;
     padding-right: 0.9375em;
   }
+  @include lte-ie7 {
+    width: 56.125em;
+  }
 }
 
 
@@ -43,6 +46,9 @@ textarea{
     @include ie8{
       padding-left: 0.9375em;
     }
+    @include lte-ie7 {
+      width: 17.438em;
+    }
   }
 }
 
@@ -53,6 +59,9 @@ textarea{
     @include ie8{
       padding-right: 0.9375em;
     }
+    @include lte-ie7 {
+      width: 36.813em;
+    }
   }
 }
 
@@ -61,6 +70,9 @@ textarea{
   @include grid-column(12);
   @include respond-min( $main_menu-mobile_menu_cutoff ){
     @include grid-column(9);
+    @include lte-ie7 {
+      width: 41.625em;
+    }
   }
 }
 
@@ -69,6 +81,9 @@ textarea{
   @include respond-min( $main_menu-mobile_menu_cutoff ){
     @include grid-column($columns:3);
     margin-top:20px;
+    @include lte-ie7 {
+      width: 12.625em;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/responsive/_header_layout.scss b/app/assets/stylesheets/responsive/_header_layout.scss
index d35107bf2..415eaaea1 100644
--- a/app/assets/stylesheets/responsive/_header_layout.scss
+++ b/app/assets/stylesheets/responsive/_header_layout.scss
@@ -39,6 +39,9 @@
         @include respond-min( $main_menu-mobile_menu_cutoff ){
           padding: 1em;
           margin-bottom: 1em;
+          @include lte-ie7 {
+              width: 17.313em;
+          }
         }
     }
 
@@ -104,6 +107,9 @@
         @include respond-min( $main_menu-mobile_menu_cutoff ){
           display: inline-block;
         }
+        @include lte-ie7 {
+          display: inline;
+        }
     }
     a{
       padding: 0.5em 1em;
@@ -123,10 +129,16 @@
   form{
         @include grid-row;
         padding-right: 1em;
+        @include lte-ie7 {
+           display: inline;
+        }
     }
     input{
         @include grid-column($columns:9);
         margin:0;
+        @include lte-ie7 {
+     width: 10.063em;
+        }
     }
     label{
         @include prefix-postfix-base;
@@ -135,6 +147,9 @@
         img{
             max-width: 100%;
         }
+        @include lte-ie7 {
+           width: 2.125em;
+        }
     }
 }
 
@@ -145,6 +160,9 @@
           padding-left: 0.9375em;
           padding-right: 0.9375em;
         }
+        @include lte-ie7 {
+           width: 36.813em;
+        }
     }
 
     a, .greeting {
diff --git a/app/assets/stylesheets/responsive/_lists_layout.scss b/app/assets/stylesheets/responsive/_lists_layout.scss
index 5a8072601..2f8171fba 100644
--- a/app/assets/stylesheets/responsive/_lists_layout.scss
+++ b/app/assets/stylesheets/responsive/_lists_layout.scss
@@ -50,6 +50,9 @@
       @include ie8{
         padding-left: 0.9375em;
       }
+      @include lte-ie7 {
+        width: 17.438em;
+      }
     }
   }
 
@@ -60,6 +63,9 @@
       @include ie8{
         padding-right: 0.9375em;
       }
+      @include lte-ie7 {
+        width: 36.813em;
+      }
     }
   }
 
@@ -67,6 +73,9 @@
     width:100%;
     @include respond-min( $main_menu-mobile_menu_cutoff ){
       padding:0 0 0 2em;
+      @include lte-ie7 {
+        padding: 0;
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/responsive/_new_request_layout.scss b/app/assets/stylesheets/responsive/_new_request_layout.scss
index 8ace3b269..eec95ae77 100644
--- a/app/assets/stylesheets/responsive/_new_request_layout.scss
+++ b/app/assets/stylesheets/responsive/_new_request_layout.scss
@@ -8,6 +8,9 @@
     @include ie8{
       padding-right: 0.9375em;
     }
+    @include lte-ie7 {
+      width: 27.125em;
+    }
   }
 }
 
@@ -23,6 +26,9 @@
     @include ie8{
       padding-right: 0.9375em;
     }
+    @include lte-ie7 {
+      width: 26.188em;
+    }
   }
 
   /* Hide some elements of the public body that aren't appropriate in this
@@ -59,6 +65,9 @@
       @include ie8{
         padding-right: 0.9375em;
       }
+      @include lte-ie7 {
+        width: 36.813em;
+      }
     }
   }
 
@@ -77,6 +86,9 @@
     @include ie8{
       padding-left: 0.9375em;
     }
+    @include lte-ie7 {
+      width: 17.438em;
+    }
   }
 }
 
@@ -88,6 +100,9 @@
     @include ie8{
       padding-right: 0.9375em;
     }
+    @include lte-ie7 {
+      width: 36.813em;
+    }
   }
 
 }
@@ -111,6 +126,9 @@ div.batch_public_body_toggle {
     @include respond-min( $main_menu-mobile_menu_cutoff ){
        @include grid-column(5);
      }
+     @include lte-ie7 {
+       width: 22.313em;
+     }
   }
 
   select {
diff --git a/app/assets/stylesheets/responsive/_request_layout.scss b/app/assets/stylesheets/responsive/_request_layout.scss
index cb0a256f7..86544a18b 100644
--- a/app/assets/stylesheets/responsive/_request_layout.scss
+++ b/app/assets/stylesheets/responsive/_request_layout.scss
@@ -20,6 +20,9 @@
       @include ie8{
         padding-right: 0.9375em;
       }
+      @include lte-ie7 {
+        width: 41.625em;
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/responsive/_signin_layout.scss b/app/assets/stylesheets/responsive/_signin_layout.scss
index f9826d0dd..43591a16b 100644
--- a/app/assets/stylesheets/responsive/_signin_layout.scss
+++ b/app/assets/stylesheets/responsive/_signin_layout.scss
@@ -10,6 +10,9 @@
     @include ie8{
       padding-right: 0.9375em;
     }
+    @include lte-ie7 {
+      width: 22.313em;
+    }
   }
 }
 
@@ -20,6 +23,9 @@
     @include ie8{
       padding-left: 0.9375em;
     }
+    @include lte-ie7 {
+      width: 22.313em;
+    }
   }
 }
 
@@ -31,6 +37,9 @@
       padding-left: 0.9375em;
       padding-right: 0.9375em;
     }
+    @include lte-ie7 {
+      width: 7.438em;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/responsive/_utils.css b/app/assets/stylesheets/responsive/_utils.css
index debc19ab1..68884fa7a 100644
--- a/app/assets/stylesheets/responsive/_utils.css
+++ b/app/assets/stylesheets/responsive/_utils.css
@@ -18,10 +18,18 @@ $fix-mqs: false !default;
 }
 
 $ie8: false !default;
+$lte-ie7: false !default;
 
 @mixin ie8 {
-    // Only use this content if we're dealing with old IE
+    // Only use this content if we're dealing with IE8
     @if $ie8 {
         @content;
     }
 }
+
+@mixin lte-ie7 {
+    // Only use this content if we're dealing with oldest IE (<= 7)
+    @if $lte-ie7 {
+        @content;
+    }
+}
diff --git a/app/assets/stylesheets/responsive/application-lte-ie7.css b/app/assets/stylesheets/responsive/application-lte-ie7.css
new file mode 100644
index 000000000..7bb9a1c73
--- /dev/null
+++ b/app/assets/stylesheets/responsive/application-lte-ie7.css
@@ -0,0 +1,8 @@
+/* ...
+*= require_self
+*= require normalize
+*= require responsive/lte-ie7
+*= require responsive/custom
+*= require jquery.ui.datepicker
+*= require jquery.ui.tabs
+*/
diff --git a/app/assets/stylesheets/responsive/lte-ie7.scss b/app/assets/stylesheets/responsive/lte-ie7.scss
new file mode 100644
index 000000000..b1519d6f0
--- /dev/null
+++ b/app/assets/stylesheets/responsive/lte-ie7.scss
@@ -0,0 +1,4 @@
+$lte-ie7: true;
+$ie8: true;
+$fix-mqs: 58em;
+@import 'all';
diff --git a/app/views/general/_responsive_stylesheets.html.erb b/app/views/general/_responsive_stylesheets.html.erb
index 89625ec6c..e3c3660c4 100644
--- a/app/views/general/_responsive_stylesheets.html.erb
+++ b/app/views/general/_responsive_stylesheets.html.erb
@@ -1,3 +1,7 @@
+<!--[if LTE IE 7]>
+<%= stylesheet_link_tag 'responsive/application-lte-ie7', :title => "Main", :rel => "stylesheet", :media => "all"  %>
+<![endif]-->
+
 <!--[if IE 8]>
 <%= stylesheet_link_tag 'responsive/application-ie8', :title => "Main", :rel => "stylesheet", :media => "all" %>
 <![endif]-->