Mozilla und das liebe display

[Froschpopo]

Hallo Forum!

Folgendes Problem(chen):

Ich erstelle ein Formular:

<form action="/target.aspx" method="post">
   <fieldset id="formular">
      <legend>Anmeldung</legend>
      <ol>
          <li>
              <label for="username">Username:</label>
              <input type="text" id="username" name="username">
          </li>
          <li>
              <label for="passwd">Passwort:</label>
              <input type="password" id="passwd" name="password">
          </li>
      </ol>
   </fieldset>
</form>

Das CSS sieht so aus:

#formular ol li label {
    display: inline;
    display: -moz-inline-box; /* vermutlich die PROBLEMZEILE */
    width: 140px;
}

#formular ol, #formular ol li {
    margin: 0; padding: 0;
    list-style: none;
}

Alle gängigen Browser stellen den Code einwandfrei dar.
Mit -moz-inline-box kann ich im Mozilla zwar keinen automatischen Zeilenumbruch erzwingen, aber den benötige ich in meinem Fall auch nicht.

Das Problem ist nun folgendes:
Wenn ich versuche innerhalb des <label>-Tags irgendwelche Formatierungen vorzunehmen, z.B. mittels <span>, dann stellt der Mozilla NUR den Inhalt innerhalb des <span>-Tags dar.

Ein kleines Beispiel:

<label for="username">Username:<span style="color:red">*</span></label>

löscht den kompletten Inhalt, AUSSER das rote Sternchen!

Das liegt definitiv an meinem -moz-inline-box-Hack.

Ich frage mich nur die ganze Nacht schon, worin hier ein Zusammenhang besteht. Der IE und andere Browser lassen eine label-formatierung innerhalb einer inline-box zu!! Warum Mozilla nicht?
Das problem ist für mich einfach logisch nicht nachvollziehbar.

Bitte nur kompetente Antworten und keine Hinweise auf Google ;)

[Mr. Horse]

Hallo,

<label for="username">Username:<span style="color:red">*</span></label>

füge ein Leerzeichen vor dem öffnenden SPAN-Tag ein, dann klappt es (bei mir im Firefox 1.5.0.7):
<label for="username">Username: <span style="color:red">*</span></label>

Aber frag mich bitte nicht, warum.....

So long,
Mr. Horse

[Froschpopo]

Hallo,

<label for="username">Username:<span style="color:red">*</span></label>

füge ein Leerzeichen vor dem öffnenden SPAN-Tag ein, dann klappt es (bei mir im Firefox 1.5.0.7):
<label for="username">Username: <span style="color:red">*</span></label>

Aber frag mich bitte nicht, warum.....

So long,
Mr. Horse

hmmm also wenn ich ich display:block stimmts vom Prinzip her schonmal. Allerdings überlappt sich der Text mit dem Border des darunter folgenden <li>-Elementes.

[Jens Holzkämper]

Tach,

hmmm also wenn ich ich display:block stimmts vom Prinzip her schonmal. Allerdings überlappt sich der Text mit dem Border des darunter folgenden <li>-Elementes.

Dann sollte dsa darunter liegende Element wohl einen anderen Wert für die Clear-Eigenschaft erhalten.

mfg
Woodfighter

[Froschpopo]

Dann sollte dsa darunter liegende Element wohl einen anderen Wert für die Clear-Eigenschaft erhalten.

mfg
Woodfighter

Bitte keine Rätsel ;)

[Jens Holzkämper]

Tach,

Dann sollte dsa darunter liegende Element wohl einen anderen Wert für die Clear-Eigenschaft erhalten.

Bitte keine Rätsel ;)

Mit clear können Sie einen Umfluss abbrechen und die Fortsetzung unterhalb des umflossenen Elements oder Bereichs erzwingen.

mfg
Woodfighter

[Froschpopo]

bin ich auch schon drauf gekommen. Der border-bottom vom <li> wird trotzdem überlappt:

<li style="border-bottom:1px solid #000">
   <label for="test" style="float:left;display:block;140px">Eingabe:und ein Zeilenumbruch...........</label>
   <input type="text" name="input" id="test">
</li>

<li style="border-bottom:1px solid #000;clear:left">
   <label for="test" style="float:left;display:block;140px">Eingabe:und ein Zeilenumbruch...........</label>
   <input type="text" name="input" id="test">
