Bongú!
Ich kann dir leider nur häppchenweise weiterhelfen:
Das Problem:
http://www.roydencom.com/bodyundsoul/html/soul_bsp2.html
-wie bringe ich die oberste Zeile auf 21px-Hoehe (siehe z.B. ns6),
Ein ganz tolles Mozilla-Feature! ;-)
Bilder sind per definitionem standardgemäß vertikal auf 'baseline' positioniert, welches der Unterkante "normaler" Buchstaben entspricht (z.B. x).
Mozilla läßt hier nun unter den Bildern Platz für etwaige Unterlängen von einzelnen Buchstaben (f,g,j,p,q).
Hierbei spielt es für Mozilla keine Rolle, ob in der Tabellenzelle überhaupt Buchstaben sind oder nicht. (Er ist halt ein Prinzipienreiter.)
Diesen Umstand kannst du z.B. dadurch ändern, dass du für die Bilder per CSS 'vertikal-align: bottom;' festlegst. Danach sollten die Tabellenzellen die gewünschte Höhe einhalten.
bzw. die erste Zelle links oben (rowspan="2") auf 214px (aber Tabelle immer noch automatisch 100% Hoehe)
Eventuell mit style="height:214px;" ? Ich habe bei dir nur 'width:214px;' finden können. Einen Versuch mit height wäre es also wert.
-wie bringe ich die horizontalen Scrollbalken in der Zelle mit dem Text weg?
Für IE>5 mit Pseudo-CSS: overflow-y:scroll;. Für andere Browser weiß ich keine Lösung.
-und wie bringe ich diesen Text (in div) auf die ganze TD-Hoehe?
Wenn height:100%; nicht funktioniert, weiß ich es auch nicht.
Insgesamt habe ich die Befürchtung, dass sich deine Designidee so nur schwerlich ohne Frames/Iframes umsetzen lassen wird.
Zumindest könntest du versuchen, mehr mit verschachtelten Tabellen zu arbeiten als mit vielen rowspans und colspans.
HTH.
Sahha,
kerki