Conny: Überschrift soll über dem Rahmen liegen

Beitrag lesen

Hallöchen,

folgende Sache: zu sehen ist eine Überschrift h2 sowie ein paar Eingabefelder eines Formulars. Das alles wird von einem Rahmen umgrenzt. Nun soll die Überschrift aber nicht innerhalb des Rahmens liegen, sondern oben über der Linie.

Meine Überlegung war nun zunächst folgende:

<div style="border:1px solid #000; padding:10px; width:500px; heigth:300px; margin-left:auto; margin-right:auto; margin-top:50px;">
<h2 style="margin-top:-20px; width:200px; background-color:#fff;">Überschrift</h2>
</div>

Das Problem ist aber, das der IE die Überschrift in diesem Simpelbeispiel (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">) zwar nach oben schiebt, aber nicht über die Linie sondern untendrunter und dann den oberen Teil abschneidet, während er in der etwas komplizierteren eigentlichen Seite seltsamerweise gar nichts verschiebt.

Beides ist nicht toll, mal abgesehen davon, dass die Überschrift ja auch noch weiß hinterlegt werden und eine Breite zugewiesen bekommen muss, damit man nicht die Linie dahinter durchsieht und gleichzeitig aber nicht die gesamte Breite weiß hinterlegt wird. Das empfinde ich persönlich auch als etwas unsaubere Trickserei.

Hat jemand eine Idee für mich, wie man das Gewünschte umsetzen kann, oder geht das einfach nicht?

Gruß,
Conny