Problem mit Positionierung

[Andreas]

Hallo Forum,
ich versuche gerade herauszubekommen warum meine CSS-Angaben zu zwei unterschiedlichen Ergebnissen führen.

So sieht es ungefähr aus
Auf der HTML Seite:
<div id="inhalt">
<span class="title1">Überschrift1</span>
<span class="title2">Überschrift2</span>
<table width="100%".......
</table>
</div>

Der CSS-Code

.title1 {font-family: Arial, Helvetica, sans-serif;
 font-size: 18px;
 font-style: normal;
 font-weight: bold;
 text-align: center;
 vertical-align: middle;
 line-height: 20px;
 position: relative;
 height: 20px;
 margin:0;
 top: 0px;
 left: 0px;
 width: 100%;}

.title2 {font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-style: normal;
 font-weight: bolder;
 text-align: center;
 vertical-align: middle;
 line-height: 20px;
 position: relative;
 margin: 0;
 height: 20px;
 top: 0px;
 width: 100%;
 left: 0;}

Nun zu meinem Problem. Im Internetexplorer werden mir die Überschriften, wie gewünscht, schön untereinander dargestellt.
Firefox macht aber hinter der ersten Überschrift keinen Zeilen- umbruch und zeigt die Überschriften in einer Zeile an.

Wer macht denn jetzt etwas falsch? IE, Firefox oder etwa ich selbst :-)

Viele Grüße
Andreas