nicht angemeldet
CSS Box-Modell - Was sind eigentlich 100%?
Hallo,
versuche seit einigen Stunden folgendes Problem zu lösen:
Habe eine Wrapper mit eine festen Breite. Darin ist ein Input Element eingebettet mit einem definierten Margin. Nun soll das Input Element in allen Richtungen am Wrapper anliegen. Da sich nach CSS Spezifaktion width auf die "innere" Breite bezieht (warum eigentlich?), vergrössert sich im IE der Wrapper (6.0 win) und im Fireox "fällt" das Input Element nach hnten aus dem Rahmen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div style="border: solid 1px #cbd8eb; width: 400px">
<input style="border: solid 1px #1e3c7b; margin: 8px; width: 80%" value="width: 80%" />
</div>
<p>
</p>
<div style="border: solid 1px #cbd8eb; width: 400px">
<input style="border: solid 1px #1e3c7b; margin: 8px; width: 100%" value="width: 100%" />
</div>
</body>
</html>
Das HTML wird auf Basis eines XML/XSLT Transformation erzeugt die nicht verändert werden kann, d.h. ich suche eine Lösung die mittels CSS zu realieren ist.
Danke schom einmal.
Btw.
Mit <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
funktioniert es natürlich im IE wunderbar. Das sag noch mal einer was gegen den IE "Box-Modell-Fehler" ;-)
-
Hi,
<div style="border: solid 1px #cbd8eb; width: 400px">
<input style="border: solid 1px #1e3c7b; margin: 8px; width: 100%" value="width: 100%" />
</div>Rechne doch einfach: 400-2-16 = 382px.
I.V. mit einem vollständigem DOCTYPE rechnet auch der IE6 so.freundliche Grüße
Ingo -
Hallo,
was passiert wenn Du dem Div ein Padding von 8px gibst statt dem Form-Element ein margin von 8px? Schaut dann doch wie gewünscht aus.
(Hinter 'width: 400px', 'width: 80%;', 'width: 100%' kann man noch ein ; setzen.)
-
Vermutung:
Da sich immer width + margin + padding addieren ist das so vermutlich auch korrekt. Wobei ich es auch seltsam finde.
100% des ganzen + 8px dazu.Nur der IE addiert diese im Q.-Modus nicht. Der macht Gesamtbreite =100% inkl. 8px margin.
Ich hab dem ganzen mal einen strict DTD verpasst, änderte beim IE6 aber nichts. ???