Hallo Mike
passt mein Tabellenlayout nicht mehr.
Der IE 6.0 macht bezüglich der Pixelangaben genau das was ihm gesagt wird. Der FF und der NS genehmigen sich 3 zusätzliche Pixel in der Höhe, welche das Layout ruinieren.Per CSS habe ich alle margin und padding auf 0 px gesetzt. Auch habe ich alle "white spaces" und breaks entfernt.
Diese machen üblicherweise im IE Probleme, in anderen Browsern weniger.
Wie bekomme ich diese zusätzlichen Pixel in der Höhe weg?
Diese zusätzlichen Pixel sind die Unterlängen in den Tabellenzellen, die
deine Layoutgrafiken enthalten (Unterlängen für z.B. g,j,p,q,y).
z.B. hier:
<tr style="height:68px; width:100%;">
<td style="height:68px; width:135px;"><img src="./images/ob_li.jpg" width="135" height="68" alt=""></td>
<td style="height:68px; width:75px;"><img src="./images/ob_li_b.jpg" width="75" height="68" alt=""></td>
<td align="right" style="width:100%; height:68px;"><img src="./images/kids.gif" width="200" height="60" alt="All together"></td>
</tr>
Höhe der Zellen 68px, Höhe der Grafiken 68px. die Grafiken werden auf der
Grundlinie der Schriftzeile (auch, wenn keine Schrift vorhanden ist)
ausgerichtet. Tabellenzeilen werden auf das notwendige Maß erweitert,
dadurch erscheint die Unterlänge als zusätzliche Höhe.
Du hast folgende Möglichkeiten:
- du gibst den Layoutgrafiken ein
vertical-align:bottom
odervertical-align:text-bottom
, oder - du gibst ihnen ein
display:block
, oder - du verwendest gleich Hintergrundgrafiken
(meiner Meinung nach für Layoutgrafiken die beste Lösung)
Allerdings möchte ich mich Cheatahs Meinung anschließen:
Eine Umstellung auf Strict, ohne dabei auch das Tabellenlayout zu beseitigen
halte ich für nicht sinnvoll.
Es dürfte sich auch relativ unproblematisch als CSS-Layout umsetzen lassen
(vielleicht sogar einfacher, als mit Tabellen).
Noch eine Anmerkung:
Das animierte Gif auf der Seite sieht furchtbar pixelig aus.
Ich würde ihm ein paar Graustufen gönnen.
Auf Wiederlesen
Detlef
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!