Taney: Verschiebung beim Positionieren im Firefox

Beitrag lesen

Hallo Forum,
habe eine kleine Frage.

Unsere Community war bisher mit Tabellen gestaltet. Zurzeit stelle ich das Layout auf DIV um. Hab gerade nur noch ein kleines Problem in Firefox.

Mit drei DIV’s haben wir die Seite in drei Bereiche aufgeteilt.

#ttop //Header
#main //Inhalt
#footer //Fusszeile

In Main wurde die der Inhalt und die Navigationsboxen (Rechts und Links) damals mit einer Tabelle unterteilt.

Nun habe ich es mit zwei DIV’s unterteilt. Leider schiebt er die Unterteilung (Rechts und Links) in Firefox leider unter #footer, obwohl die Unterteilung zwischen <div id=“main“> </div> angelegt wurde. Id=content ist dafür da, um die Unterteilung zu zentrieren.

<div id="top">
</div>

<div id="main">
 <div id="content">

<div id="main_big_left">
  Inhalt Bla Bla Links
  </div>

<div id="main_big_right">
  Navigation Rechts
  </div>

</div>
</div>

<div id="footer">
</div>

###############################################
Die CSS:
###############################################

#main {
 width:900px;
 background-color:#FFFDFB;
 padding:0;
 margin:0 auto 0 auto;
 border-left: 1px solid #F1E7C7;
 border-right: 1px solid #F1E7C7;}

#content {
 margin:0 auto 0 auto;
 width:880px;}

#main_big_left {
 float:left;
 width:665px;
 border:0px;
 padding:0px;
 vertical-align:top;
 padding-top:15px;}

#main_big_right {
 float:right;
 width:215px;
 border:0px;
 padding:0px;
 vertical-align:top;}

#############################################

Unter IE 6.0 sieht die Seite korrekt aus. Firefox 2.0 bringt es durcheinander.
Hier eine Beispielseite:
http://www.yamuk.com/servlet/start.jsp?cms=hilfe

Noch eine Kleinigkeit nebenbei.
Die Navigationsbuttons habe ich auch positioniert.

#navioben {
 width:700px;
     padding:0px;
     border:0px;
 padding-top:48px;
     margin-left:190px;
     text-align:right;
     position:absolute;}

Im Firefox ist #navioben einwenig mehr nach unten verschoben.
Das müsste ein paar Pixel nach oben. padding-top:45px;
Oder anstelle padding-top -> margin-top;

Sollte ich nun solche Weichen reinmachen:

<!--[if lt IE 6]>
 <style type="text/css">
  #navioben {
   padding-top:48px;
  }
 </style>
<![endif]-->

Else padding-top:45px;

Bzw. zwei verschiedene CSS-Dateien dementsprechend einbinden.
Oder könnte man dies besser lösen?