Images of nivo slider distorted

Question

I have a nivo slider on the bottom of the page (footer) Page-Link The images of this slider are distorted.

HTML:

<div class="slider">
            <img src="img-slider1.png" alt=""  />
            <img src="img-slider2.png" alt=""  />
            <img src="img-slider3.png" alt=""  />
        </div>

CSS:

#footer .slider { width: 500px; height: 148px; margin-left: 30px; margin-top: 10px; }

Anyone an idea what is wrong with this nivo slider?

Answer 1

Looking at your page's source code says that nivo-slider.css is not found at its supposed location:

http://dh-creative-webdesign.de/shabani-stuckateur/nivo-slider.css

Try to make it available and everything will be fine.

Checkout this demo with valid css source: http://jsbin.com/eguVoGA/1/

Answer 2

Well...First of all, instead of using visibility: hidden;, which only hides the object but it physically remains there. Try using display: none;. That should fix the problem with the infinite space created below the footer.