Nivo Slider thumbnails not displaying properly in IE

Question

Creating a new site , but something happens to it in IE. I bought Nivo Slider for the wordpress plugin and it works fine, but does not display thumbnails under the banner in IE.

This is how it looks in Firefox

This is how it looks in IE

Since this is a plugin (and the site does not give me support in 2 days), I really do not have the CSS source code, but I was hoping that you could look at it with the help of developer tools to understand why it might not show in IE?

This is what I found

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

Any help or advice is appreciated.

UPDATE

After entering a new code from the bottom .banner from bottom to top above the banner on all other pages.

Answer 1

Add this CSS ( demo ):

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

If you cannot / do not want to target IE, then this will also work ( demo ):

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

Answer 2

Ambrelasweb, your site uses Nivo Slider v3.0.1 , and I prepared jsFiddle, which works in IE7 because thumbnails do not display in this browser. I also included an additional jsFiddle for those who have older Nivo Slider v2.7.1.

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

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

Your particular web page has a separate problem with the class name .banner-bottom , which will actually “cover” the thumbnails as soon as you apply the Nivo minimal CSS slider shown above. To quickly view thumbnails in IE7 , just comment out the span tag that contains the .banner-bottom class.

Answer 3

Try using the following to see if your thumbs are displayed:

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

This should change the height and width attributes for IE only. If it appears, you may need to specify the width and height.