Improve vertical alignment of #main-nav in IE9-11

9 files changed, 98 insertions, 7 deletions

diff --git a/web/cobrands/bristol/layout.scss b/web/cobrands/bristol/layout.scss
index 7000e8277..5296261a2 100644
--- a/web/cobrands/bristol/layout.scss
+++ b/web/cobrands/bristol/layout.scss
@@ -8,6 +8,12 @@
 
 #main-nav {
   float: none;
+  margin-top: 7em; // Put the main FMS navigation below the Bristol header
+
+  .ie9 & > * {
+    #{$right}: auto;
+    #{$left}: 0;
+  }
 }
 
 body.frontpage, body.twothirdswidthpage, body.fullwidthpage, body.authpage {
@@ -64,9 +70,6 @@ body.frontpage, body.twothirdswidthpage, body.fullwidthpage, body.authpage {
   }
 
   .nav-menu {
-    // Put the main FMS navigation below the Bristol header
-    margin-top: 7.25em;
-
     a, span {
       display: inline-block; // So the chevrons appear correctly
       font-size: 1.2em;
@@ -105,7 +108,18 @@ body.mappage {
 
   // Reinstate the floated nav bar on map pages
   #main-nav {
-    float: right;
+    float: #{$right};
+    margin-top: 0;
+
+    // IE9 uses absolute positioning rather than floats.
+    .ie9 & {
+      float: none;
+
+      & > * {
+        #{$right}: 0;
+        #{$left}: auto;
+      }
+    }
   }
 
   // A few changes to the nav items now they're on a black background
diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss
index ded53367f..d53ff351a 100644
--- a/web/cobrands/bromley/layout.scss
+++ b/web/cobrands/bromley/layout.scss
@@ -23,6 +23,11 @@ body.mappage {
   display: block; // remove flex so nav touches top of parent
   min-height: 0; // no vertical align, so no need for a height
   margin-top: 0; // don't bother overlapping the border
+
+  .ie9 & > * {
+    position: static;
+    -ms-transform: none;
+  }
 }
 
 // Override the FMS main menu to give it a background colour
diff --git a/web/cobrands/buckinghamshire/layout.scss b/web/cobrands/buckinghamshire/layout.scss
index 4a37bb183..4f511bcd9 100644
--- a/web/cobrands/buckinghamshire/layout.scss
+++ b/web/cobrands/buckinghamshire/layout.scss
@@ -35,7 +35,12 @@ body.frontpage, body.twothirdswidthpage, body.fullwidthpage, body.authpage {
 
   #main-nav {
     float: left;
-    min-height: 0;
+    min-height: 3em;
+
+    .ie9 & > * {
+      position: static;
+      -ms-transform: none;
+    }
   }
 
   .nav-menu {
diff --git a/web/cobrands/eastherts/layout.scss b/web/cobrands/eastherts/layout.scss
index cb3a616bf..cf01b9db3 100644
--- a/web/cobrands/eastherts/layout.scss
+++ b/web/cobrands/eastherts/layout.scss
@@ -15,6 +15,10 @@
     width: 100%;
     float: none;
     min-height: 0;
+
+    .ie9 & > * {
+      -ms-transform: none;
+    }
 }
 
 // And make it look the same
diff --git a/web/cobrands/fiksgatami/layout.scss b/web/cobrands/fiksgatami/layout.scss
index 52cffc00a..17aa3b6b1 100644
--- a/web/cobrands/fiksgatami/layout.scss
+++ b/web/cobrands/fiksgatami/layout.scss
@@ -5,6 +5,17 @@
   display: block; // remove flex so nav touches top of parent
   min-height: 0; // no vertical align, so no need for a height
   margin-top: 0; // don't bother overlapping the border
+  height: auto;
+
+  .ie9 & {
+    position: static;
+    float: $right;
+
+    & > * {
+        position: static;
+        -ms-transform: none;
+    }
+  }
 }
 
 .nav-menu--mysoc {
diff --git a/web/cobrands/hart/layout.scss b/web/cobrands/hart/layout.scss
index 0358aca87..83afd59a7 100644
--- a/web/cobrands/hart/layout.scss
+++ b/web/cobrands/hart/layout.scss
@@ -34,7 +34,7 @@ body.twothirdswidthpage .content {
     margin: 0;
 }
 
-// Menu *in* the header, pushed down from top
+// "Home | My Services | Residents" etc menu *in* the header
 .nav-menu--hart {
   margin-left: 157px;
   position: relative;
@@ -80,6 +80,7 @@ body.twothirdswidthpage .content {
     float: none;
     margin: 11em auto 0; // To push it under header
     background-color: #fff;
+    height: auto;
 
     // #main-nav acts a bit like a .container, so we give it the same max-width.
     max-width: $container-max-width;
@@ -88,10 +89,21 @@ body.twothirdswidthpage .content {
     body.mappage & {
         max-width: none;
     }
+
+    .ie9 & {
+        position: static;
+
+        & > * {
+            position: static;
+            -ms-transform: none;
+        }
+    }
 }
 
+// FixMyStreet "Report a problem | Sign in | All reports" etc menu
 .nav-menu--first {
     padding: 0.25em 0;
+    float: none;
 
     li {
       float: left;
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 1b28b28b9..1092b5017 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -55,6 +55,7 @@ h1 {
 
 #main-nav {
   min-height: $mappage-header-height; // defaults to map header height; should be height of #site-header (eg: #site-logo + any vertical padding)
+  height: 1px; // flex `align-items: center` doesn't work in IE10 and IE11 unless flex container has an explicit height (even when min-height means this explicit height gets ignored!)
   @include flex-container();
   @include flex-align(center);
   float: $right; // we could use justify-content here, but float degrades better for non-flexbox browsers
@@ -62,6 +63,19 @@ h1 {
   @if ($header-top-border) {
     margin-top: $header-top-border-width * -1; // visually compensate for border on #site-header
   }
+
+  // No flexbox in IE9, so replace `align-items: center` with absolute positioning
+  .ie9 & {
+    position: relative;
+    float: none;
+
+    & > * {
+        position: absolute;
+        top: 50%;
+        #{$right}: 0;
+        -ms-transform: translate(0, -50%);
+    }
+  }
 }
 
 #site-logo {
diff --git a/web/cobrands/stevenage/layout.scss b/web/cobrands/stevenage/layout.scss
index 4d045f00a..9b47d8287 100644
--- a/web/cobrands/stevenage/layout.scss
+++ b/web/cobrands/stevenage/layout.scss
@@ -28,6 +28,11 @@
     min-height: 1.9em; // Should be 0, but IE8 shrinks background as if floated, then
     margin-top: 0;
     float: none;
+
+    .ie9 & > * {
+        #{$right}: auto;
+        #{$left}: 0;
+    }
 }
 
 .nav-menu {
@@ -119,8 +124,17 @@ body.mappage {
 
     // Override the defaults, above
     #main-nav {
-        float: right;
+        float: $right;
         min-height: $mappage-header-height;
+
+        .ie9 & {
+            float: none;
+
+            & > * {
+                #{$right}: 0;
+                #{$left}: auto;
+            }
+        }
     }
 
     .nav-menu a {
diff --git a/web/cobrands/warwickshire/layout.scss b/web/cobrands/warwickshire/layout.scss
index 53ec9e4b7..c6482e4b6 100644
--- a/web/cobrands/warwickshire/layout.scss
+++ b/web/cobrands/warwickshire/layout.scss
@@ -21,8 +21,20 @@ body.twothirdswidthpage .content .sticky-sidebar {
 #main-nav {
     text-align: inherit;
     min-height: 0;
+    height: auto;
     display: block; // undo flex-container()
     float: none;
+
+    .ie9 & {
+        position: static;
+        float: none;
+        text-align: $left;
+
+        & > * {
+            position: static;
+            -ms-transform: none;
+        }
+    }
 }
 
 body.mappage {