Label und Input leiden an Umbruch

[jeko]

Hallo zusammen,

nach langer Abwesenheit wieder mal eine Frage von mir.

Ich habe ein Formular, das aus zwei Textfeldern und dazugehörigen Labels besteht. Seltsamerweise stehen Labels und Felder je in einer Zeile (Nach den Labels ein Zeilenumbruch), was eigentlich nicht sein sollte da beides inline-Elemente sind (s. Beispiel: Wie es sein sollte).

Zum Vergleich: Beispiel: Wie es nicht sein sollte, aber ist

Und zwar in der Mitte bei der Eingabe von Email-Adresse und Passwort.

Der Quelltext davon ist:

<div class="boxInfoRS" id="box_login">
        <div class="boxInfoBodyRS">
        <form id="loginbox" method="post" action="https://web3.customweb.ch/login.php?action=process">
                <label for="email_address">eMail-Adresse</label><input type="text" name="email_address" size="19" maxlength="50" id="email_address1" />
                <label for="password">Passwort</label><input type="password" name="password" size="10" maxlength="30" id="password1" />
                        </form>

        </div>
</div>

Das Ganze läuft mit xt:Commerce, was hier weniger eine Rolle spielt ausser, dass die mit zahlreichen CSS-Dateien für reichlich Verwirrung sorgen. Die einzigen CSS-Formatierungen die zur Anwendung auf input-/label-Elemente zum Zuge kommen wären:

/* http://web3.customweb.ch/templates/YAML-xtc-1.5.0/css/screen/content.css */
 input[type=text], #col3_content textarea, input[type=password] , select {
    background:#fff  url(../../img/nettolinsen/inbox_bg.png) left top repeat-x;
    color: #333;
    border: 1px #888 solid; /* ### Farbe für den Rand ### */
    float: left;
    margin-bottom: 5px;
    padding:0px 1px;
}

Zum Fixen hab ich folgendes versucht:

/* http://web3.customweb.ch/templates/YAML-xtc-1.5.0/css/screen/boxes.css */
#email_address1, #password1, #loginbox label {
             display:inline;
             margin:0px 10px 0px 10px;
             padding:0px;
             clear:both;
  }

Trotzdem mag er nicht mitspielen... Wo liegt das Problem?

Grüsse
jeko

 

[anna55]

Zum Fixen hab ich folgendes versucht:

/* http://web3.customweb.ch/templates/YAML-xtc-1.5.0/css/screen/boxes.css */
#email_address1, #password1, #loginbox label {
             display:inline;
             margin:0px 10px 0px 10px;
             padding:0px;
             clear:both;
  }

Wenn Du clear:both; rausnimmst, hast Du - zumindest im FF2 - den Umbruch nicht mehr.

 

[jeko]

hm... Hat bei mir keinen Effekt. Benutze aber auch FF3.0.1... Dann hilft nur beten und hoffen, dass es nicht an den unterschiedlichen Versionen von FF liegt. Aber danke für deine prompte Antwort!

 

[dkdenz]

Ich habe das mit EditCSS (Firefox-Extension) mal so hingekriegt:

 #email_address1, #password1, #loginbox label {
             display:block; /* aus inline block gemacht */
             margin:0px 10px 0px 10px;
             padding:0px;
             float:left; /* und noch ein float:left verpasst */
  }

Ist sicher noch etwas Feinarbeit nötig (bei margin und/oder padding), aber funktioniert grundsätzlich...

 

[anna55]

Geniale Idee, Herr Denz! Ist das sowas wie "minus mal minus gleich plus"? Also zweimal float hebt float auf? Ist das eine Regel?

 

[jeko]

Vielen Dank dkdenz, funktioniert sehr gut!

anna: Ich denke nicht, dass das ein geplantes Verhalten ist... Entweder haben wir etwas übersehen oder es handelt sich hierbei um einen Bug. Vll. weiss dkdenz ja mehr.

Danke euch auf jeden Fall!

 

[dkdenz]

Vielen Dank dkdenz, funktioniert sehr gut!

anna: Ich denke nicht, dass das ein geplantes Verhalten ist... Entweder haben wir etwas übersehen oder es handelt sich hierbei um einen Bug. Vll. weiss dkdenz ja mehr.

Danke euch auf jeden Fall!

Gern' geschehen.
Ich habe mich nicht in der direkten Umgebung umgesehen, sondern wild drauf los getippt, bis es geklappt hat.
Ob geplant oder Bug oder Zufall? Keine Ahnung...