-2

I have an issue with this site in IE: http://www.coachjoelleinc.com/

In all other browsers the JS rotator in the top right gives me correctly styled teal colored buttons. In IE 9 the buttons change to Black and White. Any ideas? I'd love to know if there is something I can do to plan for this in future projects.

neillmcshea
  • 5
  • 3
  • 2
    Please try to recreate the problem in a jsfiddle. Use only the relevant code there. Maybe you even get the solution by yourself. Otherwise it will help us to help you. Additionally put that code directly in your post here so future people having the same problem might get the solution at right hand. – yunzen Sep 22 '12 at 19:56
  • How useful this question will be when you fix this issue on your site? – Pavlo Sep 22 '12 at 20:07

1 Answers1

2

It's because you're adding the gradient using Mozilla prefix, which is not understood by IE:

-moz-linear-gradient(#6BA4B4, #26687B);

Therefore, IE will fall back on the background-color:black; that is also defined for the same CSS classes (.wt-rotator .thumbnails li, .wt-rotator .play-btn, .wt-rotator .prev-btn, .wt-rotator .next-btn)

Try setting this instead (as described here):

.wt-rotator .thumbnails li, .wt-rotator .play-btn, .wt-rotator .prev-btn, .wt-rotator .next-btn {
   background: -moz-linear-gradient(#6BA4B4, #26687B);
   background: -webkit-linear-gradient(#6BA4B4, #26687B);
   background: -o-linear-gradient(#6BA4B4, #26687B);
   background: -ms-linear-gradient(#6BA4B4, #26687B);
   background: linear-gradient(#6BA4B4, #26687B);
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#6BA4B4', endColorstr='#26687B');
}
Community
  • 1
  • 1
Henrik Janbell
  • 1,784
  • 3
  • 21
  • 30
  • Thank you Henrik. This worked like a charm! I even used it with reverse colors for the "current" state, worked like a charm. Thanks again! – neillmcshea Sep 25 '12 at 03:16