nicht angemeldet
Boxmodell
Hallo.
Ich scheine das Boxmodell immer noch nicht wirklich begriffen zu haben, bzw. begreife nicht, weshalb die Browser[1][2] die Tabellen jener Seite[3] nicht gleich breit darstellen. Beim Vergrößern der Ausschnitte der beiden Screenshots sieht man die Unterschiede eventuell besser.
Die Breitenangaben bei oberer und mittlerer Tabelle kann man wegen der Breite der Bilder wohl weglassen.
Obere Tabelle:
#table {
border-spacing: 0;
border-collapse: collapse;
text-align: center;
background-color: #fff;
}
#border {
border: 7px solid rgb(241,241,241);
}
mittlere:
#menue {
border-spacing: 0;
border-collapse: collapse;
border: 7px solid rgb(241,241,241);
text-align: left;
padding-right: 0;
}
untere:
table#text {
width: 707px;
height: 425px;
background-color: #fff;
border-spacing: 0;
border-collapse: collapse;
text-align: left;
border: 7px solid rgb(241,241,241);
vertical-align: top;
}
td.text {
width: 332px;
padding: 7px;
vertical-align: top;
text-align: justify;
line-height: 15px;
}
td#trenner {
width: 3px;
background-color: rgb(241,241,241);
}
[1] http://visualgrafyx.com/projects/tmp/ie.jpg
[2] http://visualgrafyx.com/projects/tmp/opera.jpg
[3] http://visualgrafyx.com/projects/tmp/
-
Hallo Johannes,
um Deinen Code bis in die Tiefe zu ergründen, fehlt mir leider im Moment die Zeit, nur soviel zum Boxmodell (aber das weißt Du vielleicht selbst schon): der IE bastelt das padding nach innen dran, zieht es also von der mit width definierten Breite ab, während Opera, Mozilla etc das padding (spezifikationsgemäß korrekt, wenn auch nicht intuitiv logisch...) zur mit width definierten Breite hinzufügen, also außen dranbasteln. Folglich sehen solche Boxen in diesen Browsern niemals pixelgenau gleich aus.
Falls man unbedingt pixelgenau sein muß oder will: manchmal hilft es, auf padding ganz zu verzichten bzw. es auf Null zu setzen, und ausschließlich mit margins zu arbeiten. Also das jeweilige Eltern-Element mit padding:0px; zu definieren, und dann die Kind-Elemente mit margin:7px; (oder entsprechende Maße). Ist etwas mühsamer, aber manchmal geht es so.
Aber mal was anderes: Warum verzichtest Du nicht ganz auf die Tabellen und positionierst das Ganze komplett mit CSS? Ist doch viel eleganter, und vor allem: schneller zu ändern, weil Du nur noch in _einer_ CSS-Datei statt in soundsovielen HTML-Dateien herumcoden mußt.
Infos zum Boxmodel und diverse Boxmodel-Hacks findest Du hier:
http://www.brainjar.com/css/positioning/default.asp
http://www.tantek.com/CSS/Examples/boxmodelhack.html
http://www.info.com.ph/~etan/w3pantheon/style/bmhcompare.htmlUnd ein paar schöne Beispiele zum Positionieren mit CSS hier:
http://glish.com/css/
http://www.bluerobot.com/web/layouts/
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.htmlViel Spaß und herzliche Grüße,
Meg-----------------------------------------
Bullshit-Generator, <img src="http://www.megpalffy.org/rutabagaland/img/rutabicon07.gif" border="0" alt="">/rutabagaland/
und Kunst, nach der keiner gefragt hat:
http://www.megpalffy.org/
------------------------------------------
um Deinen Code bis in die Tiefe zu ergründen, fehlt mir leider im Moment die Zeit, nur soviel zum Boxmodell (aber das weißt Du vielleicht selbst schon): der IE bastelt das padding nach innen dran, zieht es also von der mit width definierten Breite ab, während Opera, Mozilla etc das padding (spezifikationsgemäß korrekt, wenn auch nicht intuitiv logisch...) zur mit width definierten Breite hinzufügen, also außen dranbasteln. Folglich sehen solche Boxen in diesen Browsern niemals pixelgenau gleich aus.
Es handelt sich allerdings nur um genaugenommen 7px -> keine Ahnung weshalb. Mit deinen untenstehenden Links konnte ich jedoch auch den IE schliesslich korrigieren.
Falls man unbedingt pixelgenau sein muß oder will: manchmal hilft es, auf padding ganz zu verzichten bzw. es auf Null zu setzen, und ausschließlich mit margins zu arbeiten. Also das jeweilige Eltern-Element mit padding:0px; zu definieren, und dann die Kind-Elemente mit margin:7px; (oder entsprechende Maße). Ist etwas mühsamer, aber manchmal geht es so.
Ob margin oder padding scheint egal zu sein -> siehe Links.
Aber mal was anderes: Warum verzichtest Du nicht ganz auf die Tabellen und positionierst das Ganze komplett mit CSS? Ist doch viel eleganter, und vor allem: schneller zu ändern, weil Du nur noch in _einer_ CSS-Datei statt in soundsovielen HTML-Dateien herumcoden mußt.
Ich erstelle die Seiten, nicht mehr und nicht weniger.
Vielen Dank zwecks Links. Damit konnte man zumindest die CSS-Bugs in den IE-Browsern umgehen.
-