margin probleme im firefox

[sheepdog]

hallo forum!

ich habe da probleme mit einem formular css:

label {
       clear:left;
       float:left;
       width: 8em;
       display: block;
       border: 1px solid green;
}

input {
        margin-left: 8em;
        width: 10em;
        display:block;
        border: 1px solid blue;
}
legend { padding: 8px
}

der zugehörige html teil schaut so aus:

<form action='' method='get'>

<fieldset>
<legend>Formular</legend>
<label for='name'>Benutzername</label>
<input type="text" id="name" /><br />
<label for="passwort">Passwort</label>
<input type="text" id="passwort" />
</fieldset>
</form>

das problem ist nun, dass der firefox den margin-left irgendwie komisch anwendet, d.h. das input-feld liegt überhalb der beschriftung, während der opera es nebeneinanderanzeigt wie es sein soll. hätte dazu jemand eine idee?

[Cyx23]

Hallo,

das problem ist nun, dass der firefox den margin-left irgendwie komisch anwendet, d.h. das input-feld liegt überhalb der beschriftung, während der opera es nebeneinanderanzeigt wie es sein soll. hätte dazu jemand eine idee?

Eigentlich hätte ich erwartet dass sich das Verhalten der Browser durch
margin, float o.ä. angleichen lässt, habe aber auf die Schnelle keine entspr.
Lösung gefunden.

Dafür ist aber, der IE verhält sich hier offenbar wie der Mozilla, erstmal
ein WA per CSS Filter mittels einer Browserweiche für Opera 8 bzw. ab 7.2
möglich:

input { margin-left: 18em; ... }
html:first-child>b\ody input { margin-left:8em }

Grüsse

Cyx23

[Detlef G.]

Hallo sheepdog

  

> label {  
> ...  
>        width: 8em;  

Wie viel sind 8em?

  

> ...  
  

> input {  
>         margin-left: 8em;  

Wie viel sind 8em hier?

das problem ist nun, dass der firefox den margin-left irgendwie komisch anwendet, ...

Er wendet ihn richtig an.
In CSS Numerische Angaben steht bei em: "Steht für bezogen auf die
Schriftgröße des Elements". Wie groß ist die Schriftgröße von <label>, und
wie groß ist die Schriftgröße von <input>. Wenn diese nicht zufällig
identisch sind, ergeben die Angaben für width und für margin-left
unterschiedliche Maße.

Wenn du Maße in em für verschiedene Elemente angibst, die voneinander
abhängig sind, soltest du die Schriftgröße dieser Elemente auch selbst
setzen.

... d.h. das input-feld liegt überhalb der beschriftung, während der opera es nebeneinanderanzeigt wie es sein soll. hätte dazu jemand eine idee?

Der Opera macht bei deinem Beispiel wohl den gleichen Fehler wie der IE, er
lässt das zum Blockelement gemachte <input> floaten, obwohl dies nur für
Inlineelemente richtig wäre.

Du hast folgende Möglichkeiten:

1. für <label> und <input> selbst die Schriftgröße festlegen, oder
2. für <input> kein display:block und kein margin:left, oder
3. für <input> kein margin:left sondern auch ein float:left.

Auf Wiederlesen
Detlef