IE9 Shrinks image in Nivo Slider

Asked Jun 23 '14 at 15:41

Active Jun 23 '14 at 15:41

Viewed 55 times

I'm using Nivo slider and Fancy box together and I'm getting this problem that I cannot seem to correct.

I've created a JSFiddle to try and replicate the problem I'm having.

    .nivoSlider {
    position:relative;
    width:100%;
    height:auto 265px;
    overflow: hidden;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    max-width: none;
    display: none;
}

If you look very closely, you can see that the image are slightly shrinking and expanding, that the problem I'm having but you can see it, but its on a larger scale.

I have my suspicions that its something to do with the positioning in the CSS after looking here on SO but I've commented out the positioning tag in a few places and nothing has made a difference. Apparently IE9 doesn't count the auto CSS tag for height or width, this may be a problem, I have removed every auto tag, but that still hasn't made a difference.

Like I say it works fine across every browser including IE10 and IE11.

Also my version of jQuery is 2.1.1 could this be a problem

asked Jun 23 '14 at 15:41

Henshall

Have you got a DTD? Which are you using? – Kinnectus Jun 23 '14 at 15:44
Hi @BigChris, yes i have this is the one – Henshall Jun 23 '14 at 15:45
Try a strict DTD as per the W3C recommendation: http://www.w3.org/QA/2002/04/valid-dtd-list.html – Kinnectus Jun 23 '14 at 15:47
hi, i've just tried a few and the problem is still persisting – Henshall Jun 23 '14 at 15:51
Try the answer here: http://stackoverflow.com/questions/14872634/nivo-slider-first-image-is-scaled-unproportional-when-displayed-the-first-time - worked in your JSFiddle with IE9 browser mode. – Kinnectus Jun 23 '14 at 15:53
Nice one @BigChris that seems to have done the trick, cheers. – Henshall Jun 23 '14 at 16:00

IE9 Shrinks image in Nivo Slider

0 Answers0