Problem mit Positionierung

[Auge]

Hallo

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>

  
Ähhhm, du weißt, warum es für [Überschriften](http://de.selfhtml.org/html/text/ueberschriften.htm) eigene Elemente gibt? Benutze diese, und sie werden automatisch untereinander dargestellt.  
  

> ~~~css

.title1 {  

>  ...  
>  position: relative;  
>  height: 20px;  
>  margin:0;  
>  top: 0px;  
>  left: 0px;  
>  width: 100%;}  
>   
> .title2 {  
>  ...  
>  position: relative;  
>  margin: 0;  
>  height: 20px;  
>  top: 0px;  
>  width: 100%;  
>  left: 0;}

Firefox macht aber hinter der ersten Überschrift keinen Zeilen- umbruch und zeigt die Überschriften in einer Zeile an.

Wenn ich nicht irre, positioniert der FF dein <span class="title2">...</span> relativ zum eigentlichen Anzeigeort, der bei einem Inlineelement nunmal in der gleichen Zeile ist. Die frage, die ich jetzt nicht auf Anhieb beantworten kann, ist, ob eine Auszeichnung mit position: relative; nicht automatisch aus einem Inline- ein Blockelement macht (der MSIE scheint das so zu sehen).

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

Zuvörderst du. Eine Überschrift ist eine Überschrift, bleibt eine Überschrift. Also zeichne sie auch so aus, das/die entsprechende(n) Element(e) gibt es im HTML-Sprachschatz nicht umsonst.

Tschö, Auge