Schrift
Wiki:Tipp zum Debugging: use Data::Dumper; local $Data::Dumper::Useqq = 1; print Dumper \@var;
Start · Board · Weitere Sprachen · HTML, CSS und Javascript
[thread]2318[/thread]

CSS: Problem mit label-formatieren: betrifft mozbin



<< >> 8 Einträge, 1 Seite
Froschpopo
 2006-10-31 08:50
#24917 #24917
User since
2003-08-15
2653 Artikel
BenutzerIn
[default_avatar]
Hallo Forum!

Folgendes Problem(chen):

Ich erstelle ein Formular:
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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:
Code: (dl )
1
2
3
4
5
6
7
8
9
10
#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.

Ohne <span>, <b>, usw. zeigt auch die Mozilla alles korrekt an.\n\n

<!--EDIT|Froschpopo|1162278013-->
GwenDragon
 2006-10-31 12:56
#24918 #24918
User since
2005-01-17
14563 Artikel
Admin1
[Homepage]
user image
Quote
Das liegt definitiv an meinem -moz-inline-box-Hack.

Was soll denn der Mozilla-Browser nur anzeigen?
inline oder -moz-inline-box? Beides geht nicht gleichzeitig!
die Drachin, Gwendolyn

Unterschiedliche Perl-Versionen auf Windows (fast wie perlbrew) • Meine Perl-Artikel
Froschpopo
 2006-10-31 14:33
#24919 #24919
User since
2003-08-15
2653 Artikel
BenutzerIn
[default_avatar]
Bei inline passiert im Mozilla nichts. Deshalb die moz-inline-box!
Es ist quasi eine Art hack weil notwendig.
Froschpopo
 2006-10-31 16:29
#24920 #24920
User since
2003-08-15
2653 Artikel
BenutzerIn
[default_avatar]
ich hab jetzt folgendes gemacht:
Code: (dl )
1
2
3
4
5
6
7
8
9
#formular ol li label {
   display: block;
    float:left;
    width: 140px;
}

#formular ol li {
    clear: left;
}

jetzt fängt er allerdings an, das darauffolgende <li>-Element zu überlappen, insofern im darüber liegendem Block ein Zeilenumbruch stattfand.
Im IE siehts völlig entstellt aus.\n\n

<!--EDIT|Froschpopo|1162305020-->
GwenDragon
 2006-10-31 21:35
#24921 #24921
User since
2005-01-17
14563 Artikel
Admin1
[Homepage]
user image
Wozu brauchst du das -moz-inline-box ?
Geht doch auch ohne!
die Drachin, Gwendolyn

Unterschiedliche Perl-Versionen auf Windows (fast wie perlbrew) • Meine Perl-Artikel
GwenDragon
 2006-10-31 22:08
#24922 #24922
User since
2005-01-17
14563 Artikel
Admin1
[Homepage]
user image
Schau mal unter http://www.thestyleworks.de/tut-art....s.shtml
die Drachin, Gwendolyn

Unterschiedliche Perl-Versionen auf Windows (fast wie perlbrew) • Meine Perl-Artikel
Froschpopo
 2006-11-01 00:57
#24923 #24923
User since
2003-08-15
2653 Artikel
BenutzerIn
[default_avatar]
[quote=GwenDragon,31.10.2006, 21:08]Schau mal unter http://www.thestyleworks.de/tut-art....s.shtml[/quote]
Das ist ja schon fast mein Code !
Aber ich wollte eigentlich auf die Einbidung von JavaScript verzichten. Mein Problem ist aber mittlerweile nicht mehr die Tatsache, dass die verschiedenen Browser unterschiedliche Interpretationen von Blöcken kennen, sondern vielmehr dieser overflow-effekt !

Zur deutlichen Veranschauung:

gebe ich dem <li>-Tag einen Unterrahmen: border-bottom: 1px solid

und verwende ich anstelle der inline-box einfach ein normales "block"-Element, das ich mit float:left nach links schiebe und den restlichen Formularinhalt darum fließen lassen,
dann überlappt die float-Box den border-bottom!

Man muss sich das bildlich vorstellen:
Alles funktioniert prima. Der Zeilenumbruch tritt wie gewünscht ein und alles rutscht eine Zeile tiefer. NUR die <li>-border bleiben und werden durch die Float-Box überlappt.
Froschpopo
 2006-11-01 20:35
#24924 #24924
User since
2003-08-15
2653 Artikel
BenutzerIn
[default_avatar]
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <!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>

so funktioniert es jetzt. Aber die div-box dafür zu missbrauchen grenzt in meinem verständnis an Vergewaltigung an. Ein <p> sieht auch nicht schön aus und verunstaltet die lynx-Darstellung. Hat jemand eine bessere Idee?
<< >> 8 Einträge, 1 Seite



View all threads created 2006-10-31 08:50.