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

This is what it looks like in IE

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

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

Esch

can you specify which version(s) of IE are not displaying the thumbnails? Also the version of the plugin. – Continuous

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. – Esch

Answer 1

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;
}

Degauss

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? – Esch

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? – Esch

@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; } – Degauss

@ambrelasweb Once the bounty has been auto-awarded, there's no way to award the other half. – Degauss

Answer 2

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.

Fredericksburg

Answer 3

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.

Ossicle