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.

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

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.