Formular in FF top .. IE flop :(

Status
Nicht offen für weitere Antworten.

soyo

Erfahrenes Mitglied
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 :mad:.
 

Anhänge

  • ie_holzkopf_browser.jpg
    ie_holzkopf_browser.jpg
    37,8 KB · Aufrufe: 23
Zuletzt bearbeitet:
Versuch es mal hiermit:

Code:
/***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 :(
 
Zuletzt bearbeitet:
Einen Lösungsvorschlag hätte ich da noch, wie sich ein "Fieldset" mit CSS nachbauen lässt ;)

Code:
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:
<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:
...
top: -.8em;
left: .5em;
...

Mit der em-Angabe kann ich was anfangen, aber was hatt es mit dem Punkt davor auf sich?
 
Zuletzt bearbeitet:
Der Punkt symbolisiert die Dezimalstelle und steht für "0.8" bzw. "0.5". ;)
 
Status
Nicht offen für weitere Antworten.
Zurück