CODEWITHSUNDEEP
internet-explorernivo-slider
kia4567
kia4567

Reputation: 603

Nivo Slider thumbnails not displaying properly in IE

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.

Upvotes: 6

Views: 2601

Answers (3)

Jeffery To
Jeffery To

Reputation: 11936

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

Upvotes: 6

arttronics
arttronics

Reputation: 9955

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.

Upvotes: 1

ckpepper02
ckpepper02

Reputation: 3437

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.

Upvotes: 0

Related Questions