</li>

das zweite <li> wird zwar um ebenfalls eine Zeile nach unten verschoben, aber der border-bottom wird durch das erste <li> einfach überlappt!!!

[Jens Holzkämper]

Tach,

das zweite <li> wird zwar um ebenfalls eine Zeile nach unten verschoben, aber der border-bottom wird durch das erste <li> einfach überlappt!!!

ja, du nimmst das Label aus dem Elementfluß und dementsprechend wird das li nicht vergrößert, fügst du allerdings ein im Elementfluß befindliches Element mit clear:left ein, klappt alles. Als Workaround sieht das dann so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
 <head>  
 <title>Test</title>  
  
 <body>  
  <ul>  
   <li style="border-bottom:1px solid #000">  
       <label for="test" style="float:left;display:block;width:140px;">Eingabe:und ein Zeilenumbruch...........</label>  
       <input type="text" name="input" id="test">  
       <div style="clear:both;" />  
   </li>  
  </ul>  
 </body>  
</html>

mfg
Woodfighter

P.S. Vollständige Testfälle machen dem Helfer übrigens das Leben leichter und erzeugen so auch mehr Antworten.

P.P.S. "Multiple exclamation marks," he went on, shaking his head, "are a sure
sign of a diseased mind." - Terry Pratchet

[Froschpopo]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Test</title>

<body>
  <ul>
   <li style="border-bottom:1px solid #000">
       <label for="test" style="float:left;display:block;width:140px;">Eingabe:und ein Zeilenumbruch...........</label>
       <input type="text" name="input" id="test">
       <div style="clear:both;" />
   </li>
  </ul>
</body>
</html>

>   
> mfg  
> Woodfighter  
  
  
Hi Jens !  
Du packst das clear also noch IN das <li>. Damit funktioniert es auch bei mir ! Das sieht aber trotzdem sehr unschön aus, finde ich. Könnte man das clear nicht irgendwie woanders unterbringen und trotzdem noch vor dem darauffolgendem <li> ausführen?

[Jens Holzkämper]

Tach,

Du packst das clear also noch IN das <li>. Damit funktioniert es auch bei mir ! Das sieht aber trotzdem sehr unschön aus, finde ich. Könnte man das clear nicht irgendwie woanders unterbringen und trotzdem noch vor dem darauffolgendem <li> ausführen?

wenn es an der Stelle kein passendes Blockelement hat, kann man natürlich auch das umliegende Element ebenfalls aus dem regulären Fluß nehmen:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
 <head>  
 <title>Test</title>  
  
 <body>  
  <ul>  
   <li style="border-bottom:1px solid #000;float:left;">  
       <label for="test" style="float:left;display:block;width:140px;">Eingabe:und ein Zeilenumbruch...........</label>  
       <input type="text" name="input" id="test"  />  
   </li>  
   <li style="border-bottom:1px solid #000;float:left;clear:left;">  
       <label for="test" style="float:left;display:block;width:140px;">Eingabe:und ein Zeilenumbruch...........</label>  
       <input type="text" name="input" id="test"  />  
   </li>  
  </ul>  
 </body>  
</html>  

mfg
Woodfighter

[Froschpopo]

hmm, das sieht ja schonmal ganz gut aus:)
ABER, nun nimmt li nichtmehr die volle Breite ein:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
 <head>
 <title>Test</title>

<body>
  <ul style="width:700px;border:1px solid #000">
   <li style="border-bottom:1px solid #000;float:left;">
       <label for="test" style="float:left;display:block;width:140px;">Eingabe:und ein Zeilenumbruch...j rtjzrt j j........</label>
       <input type="text" name="input" id="test"  />
   </li>
   <li style="border-bottom:1px solid #000;float:left;clear:left;">
       <label for="test" style="float:left;display:block;width:140px;">Eingabe:und ein Zeilenumbruch...........</label>
       <input type="text" name="input" id="test"  />
   </li>
  </ul>
 </body>
</html>

Gebe ich also ul die Breite von 700 Pixeln, bleibt die breite von li unverändert (also nur so breit, wie das Formular benötigt).

[Detlef G.]

Hallo Froschpopo

