Firefox Überlauf: versteckter Fehler

Question

Also habe ich einen Bild-Slider in mein Webdesign eingefügt, so wie es jetzt ist. Es funktionierte gut in IE + Chrome, aber in Firefox hatte ich ein sehr seltsames Problem .. Die Bild-Slider-Bilder wurden in Richtung der rechten Seite der Seite geschoben.

Wenn es sollte wie folgt aussehen:

Ich weiß nicht wirklich, warum dies geschieht.

hier ist die CSS für den Schieber:

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

Und die CSS für den Behälter um den Schieber:

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

Das ist wirklich mich stumping. Sie können auch eine Live-Version der Website sehen - http://simplesolutions.netne.net/

Answer 1

Es ist ein schwimmendes Problem:

#slider { float:left } 

sollte es beheben.

Answer 2

Margin-top : 6px auf der #photobox behebt es in Firefox.

Answer 3

Hinzufügen clear:both zu #slider .viewer scheint sich darum zu kümmern.

Answer 4

Ich hatte das gleiche Problem, (nur Firefox) mit der gleichen Art von Layout. Ich habe festgestellt, dass das Problem in den Menüpunkten des Navigationsbereichs liegt, und schiebe den Inhaltsbereich darunter nach rechts.

Der schwierige Teil war, dass das Nav - Menü selbst keinen Rand auf der Unterseite hatte, so sah es aus, als hätte es den Inhalt darunter nicht stören sollte (und es war nicht in anderen Browsern, nur in Firefox) - aber irgendwann stellte ich fest, dass die Listenelemente (Menüeinträge) selbst Ränder hatten, die sich unterhalb der Menüleiste erstreckten, und das Entfernen löste sie.