I have setup a view using this module and it is working very well in Chrome and FF - slides are clickable and links are working well. However in IE (both 8 and 9) the slideshow works well again but I cannot click on a slide. It is as if I did not set up a link field at all.

If that helps, I am using the latest version of the Nivo Slider - 3.1. However in the format settings the "Nivo Slider version" dropdown is set to 2.7 and It cannot be set to 3.1 even after saving.

Does Nivo Slider work in IE? Any workarounds?


Rafix’s picture

It's exactly the same for me! Any news about it?

Chasen’s picture

FYI guys I had the same issue and this worked for me: https://github.com/michaelw90/Nivo-Slider/commit/df397fece20b34da84a1d65...

INCLUDING adding the z-index as per comment # 2

Rafix’s picture

Thanks Chasen! I found and tried this with no results. May be I am doing something wrong. It would help if you could write exactly how you did it. I know is much more than an great help, but in my case I tried in different ways and nothing changed.

Thank you any way.

Chasen’s picture

Here's my code:

.theme-default .nivoSlider a {
background-color: #fff;
opacity: 0;
z-index:7; /*from comment #2*/

I do have other styling code that is being applied to various parts of the NivoSlider but is unrelated. Make sure your code is being applied (i.e. your custom style sheet is being applied last) - if you use Chrome or FireFox/Firebug you can inspect the element to make sure the CSS isn't being overwritten. Try using the !important tag if you aren't sure to test.

RyanJ_DMC12’s picture

Thanks for the code Chasen. I've added it to my CSS and links now work in IE. For those looking for the exact place to put the CSS you can find it here: sites/all/libraries/nivo-slider/themes/default/default.css

Chasen’s picture

Just on that, I wouldn't recommend adding the CSS to that file because if you update the library in the future (you likely will) it will overwrite that file unless you manually back it up before hand which can be hard to maintain - especially with multiple developers.

I'd recommend adding it to your theme stylesheet so you're not changing any of the files provided by external modules/libraries so any updates you do won't overwrite your custom code - this applies to all modules/libraries.

If you're adding the code to your stylesheet but it's being overwritten by the module styles, you can use !important to force your code to be used (assuming no other style uses that same tag with the same style).

For example:

background-color: red;


background-color: red !important;

Ideally, you don't want to edit any core, module, library or theme files if you can avoid it for ease of maintenance purposes.