Merge pull request #216 from rschamp/bugfix/GH-128

Fix GH-128: Use table layout in IE 9 for navigation and homepage

src/components/navigation/navigation.scss

@@ -16,6 +16,11 @@
     /* NOTE: Height should match offset settings in main.scss file */
     height: 50px;
 
+    .ie9 & {
+        display: table;
+        table-layout: fixed;
+    }
+
     .inner > ul {
         display: flex;
         margin: 0;
@@ -27,6 +32,10 @@
         flex-direction: row;
         justify-content: flex-start;
 
+        .ie9 & {
+            display: table-row;
+        }
+        
 
         > li {
             display: inline-block;
@@ -34,6 +43,13 @@
             float: left;
             height: 100%;
             align-self: flex-start;
+
+            .ie9 & {
+                display: table-cell;
+                float: none;
+                height: 50px;
+                vertical-align: bottom;
+            }
         }
 
         .logo {
@@ -83,6 +99,10 @@
             color: $type-white;
             flex-grow: 3;
 
+            .ie9 & {
+                width: 100%;
+            }
+
             form {
                 margin: 0;
             }
@@ -140,6 +160,10 @@
             margin-left: auto;
             align-self: flex-end;
 
+            .ie9 & {
+                float: none;
+            }
+
             a:hover {
                 background-color: $active-gray;
             }
@@ -202,10 +226,13 @@
         .account-nav {
             .userInfo {
                 padding-top: 14px;
-                padding-bottom: 3px;
+                max-width: 260px;
             }
 
             > a {
+                display: inline-block;
+                overflow: hidden;
+                text-overflow: ellipsis;
                 font-size: .8125rem;
                 font-weight: normal;
 

src/views/splash/splash.scss

@@ -5,13 +5,24 @@
         flex-wrap: nowrap;
         justify-content: space-between;
 
+        .ie9 & {
+            display: table;
+            margin: 0 -20px 20px -20px;
+            min-width: 100%;
+            border-spacing: 20px 0;
+        }
+
         .box {
             display: inline-block;
             width: calc(60% - 20px);
+
+            .ie9 & {
+                display: table-cell;
+                vertical-align: top;
+            }
         }
 
         .news {
-            display: inline-block;
             width: 40%;
         }
     }