Moin Moin...

Hab da mal eine Frage zu einem Problem, dass ich nicht nachvollziehen kann.

Also:

:: CSS ::
* { margin: 0; padding: 0; }

body {
 background-color: #FFF;
 color: #000;
 font-family: Arial, Verdana, Tahoma, sans-serif;
}

div#mainframe { text-align: center; }

div.menu { width: 320px; border: 1px dotted #000; border-top: 0px; }
div.main { width: 320px; border: 1px dotted #000; border-top: 0px; text-align: center; }

:: HTML AUSSCHNITT ::
<div align="center">
 <div class="menu">
  <a href="#">menu1</a> | <a href="#">menu2</a><br />
  <a href="#">menu3</a> | <a href="#">menu4</a><br />
 </div>
 <div class="main">
  abc<br />
  schreiben ist nicht schwer
 </div>
</div>

Das Problem:
Wenn ich bei <div align="center"> id="mainframe" eintrage, erhalte ich den Inhalt des div´s im IE centriert und im FF linksbündig.

Schreibe ich jedoch <div align="center"> und verzichte auf den Inhalt in der CSS-Datei, funktioniert es in beiden Browsern...
Woran liegt das? Bzw. was mache ich falsch?