Und zwar seht Ihr unter Test-Formular ein Formuar, das rein mit CSS designt ist (so, wie es auch bei eifnach-fuer-alle beschrieben wird, wenn da nicht ständig Wartungsarbeiten wären; kommt ohne ein einziges div aus ;-)).
Funktioniert im Firefox wunderbar. Aber zumindest im Internet Exploder 7.0.6000.16681 unter Vista scheint es Probleme mit dem float zu geben. Wie Ihr seht (sehen solltet!), werden die input-Felder alle nebeneinander angezeigt, obwohl sie eigentlich neben ihren Labels stehen sollten, weil die labels erst ein clear machen.
Ich mach Formulare eigentlich schon lange so und habe damit im IE6 nie Probleme gehabt. Gibts neue Probleme mit float im IE7 oder hab ich irgendwas übersehen?
Bitte leg jetzt nicht wieder alles auf die Goldwaage, was ich mir zusammengereimt habe. Wenn’s hilft is’ gut, ansonsten war’s nix.
Ich konnte es allerdings nur im IE7 testen und hab’ es damit hinbekommen:
form input, form textarea { display: block; margin-left: 14em;
border:2px solid red;
}
Erklären kann ich mir das so:
Die linken Labels sind gefloatet und entziehen sich damit dem Textfluss der übrigen Elemente.
input und textarea sind Inline-Elemente und ordnen sich deshalb nebeneinander an. Insofern war dein float: left; in diesem Bereich eigentlich ohnehin unnötig bzw. hat die Anordnung nebeneinander nochmal zementiert.
Wenn man nun das float entfernt und ein display: block zuweist, dann ordnen sich input/textarea untereinander an.
Da die Labels gefloatet sind, benötigen input/textarea noch einen Linksabstand, gemessen vom linken Fensterrand unter Berücksichtigung der label-Width und den Label-Rahmen.
Zu dieser Erkenntnis bin ich erst heute gekommen, nachdem ich gestern aufgrund eines ähnlichen Problems diese neue Anleitung geschrieben hatte: Firefox stellt Hintergrund nicht vollständig dar
Man lernt eben immer wieder dazu.
Jetzt hoffe ich, dass das auch in anderen Browsern so funktioniert.
Unabhängig davon, wäre für diese strukturierte Darstellung eine Tabelle vielleicht doch die einfachere Lösung gewesen.
Hmmm…
Also Inline-Elemente und float…das ist klar. Soweit okay.
Aber den Rest versteh ich nicht.
Die labels kriegen doch ein clear. Damit muss der Textfluss eigentlich da fortsetzen, wo das Label dann hinkommt, unter dem letzten Label halt. Firefox macht es so, wie ich mir das vorstelle - deswegen kommen die inputs dann rechts neben dem dazugehörigen Label. Ignoriert der IE hier das clear? Hat er Probleme mit einem Element, das gleichzeitig clear und float bekommt?
Wenn ich Deinen Vorschlag anwende, funktioniert es im IE (wobei das margin nicht unbedingt nötig ist, da die inputs wie jeder Textinhalt nicht unter den Labels verschwinden).
Allerdings stimmt jetzt im Firefox gar nichts mehr! Denn dann stehen die inputs alle direkt untereinander ohne Abstand und orientieren sich mit ihrem oberen Rand nicht mehr am oberen Rand des dazugehörigen Labels!
Unabhängig davon, wäre für diese strukturierte Darstellung eine Tabelle vielleicht doch die einfachere Lösung gewesen.
Einfacher vielleicht, aber sicher nicht richtig. Hier gehts ja eindeutig um Layout.
Außerdem kann man nicht predigen, dass man Tabellen nicht zu Layoutzwecken missbraucht und dann bei der ersten Schwierigkeit wieder auf Tabellen zurückfallen
Aber schonmal danke für Deine Hilfe, vielleicht fällt Dir ja noch was ein, denn im FF muss es logischerweise auch klappen.
Mich würd nur interessieren, welcher Browser hier den Fehler macht, denn einer von beiden hat einen Bug, so viel ist IMHO klar.
Die labels kriegen doch ein clear. Damit muss der Textfluss eigentlich da fortsetzen, wo das Label dann hinkommt, unter dem letzten Label halt.
Das ist richtig. Das clear dient allerdings nur dazu, dass sich die labels untereinander anordnen. Du könntest ebensogut das float weglassen, dann brauchst du auch kein clear.
Im Firefox werde ich mir das über’s Wochenende mal ansehen, falls ich dazu komme.
Zitat:
Unabhängig davon, wäre für diese strukturierte Darstellung eine Tabelle vielleicht doch die einfachere Lösung gewesen.
Einfacher vielleicht, aber sicher nicht richtig. Hier gehts ja eindeutig um Layout.
Das sehe ich in diesem Fall anders, aber darüber werde ich mit dir nun keine neue Diskussion anfangen.
vielleicht fällt Dir ja noch was ein
Habe da noch einen ganz anderen Ansatz, ebenfalls nur im IE 7 getestet. Ist allerdings eine Individuallösung, die von der jeweiligen Höhe der labels abhängt.
Wenn du dich auf eine generelle Einheit (entweder Pixel oder em) verständigen könntest, kann man das ziemlich exakt positionieren.
form label {
border:2px solid gray;
width:10em;
display: block;
}
form input, form textarea {
display: block;
margin-left: 13em;
position: relative; top: -2.8em;
border:2px solid red;
}
Naja, eigentlich wird doch mit clear der normale Textfluss wieder hergestellt, und zwar unter dem längsten gefloateten Element. Oder verstehe ich clear seit Jahren falsch?
Anstelle des Tabellenlayouts kann man einfach ein hinter die setzen, und das clear weglassen, so hab ichs bisher immer gemacht und so funktioniert es in allen Browsern, aber streng genommen ist auch ein Layout-Tag und IMHO müsste das mit dem clear ja eigentlich funktionieren.
form label {
clear:left;
float:left;
border:2px solid gray;
width:10em;
}
Float und clear in einem Element versteht der IE<8 nicht.
Wenn du und bzw. in einem Element umschließt
braucht der IE überhaupt kein clear. Die Internetexplorer clearen automatisch wenn das umschließende Element eine Höhe / bzw. Mindesthöhe hat:
/*IE5-6:*/
* html form span {
display: block;
height: 1%;
}
/*iE7:*/
* +html form span {
display: block;
min-height: 1%;
}
Neuer Termin
Termin*
Kunde*
Ansprechpartner
Telefon
Grund des Besuchs
alakflöaksdals äa
[/code]Damit hat Efchen jetzt drei praktikable Lösungen (mit Tabelle wären es sogar vier) und muss jetzt lediglich noch entscheiden, ob irgendwo noch ein unzulässiger Layout-Tag im HTML-Code enthalten ist. Ich frag mich nur, was dann passieren sollte. Dann darf das Formular wohl nicht veröffentlicht werden - selbst wenn's sauber und valide dargestellt wird. :mrgreen:
Edit:
Da sehe ich noch folgendes vom Validator:
Zeile Spalte: 3
38 Fehler: Im Element ‚form‘ ist das Attribut action vorgeschrieben, welches aber fehlt.
Fehlerstelle:
Zeile Spalte: 7
65 Fehler: Im Element ‚textarea‘ ist das Attribut rows vorgeschrieben, welches aber fehlt.
Fehlerstelle:
Und mein span-Tag hat keinen Inhalt, aber das bemängelt derVali nicht. Oh je oh je…
Wenn du und bzw. in einem Element umschließt
braucht der IE überhaupt kein clear. Ich verwende in ähnlichen Formularen gerne
anstelle oder
. Viele nehmen auch
.
Kann man sehen wie man will.
Kann man sehen wie man will - ich habe bisher immer ein hinters gesetzt. Auch das funktioniert dann.
Deine persönliche Meinung im Sinne von HTML: Besser von einem Element umschließen oder ein ?
Danke Dir!
Vorweg - ich sehe den Smiley, ja.
Das ist wohl eine Sache der persönlichen Einstellung. In mancher Hinsicht bin ich Perfektionist. Wenn, dann richtig. Soweit eben möglich. Interessant wäre halt, was Clients, die den HTML-Code analysieren, daraus machen. Dabei denke ich primär an Google oder Screenreader.
Da sehe ich noch folgendes vom Validator:
Ja, der Code ist aus einer anderen Seite herauskopiert und so zurechtgestuzt, dass Euch keine sensiblen Daten in Eure Äuglein springen
Ich umschließe lieber weil ich dann mehr Selektoren zur Gestaltung habe. würde ich allerdings nicht nehmen. Ohne css würden alle Formularelemente nebeneinander dargestellt werden.
Also entweder mit Blockelement umschließen oder mit umbrechen.
Ein leeres oder
finde ich auch auch nicht verkehrt. Aber auch da würde ich lieber
nehmen.
Screenreader ordnen Inputfelder in jedem Element dem richtigen zu (hoffe ich).
Um Suchmaschinen würde ich mir bei Formularelementen keine Gedanken machen.
Was sollen sie schon wichtiges finden? Mit Begriffen wie Kontakt, Telefon und Kunde kann man bei Google nicht punkten.
Ja, ich glaube ich würde es in Zukunft wohl eher mit dem umschließenden
machen, auch wenn ich einige Mitleser schon kichern höre bei dem Gedanken an div-Suppe (was hier natürlich keine div-Suppe ist)
Screenreader ordnen Inputfelder in jedem Element dem richtigen zu (hoffe ich).
Davon gehe ich aus, nachdem auf einfach-fuer-alle (die haben endlich ihre Wartungsarbeiten beendet ;-)) das so angepriesen wird als besonders barrierefrei. Voraussetzung ist natürlich das Attribut „for“.
(was hier natürlich keine div-Suppe ist)
