Merge pull request #1088 from alphagov/fix-tick-cross-ie8

Fix ticks and crosses on team page in IE8

app/assets/stylesheets/components/banner.scss

@@ -30,6 +30,9 @@
 .banner-with-tick {
   padding: $gutter-half ($gutter + $gutter-half);
   background-image: file-url('tick-white.png');
+  @include ie-lte(8) {
+    background-image: file-url('tick-white-16px.png');
+  }
   background-size: 19px;
   background-repeat: no-repeat;
   background-position: $gutter-half $gutter-half;

app/assets/stylesheets/components/tick-cross.scss

@@ -1,23 +1,41 @@
 %tick-cross {
+
   @include core-16;
   display: inline-block;
   background-size: 19px 19px;
   background-repeat: no-repeat;
   background-position: 0 0;
   padding: 1px 0 0 25px;
+
+  @include ie-lte(8) {
+    background-position: 0 3px;
+  }
+
 }
 
 .tick-cross {
 
   &-tick {
+
     @extend %tick-cross;
     background-image: file-url('tick.png');
+
+    @include ie-lte(8) {
+      background-image: file-url('tick-16px.png');
+    }
+
   }
 
   &-cross {
+
     @extend %tick-cross;
-    background-image: file-url('cross-grey.png');
     color: $secondary-text-colour;
+    background-image: file-url('cross-grey.png');
+
+    @include ie-lte(8) {
+      background-image: file-url('cross-grey-16px.png');
+    }
+
   }
 
   &-list {