Firefox overflow: hidden bug

Question

So I added in an image slider into my webdesign as it is now. It worked fine in IE + Chrome, but in firefox I had a very strange issue.. The image slider images were being pushed towards the right hand side of the page.

When it should look like this:

I really don't know why this is happening.

here is the css for the slider:

    <style type="text/css">
        #slider {
            position: relative;
            width: 918px;
        }
        #slider .viewer {
            position: relative;
            width: 918px;
            height: 200px;
            overflow: hidden !important;
        }
        #slider .viewer .reel {
            display: none;
            height: 200px;
        }
        #slider .viewer .reel .slide {
            width: 918px;
            height: 200px;
        }
    </style>

And the css for the container around the slider:

#photobox {
border-left: 1px solid #ababab;
border-right: 1px solid #ababab;
position: relative;
width: 918px;
height: 200px;
z-index: -1;
top: -6px;
}

This is really stumping me. You can also see a live version of the site - http://simplesolutions.netne.net/

Answer 1

It is a floating issue:

#slider {  float:left }

should fix it.

Answer 2

Adding clear:both to #slider .viewer seems to take care of it.