hmm, das sieht ja schonmal ganz gut aus:)
ABER, nun nimmt li nichtmehr die volle Breite ein:

Gefloatete Elemente nehmen die Breite ihres Inhalts an, wenn du ihnen nicht sagst, wie breit sie sein sollen.

Du solltest die Inlinestyles rausschmeißen und alles in ein zentrales Stylesheet packen, dann wird es wesentlich einfacher und übersichtlicher.

Auf Wiederlesen
Detlef

[Froschpopo]

Hallo Froschpopo

hmm, das sieht ja schonmal ganz gut aus:)
ABER, nun nimmt li nichtmehr die volle Breite ein:

Gefloatete Elemente nehmen die Breite ihres Inhalts an, wenn du ihnen nicht sagst, wie breit sie sein sollen.

Du solltest die Inlinestyles rausschmeißen und alles in ein zentrales Stylesheet packen, dann wird es wesentlich einfacher und übersichtlicher.

Auf Wiederlesen
Detlef

Hi Detlef,

Liest Du bitte das gesammte Posting :)
Die Stylesheets sind ausgelagert. Würde ich den tatsächlichen Code posten, würde sich keiner Melden weil das Copy & Paste zu aufwändig wäre.

Zu deiner technischen Antwort: Das Problem ist, dass ich keine Pixelangaben geben kann, da die Breite dynamisch ist. In HTML würde ich einfach 100% nehmen. Da das äußerste Element allerdings einen padding-Wert besitzt, kommt es zu einer überlappung und zwar um soviel, wie bei padding gewünscht wurde.
im Klartext heißt das: VErwende ich einen Prozentwert, werden padding-ANgaben ignoriert.

[Detlef G.]

Hallo Froschpopo

Liest Du bitte das gesammte Posting :)

Das habe ich getan, und jetzt extra noch einmal - und?

Die Stylesheets sind ausgelagert. Würde ich den tatsächlichen Code posten, würde sich keiner Melden weil das Copy & Paste zu aufwändig wäre.

Wer hat etwas von auslagern geschrieben, oder davon, dass du den tatsächlichen Code hier ins Forum pasten sollst?
Am besten ist es, eine (möglichst auf das Problem reduzierte) Seite hier zu verlinken. Ein Klick - und ich kann das Problem anschauen (auch in verschiedenen Browsern), ein weiterer Klick und ich habe den Quelltext übersichtlich in meiner gewohnten Editoransicht oder ich ändere das CSS zum Test gleich im Browser. Bei diesem reingepasteten Zeug, muss ich markieren - kopieren - Editor öffnen - neues Dokument - Einfügen.

Zu deiner technischen Antwort: Das Problem ist, dass ich keine Pixelangaben geben kann, da die Breite dynamisch ist.

Das ging aus deinem Posting nicht hervor.
Es gibt noch andere Möglichkeiten, den Block Formatting Contexts zu erreichen, wie du in diesem Posting auch selbst schriebst.

Den overflow auf "auto" zu setzen bringt leider auch nichts, da der IE es einfach ignoriert

Ja, Der Internet Explorer, ein Universum für sich, auch er lässt sich dazu überreden.

und Mozilla plötzlich eine <li>-Rahmenfarbe  weiss darstellt, anstatt grün.

Das allerdings verstehe ich nicht. Dass Mozilla plötzlich die Farben vertausscht, habe ich noch nicht erlebt.

So sollte es funktionieren:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
 <head>  
  <title>Test</title>  
  <style type="text/css">  
[code lang=css]ul {  
    width:700px;  
    border:1px solid red;  
}  
label {  
    display: block;  
    float: left;  
    width: 140px;  
}  
  
ul, li {  
    margin: 0;  
    padding: 0;  
    display: block;  
}  
li {  
    list-style:none;  
    border-bottom: 1px solid green;  
    overflow:auto;  
}  
* html li {  
    overflow:visible;  
    height:1px;  
}  

~~~  </style>  
 </head>  
 <body>  
  <ul>  
   <li>  
     <label for="test">Eingabe:und ein Zeilenumbruch...j rtjzrt j j........</label>  
     <input type="text" name="input" id="test"  />  
   </li>  
   <li>  
     <label for="test1">Eingabe:und ein Zeilenumbruch...........</label>  
     <input type="text" name="input" id="test1"  />  
   </li>  
  </ul>  
 </body>  
