Huhu,

Ich habe ein Problem mit einem kleinen Login-Formular. Im FF und Opera wird es so dargestellt wie ich es mir denke, jedoch der IE (6 & 7) machen starke Probleme. Hier einfach mal der Link zum Formular: Link

Und die passende CSS: Link

Irgendwie verzieht der IE das Formular komplett. Es kommt mir vor, als ob er Probleme mit der em-Größenangabe hatt.

Gruß soyo

Hi,

hast du schon mal versucht, das Formular anstelle der Feldgruppe fieldset im Viewport zu positionieren?

Ich werde es gleich einmal probieren.

EDIT: Das sieht schon einmal besser aus.

EDIT2: Anbei mal ein Screenshot. Ich denke jeder sieht das Problem. Ich kann den Fehler nicht finden .

Versuch es mal hiermit:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

/***BOXES***/ form {   position: absolute;   height: 160px;   left: 50%;   margin-left: -160px;   margin-top: -80px;   top: 50%;   width: 320px; }   #boxLogin { border: 1px solid #2D5063; background: #65889C; }

Leider keine Änderung. Anscheinend muss ich auf das Fieldset verzichten.

EDIT: Der Fehler liegt einfach darin, das der IE die Höhe des Fieldset bis zum oberen Rand des Legend-Element(Oberkannte vom Text "Login") berechnet. Der FF und Opera hingegen auch wirklich nur bis zum eigentlichen Rahmen. Da kann ich wohl nix machen

Einen Lösungsvorschlag hätte ich da noch, wie sich ein "Fieldset" mit CSS nachbauen lässt

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

div.box {             position:relative;             margin:1em;             width:400px;             padding:0.5em 0 0 0;             border:1px #000 solid;             color:#000;             background:#fff;             font-family:Arial, sans-serif;         } div.box h1 {             position:absolute;             top:-0.5em;             left:1em;             margin:0;             padding: 0;             font-size:1em;             font-weight:normal;         } div.box h1 span {             margin: 0;             padding:0 0.5em;             color:#000;             background:#fff;             font-size:1em;         } div.box p {             margin: 0;             padding:0.5em;             color:#000;             background:#fff;         }

Code :

1 2 3 4

<div class="box">        <h1><span>Überschrift</span></h1>        <p>dummy text dummy text dummy text</p> </div>

Vielleicht hilft dir das weiter?

Die gleiche Idee hatte ich auch schon. Das sieht schon so auch sehr gut aus, bis ich einen Hintergrund setzte.

Trotzdem vielen Dank für deine Mühe. Ich werde es einfach mit einem Blockelemt lösen und einen Überschrift über das Blockelemt setzten.

Gruß soyo

Nach ein wenig "Gogglelei" hab ich ein kleines Workaround gefunden welches nach einen kleinen Test auch wirklich sehr gut funktioniert. Ich muss es nur noch auf mein Beispiel anwenden. Im Blog von Matt Heerema lässt sich dieses finden.

Gruß soyo

EDIT: kurze Frage noch, was sind das für Angaben?

Code :

1 2 3 4

... top: -.8em; left: .5em; ...

Mit der em-Angabe kann ich was anfangen, aber was hatt es mit dem Punkt davor auf sich?

Der Punkt symbolisiert die Dezimalstelle und steht für "0.8" bzw. "0.5".