Merge pull request #941 from alphagov/mb-sidebar-taxon-title-underline

Workaround for IE8 bug on related link bullet points
alphagov · Mar 9, 2017 · cc256d0 · cc256d0
2 parents 6e11b83 + b68a267
commit cc256d0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss b/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss
@@ -22,8 +22,14 @@
       list-style-type: none;
       line-height: 1.5;
 
+      // We use a pseudo element to add bullet points to related links. This
+      // makes the bullets clickable and highlights them on link hover. With
+      // this approach, IE8 erroneously applies the anchor tag's underline to
+      // the pseudo element. Specifying separate text-decoration rules for the
+      // anchor tag and a nested span fixes this.
       a {
         display: block;
+        text-decoration: none;
 
         &:before {
           content: "•";
@@ -32,7 +38,10 @@
           margin-left: -15px;
         }
       }
+
+      a span {
+        text-decoration: underline;
+      }
     }
   }
-
 }
diff --git a/app/views/govuk_component/taxonomy_sidebar.raw.html.erb b/app/views/govuk_component/taxonomy_sidebar.raw.html.erb
@@ -32,7 +32,6 @@
                 <li>
                   <%=
                     link_to(
-                      related_item[:title],
                       related_item[:link],
                       data: {
                           track_category: 'relatedLinkClicked',
@@ -42,7 +41,9 @@
                           track_dimension_index: 29,
                       },
                       class: 'related-link',
-                    )
+                    ) do
+                      content_tag(:span, related_item[:title])
+                    end
                   %>
                 </li>
               <% end %>