nicht angemeldet
prozentuale Breitenangabe
Hallo Leute,
hier das Problem:
<div style="width:80%;background-color:#ccc">
<div style="width:100%">
<div style="width:43%;background-color:red;height:100px;float:left;margin-left:3px;"></div>
<div style="width:2px;background-color:blue;height:100px;float:left;"></div>
<div style="width:13%;background-color:green;height:100px;float:left"></div>
</div>
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;clear:both"><tbody><tr>
<td style="width:3px"></td>
<td style="width:43%;background-color:black"></td>
<td style="width:2px;background-color:yellow"></td>
<td style="width:13%;background-color:blue"></td>
<td>leer</td>
</tr></tbody></table>
</div>
Am besten kurz mal ausprobieren und ausführen.
Wenn man nun das Browserfenster verkleinert bzw. vergrößert, stellt man fest, dass die prozentuale Breitenangabe (um 1px) variiert, d.h. die obere nicht gleich der unteren ist. Wie kann ich das Problem lösen?
Gruß, Stefan
-
hi Stefan,
<div style="width:80%;background-color:#ccc">
<div style="width:100%">
<div style="width:43%;background-color:red;height:100px;float:left;margin-left:3px;"></div>
<div style="width:2px;background-color:blue;height:100px;float:left;"></div>
<div style="width:13%;background-color:green;height:100px;float:left"></div>
</div>
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;clear:both"><tbody><tr>
<td style="width:3px"></td>
<td style="width:43%;background-color:black"></td>
<td style="width:2px;background-color:yellow"></td>
<td style="width:13%;background-color:blue"></td>
<td>leer</td>
</tr></tbody></table>
</div>Am besten kurz mal ausprobieren und ausführen.
Nö, keine zeit. :)
Wenn man nun das Browserfenster verkleinert bzw. vergrößert, stellt man fest, dass die prozentuale Breitenangabe (um 1px) variiert, d.h. die obere nicht gleich der unteren ist. Wie kann ich das Problem lösen?
Das innere div nimmt im default die volle breite ein, also die realen 100%,
width: 100%;verhält sich da nicht so ideal.Also, im default mal probieren, also breiten angabe.
Grüße aus H im R an Stefan,
Primus Enginus-
Ich habe festgestellt, dass es an dem DIV und an der Tabelle liegt. Ist beides ein DIV oder beides eine Tabelle, so ergeben sich diese kleinen Differenzen nicht.
-
Ich habe festgestellt, dass es an dem DIV und an der Tabelle liegt. Ist beides ein DIV oder beides eine Tabelle, so ergeben sich diese kleinen Differenzen nicht.
padding, margin, border
-
Ich habe festgestellt, dass es an dem DIV und an der Tabelle liegt. Ist beides ein DIV oder beides eine Tabelle, so ergeben sich diese kleinen Differenzen nicht.
padding, margin, border
Auch mit padding:0;margin:0;border:0 in allen Elementen tritt der Effekt auf.
-
Auch mit padding:0;margin:0;border:0 in allen Elementen tritt der Effekt auf.
Versuch mal das Reset CSS von Yahoo vor deinem CSS einzubinden. Ab und zu übersieht man was und das sollte eigentlich alle voreinstellungen im CSS zurücksetzen.
http://yui.yahooapis.com/2.3.1/build/reset/reset-min.css
-
Auch mit padding:0;margin:0;border:0 in allen Elementen tritt der Effekt auf.
Versuch mal das Reset CSS von Yahoo vor deinem CSS einzubinden. Ab und zu übersieht man was und das sollte eigentlich alle voreinstellungen im CSS zurücksetzen.
http://yui.yahooapis.com/2.3.1/build/reset/reset-min.css
Danke für den Tipp, aber das hilft leider auch nicht.
Ist doch ein seltsames Phänomen...
wegen Beispielseite: einfach den Codeschnipsel aus meinem ersten Post in ein leeres HTML-File und ausführen. Dann das Browserfenster horizontal größer/kleiner ziehen, dann sieht man den Effekt, wenn man genau hinsieht.-
wegen Beispielseite: einfach den Codeschnipsel aus meinem ersten Post in ein leeres HTML-File und ausführen. Dann das Browserfenster horizontal größer/kleiner ziehen, dann sieht man den Effekt, wenn man genau hinsieht.
sicher nicht, da es keinerlei aussage zu deinem code restlichen code macht - ggf liegt die falschdarstellnug nur an invalidem html
-
wegen Beispielseite: einfach den Codeschnipsel aus meinem ersten Post in ein leeres HTML-File und ausführen. Dann das Browserfenster horizontal größer/kleiner ziehen, dann sieht man den Effekt, wenn man genau hinsieht.
sicher nicht, da es keinerlei aussage zu deinem code restlichen code macht - ggf liegt die falschdarstellnug nur an invalidem html
Das verstehe ich jetzt nicht ganz... der Effekt tritt bereits bei diesem Codebeispiel in einem leeren HTML-File auf, d.h. es wird nicht besser, wenn ich meinen tatsächlichen Code poste, da der kompliziert ist und ich gerade deshalb den Beispielcode gemacht habe, um zu sehen, ob das Problem allgemein ist => und das Problem ist allgemein.
-
Das verstehe ich jetzt nicht ganz... der Effekt tritt bereits bei diesem Codebeispiel in einem leeren HTML-File auf, d.h. es wird nicht besser, wenn ich meinen tatsächlichen Code poste, da der kompliziert ist und ich gerade deshalb den Beispielcode gemacht habe, um zu sehen, ob das Problem allgemein ist => und das Problem ist allgemein.
wenn du deinen geposteten code in ein leeres file packst, fehlt in erster linie der doctype - ohne diesen ist es nicht möglich, aussagen zu treffen ob was richtig oder falsch ist
xhtml 1.0 transitional
<img src="example.com/pseudo.png" alt="bild" />html 4.01 transitional
<img src="example.com/pseudo.png" alt="bild">umgekehrt ist es jeweils falsch und zwingt den browser in den quirks mode - die dort eingesetzt fehlerkorrektur ist meisten fern vom standard und kann alles mögliche machen
ohne validem code kannst du nie von korrekter darstellung ausgehen
-
-
-
-
-
Auch mit padding:0;margin:0;border:0 in allen Elementen tritt der Effekt auf.
zeig mal eine beispielseite her
-
-
-
-
-
Hi,
Wenn man nun das Browserfenster verkleinert bzw. vergrößert, stellt man fest, dass die prozentuale Breitenangabe (um 1px) variiert, d.h. die obere nicht gleich der unteren ist.
Rundung ist einer der am haeufigsten zu machenden Kompromisse der Mathematik, wenn sie auf Ganzzahlen sich zu beschraenken gezwungen ist.
MfG ChrisB