</html>  
  
[/code]  
Auf Wiederlesen  
Detlef  

-- 
- Wissen ist gut  
- Können ist besser  
  
- aber das Beste und Interessanteste ist der Weg dahin!

[Froschpopo]

Ich experimentiere jetzt schon seit Stunden rum und bekomme die Breite einfach nicht hin.

Die Aussage von Detlef:

"Gefloatete Elemente nehmen die Breite ihres Inhalts an, wenn du ihnen nicht sagst, wie breit sie sein sollen."

Was soll ich denn sagen, damit Sie so breit sind wie deren eltern-element? Prozentwerte kann man ja wohl vergessen, der Mozilla ignoriert alle padding-Angaben und überlappt Den Rand des Eltern-Elementes.

[Jens Holzkämper]

Tach,

Was soll ich denn sagen, damit Sie so breit sind wie deren eltern-element?

das kannst du nicht, außer du weißt, wie groß das Elternelement ist.

Prozentwerte kann man ja wohl vergessen,

Prozentwerte beziehen sich ja auch auf die normale Größe des jetzt gefloateten Elements.

der Mozilla ignoriert alle padding-Angaben und überlappt Den Rand des Eltern-Elementes.

Weil dieses ja auch nicht im selben Elementfluß ist wie das gefloatete Element, das hatten wir doch schon.

mfg
Woodfighter

[Froschpopo]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
 <head>
 <title>Test</title>

<body>
  <ul style="width:450px;background-color:red">
   <li style="border-bottom:1px solid #000;float:left;">
       <label for="test" style="float:left;display:block;width:140px;">Eingabe:und ein Zeilenumbruch...........</label>
       <input type="text" name="input" id="test"  />
   </li>
   <li style="border-bottom:1px solid #000;float:left;clear:left;">
       <label for="test" style="float:left;display:block;width:140px;">Eingabe:und ein Zeilenumbruch...........</label>
       <input type="text" name="input" id="test"  />
   </li>
  </ul>
 </body>
</html>

Irgendwo musste ja ein Harken sein.
Der Code hat genau dasselbe Problem wie mein erster auch. Du kannst das obige Beispiel einfach kopieren und es dir dann im Internet Explorer mal anschauen.

CSS: Von wegen Barrierefreie tolle Formulare

[Jens Holzkämper]

Tach,

Das liegt definitiv an meinem -moz-inline-box-Hack.

warum benutzt du inline-box? Wäre dir mit display:block und floats nicht mehr geholfen?

Ich frage mich nur die ganze Nacht schon, worin hier ein Zusammenhang besteht. Der IE und andere Browser lassen eine label-formatierung innerhalb einer inline-box zu!!

Kein Nicht-Gecko kennt inline-box, meintest du vielleicht inline-block?

mfg
Woodfighter

[Froschpopo]

Tach,

Das liegt definitiv an meinem -moz-inline-box-Hack.

warum benutzt du inline-box? Wäre dir mit display:block und floats nicht mehr geholfen?

Ich frage mich nur die ganze Nacht schon, worin hier ein Zusammenhang besteht. Der IE und andere Browser lassen eine label-formatierung innerhalb einer inline-box zu!!

Kein Nicht-Gecko kennt inline-box, meintest du vielleicht inline-block?

mfg
Woodfighter

Hi woodfighter!

Mit float hatte ich es auch schon probiert:

#sign ol li label {
    display: block;
    float: left;
    width: 140px;
}

#sign ol, #sign li {
    margin: 0; padding: 0;
}

#sign ol li {
    clear: left;
    list-style:none;
    border-botom: 1px solid green;
}

Das Problem hierbei ist jedoch folgendes:
Das Block-Element fängt an, das darunter folgende <li> zu überlappen, insofern im Block ein Zeilenumbruch erfolgte.

Den overflow auf "auto" zu setzen bringt leider auch nichts, da der IE es einfach ignoriert und Mozilla plötzlich eine <li>-Rahmenfarbe  weiss darstellt, anstatt grün.

[Struppi]

#formular ol li label {
    display: inline;
    display: -moz-inline-box; /* vermutlich die PROBLEMZEILE */

Wieso benutzt du überhaupt diese Eigenschaft?

Struppi.