nicht angemeldet
firefox input width xhtml
hallo
ich habe folgendes problem:
wenn ich innerhalb einer div (padding: 6px;) ein input-feld (z.b. text) mit style="width: 100%;" versehe, zeigt der firefox das input-feld größer an, als 100%.
es geht sogar deutlich über das padding hinaus (um 4px). aber nur rechts! das linke und das vertikale padding werden wunderbar eingehalten.
das ganze tritt allerdings nur auf, wenn der firefox als doctype xhtml übergeben bekommt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div style="padding: 6px; width: 300px; background-color: #f4f3ed;">
<input type="text" style="width: 100%;" name="name" value="">
</div>
ohne den o.g. doctype klappt's, wie es soll (im ie funktioniert es übrigens immer richtig).
kann mir jemand helfen? eigentlich möchte ich nämlich schon xhtml verwenden.
m.klein
-
Hi,
wenn ich innerhalb einer div (padding: 6px;) ein input-feld (z.b. text) mit style="width: 100%;" versehe, zeigt der firefox das input-feld größer an, als 100%.
nein, Firefox wählt die Breite des Feldes genau 100% der 300px des übergeordneten Elementes.
es geht sogar deutlich über das padding hinaus (um 4px).
Das wird der Rahmen sein, nehme ich an, in Kombination mit dem Innen- und Außenabstand.
aber nur rechts!
Naja, soll er den auftretenden Überlauf etwa nach links durchführen?
das ganze tritt allerdings nur auf, wenn der firefox als doctype xhtml übergeben bekommt:
Bei Deinen anderen Versuchen hat er offenbar Deinen Fehler geahnt und korrigiert. Nun hast Du aber den Quirks-Mode verlassen und musst es richtig machen.
(im ie funktioniert es übrigens immer richtig).
Du meinst falsch. Das ist bekannt. Deine IE-Version ist 5.x?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
erstmal vielen dank für die qualifizierte antwort!
Hi,
wenn ich innerhalb einer div (padding: 6px;) ein input-feld (z.b. text) mit style="width: 100%;" versehe, zeigt der firefox das input-feld größer an, als 100%.
nein, Firefox wählt die Breite des Feldes genau 100% der 300px des übergeordneten Elementes.
im quirks-mode ist das input-feld (incl rand) tatsächlich 300px breit und die umgebende div wird auf 312px gestreckt, ihr padding bleibt also korrekt.
im "xhtml-modus" jedoch ist das input-feld (incl rand) 304px breit, die div wird trotzdem nur auf 312px gestreckt und das input-feld geht folglich rechts in das padding hinein.wo ist da die logik? ich versteh's nicht.
es geht sogar deutlich über das padding hinaus (um 4px).
Das wird der Rahmen sein, nehme ich an, in Kombination mit dem Innen- und Außenabstand.
warum gehört der rahmen im xhtml-modus nicht zur breite von 100% (300px) dazu? wie kann man das umgehen?
aber nur rechts!
Naja, soll er den auftretenden Überlauf etwa nach links durchführen?
das ganze tritt allerdings nur auf, wenn der firefox als doctype xhtml übergeben bekommt:
Bei Deinen anderen Versuchen hat er offenbar Deinen Fehler geahnt und korrigiert. Nun hast Du aber den Quirks-Mode verlassen und musst es richtig machen.
wie wäre es denn richtig? welche richtlinien wären zu beachten?
(im ie funktioniert es übrigens immer richtig).
Du meinst falsch. Das ist bekannt. Deine IE-Version ist 5.x?
nö, ie6sp2 (xpsp2)
Cheatah
-
Hallo,
im quirks-mode ist das input-feld (incl rand) tatsächlich 300px breit
Ja, eben das ist falsch.
im "xhtml-modus" jedoch ist das input-feld (incl rand) 304px breit, die div wird trotzdem nur auf 312px gestreckt und das input-feld geht folglich rechts in das padding hinein.
wo ist da die logik? ich versteh's nicht.Über _diese_ "Logik" gab es schon viele Diskussionen. Das Box-Model von CSS http://www.w3.org/TR/CSS21/box.html#box-dimensions legt das so fest.
Mit der Eigenschaft width legst Du die Content-width, also die Breite des Inhalts fest. Alles Andere, also padding, border, margin, liegt außen drum.
Du legst fest, dass Content-width Deines DIVs 300px sein soll. Im DIV, also als Inhalt des DIVs steht das INPUT. Dessen Content-width ist 100%, also 300px. Der Rahmen des INPUT gehört nicht zur Content-width. That's it.
viele Grüße
Axel
-
-