CSS: <div> Ausrichtung mit CSS; margin Problem

Hi @ll!

Ich weiß dass das ein Problem ist, dass oft angesprochen wird. Nun such' ich selbst grade eine Lösung für eine Ausrichtung von divs mittels css.

Ich möchte gerne eine Seite bauen, die aus vier <div> Bereichen besteht, wobei das ganze [zumindest horizontal] zentriert sein soll.

Hier der link zu meinem kleinen Experiment:
http://www.unet.univie.ac.at/~a0526379/php/hp_klaus/index.php

Der Internet Explorer zeigt mir die Seite so an, wie ich sie gerne hätte... im Firefox, den ich nutze, verschiebt sich durch's margin das ganze leider. Wie bekomm ich's hin, dass es im Firefox und anderen Browsern gleich aussieht wie im IE. Kann doch nicht so schwer sein, bei ein paar divs...

- div_main [schwarz] dient als Hülle und zum zentrieren des ganzen sowie ausrichten der Tochter-divs. Bei korrekter Formatierung sollte vom SCHWARZ eigentlich nix mehr zu sehen sein.

-div_01 [rot] soll später eine Grafik enthalten
-div_02 [grün] soll später das Menü enthalten
-div_03 [blau] soll später eine Hintergrundgrafik enthalten
-div_content [grau] soll Text enthalten und an ensprechender Stelle über die Hintergrundgrafik gelegt werden

Hoffe, es ist verständlich, was ich vorhabe.

Zum Ansehen, meine format.css

body {margin-top: 40px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; background-color:#cccccc; text-align: center;}


#div_main{ 
margin: auto;
width: 750px;
height: 450px;
background-color: #000000;
}
#div_01{ 
width: 750px;
height: 13px;
background-color: #990000;
}
#div_02{ 
width: 750px;
height: 21px;
background-color: #009900;
}
#div_03{ 
width: 750px;
height: 416px;
background-color: #000099;
text-align:left;
}


#div_inhalt{ 
width: 510px;
height: 388px;
background-color: #999999;
margin-left: 22px;
margin-top: 17px;
}

und hier mein box-gerüst:

<div id="div_main">
<div id="div_01"></div>
<div id="div_02"></div>
<div id="div_03">
<div id="div_inhalt"></div>
</div>
</div>

Kann mir bitte dazu jemand ein Box-Modell mit korrekten Formatierungen für IE, FF und Co posten? Klingt ja eigentlich ganz einfach - is es für mich aber leider nicht

thx im Voraus
Fugo

Noch'n Problem

Ich versuche grade, mir ein hovermenü zusammenzubasteln und dabei gerne auf JS verzichten... weil ich für die ganze Seite gerne ohne JS auskommen möchte. Als Alternative möcht ichs gerne mit css-formatierten links realisieren, in etwa so:

#navi_01{ display:block; background-image:url(images/design_03.jpg); width:50px; height:17px }
#navi_01:hover    { background-image:url(images/design_03_over.jpg); }

Dazu hab ich dann eine Tabelle:

<table border="0" cellpadding="0" cellspacing="0" height="17">
<tr>
<td><a href="index.php?section=news" id="navi_01"></a></td>
</tr>
</table>

Leider krieg ich im IE immer noch um jede BildLink einen 1-Pixel dicken Rand - den ich einfach mit keiner Formatierung wegkrieg. Im Firefox hingegen ist dieser Rand wiederum nicht... komm da nicht recht weiter.

Edit: Hmm... Anscheinend lässt sich auch dieses Problem durch ein position:absolute bereinigen... ob das so ganz korrekt ist

Habs jetzt gelöst, indem ich ein transparentes 1 Pixel Bild drüber gelegt hab... funktioniert einwandfrei - anders hab ichs einfach nicht hinbekommen - zumindest nicht fürn IE.