Nivo Slider thumbnails not displaying properly in IE

Question

Making a new site but something is happening to it in IE. I've purchased the Nivo Slider for wordpress plugin and it working fine however it's not displaying the thumbnails under the banner in IE.

This is what it looks like in firefox enter image description here

This is what it looks like in IE enter image description here

Because this is a plugin (and the website isn't giving me any support after 2 days) I dont really have the source CSS but I was hoping you could take a look at it with come developer tools to see why it might not be showing in IE?

This is what I have found

.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
    display: block;
    height: auto;
    width: auto;
}

Any help or advice is appreciated.

UPDATE

enter image description here

After putting in the new code the .banner-bottom displays on top of the banner on all other pages.

can you specify which version(s) of IE are not displaying the thumbnails? Also the version of the plugin. — Guilherme Torres Castro, Jun 22 '12 at 20:58
It does not display the thumbnails in IE 7 and the version of the Nivo Slider plugin is of the most recent version v3.0.1. — kia4567, Jun 25 '12 at 18:26

Jeffery To · Accepted Answer · 2013-04-30T03:48:09.167

6

Add this CSS (demo):

#ie6 .nivo-controlNav a, #ie7 .nivo-controlNav a {
    position: relative;
    text-indent: 0;
}

If you can't / don't want to target IE, then this will also work (demo):

body .nivo-controlNav a.nivo-control {
    position: relative;
    text-indent: 0;
}

edited Apr 30 '13 at 03:48

answered Jun 26 '12 at 07:52

Jeffery To

11,836
1
27
42

It's working great, thank you Jeffery. I was unaware that this question received any attention so I did not check it on the last 2 days of the bounty. Is there a way to give you the other half of the bounty? – kia4567 Jul 02 '12 at 16:52
Hmm...since doing that an visiting another page on the site the .banner-bottom displays on top of the smaller banners on all the other pages.. See updated question. How is this small issue fixed? – kia4567 Jul 02 '12 at 17:49
@ambrelasweb Are you sure this new issue is caused by the new CSS? I suggest you add this to your stylesheet: `#ie6 #banner, #ie7 #banner { position: relative; }` – Jeffery To Jul 03 '12 at 07:13
@ambrelasweb Once the bounty has been auto-awarded, there's no way to award the other half. – Jeffery To Jul 03 '12 at 07:14

arttronics · Answer 2 · 2012-06-28T09:14:41.163

Ambrelasweb, your website is using Nivo Slider v3.0.1 and I have prepared a jsFiddle that functions in IE7 since the thumbnails do not show up in that browser. I also included an extra jsFiddle for those with the older Nivo Slider v2.7.1 too.

Reference: jsFiddle for Nivo Slider v3.0.1
Reference: jsFiddle for Nivo Slider v2.7.1

Minimal CSS: .theme-default.controlnav-thumbs .nivo-controlNav a {text-indent:0px;}

Your particular webpage has a separate issue with Class Name .banner-bottom that will actually "cover" the thumbnails once you apply the minimal Nivo Slider CSS shown above. To quickly view the thumbnails in IE7, just temporarily comment out the span tag that contains class .banner-bottom.

score 0 · Answer 3 · answered Jun 27 '12 at 19:45

Try using the following to see if the thumbs show up:

.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
    display: block;
    height: auto;
    width: auto;
    /width:100%;
    /height:100%;
}

That ought to change the height and width attributes for only IE. If it does show up, you may need to specify a width and height.

Nivo Slider thumbnails not displaying properly in IE

3 Answers3