diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss
index 38fa4d8c0..7a976c6c3 100644
--- a/app/assets/stylesheets/components/banner.scss
+++ b/app/assets/stylesheets/components/banner.scss
@@ -167,6 +167,18 @@
 
   }
 
+  .greyed-out-step {
+
+    $opacity: 0.6;
+
+    opacity: $opacity;
+
+    @include ie-lte(8) {
+      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + ($opacity * 100) + ")";
+    }
+
+  }
+
 }
 
 .banner-warning {
diff --git a/app/templates/main_nav.html b/app/templates/main_nav.html
index 7305fb577..fcbd6ad10 100644
--- a/app/templates/main_nav.html
+++ b/app/templates/main_nav.html
@@ -3,7 +3,7 @@
 {% if help %}
   {% call banner_wrapper(type='tour') %}
       <p class="heading-medium">Try sending yourself this example</p>
-      <div class="grid-row bottom-gutter" {% if help != '1' %}style="opacity: 0.6"{% endif %}>
+      <div class="grid-row bottom-gutter {% if help != '1' %}greyed-out-step{% endif %}">
         <div class="column-one-sixth">
           <p class="heading-large" style="float: left;">1.</p>
         </div>
@@ -13,7 +13,7 @@
           </p>
         </div>
       </div>
-      <div class="grid-row bottom-gutter" {% if help != '2' %}style="opacity: 0.6"{% endif %}>
+      <div class="grid-row bottom-gutter {% if help != '2' %}greyed-out-step{% endif %}">
         <div class="column-one-sixth">
           <p class="heading-large">2.</p>
         </div>
@@ -23,7 +23,7 @@
           </p>
         </div>
       </div>
-      <div class="grid-row bottom-gutter" {% if help != '3' %}style="opacity: 0.6"{% endif %}>
+      <div class="grid-row bottom-gutter {% if help != '3' %}greyed-out-step{% endif %}">
         <div class="column-one-sixth">
           <p class="heading-large">3.</p>
         </div>