Tabelle mit rowspan im IE richtig ausrichten

[El Supremo]

hallo!

ich habe ein kleines problem mit einer tabelle und hoffe, dass ihr mir helfen könnt.
vereinfacht ausgedrückt habe ich links eine große zelle, die sich per rowspan="4" über 4 zeilen erstreckt. dabei haben anderen zellen in diesen 4 zeilen automatisch die selbe gesamthöhe, wie die "lange" rowspan="4"-zelle.
in opera stellt das kein problem dar, da die die zellen der oberen 3 zeilen so hoch sind, wie sie sein sollen und nur die untere gestreckt wird. im gegensatz dazu streckt der IE die zellen alle gleichmäßig, was zur folge hat, dass einige der oberen zellen, welche eigentlich sehr niedrig sein sollten, unschön gestreckt werden.
zur vereinfachung hier nochmal zwei bilder; das erste, wie es in opera ist, also so, wie es sein soll, und das zeite, wie es im IE aussieht:

nun ja, ich denke, das problem ist offensichtlich: wie bewege ich den IE dazu, die tabelle so wie opera dar zu stellen?
ich bin für alle antworten dankbar!

[Sebastian M. E.]

Moin moin allerseits,

es ist zwar nicht die feine englische Art, funktioniert aber:
Gibt deiner rechten unteren Zelle noch das Attribut height="100%" mit auf den Weg, dann geht es idR.

So weit, MfGrüßen,
Sebastian

[El Supremo]

danke für den tipp, aber mein layout scheint sich wohl einfach nicht an die "regel" halten zu wollen.
weder height="100%" noch height:100%; als style macht einen unterschied, sowohl bei <td> als auch bei <tr>.
der unteren rechten zelle eine feste größe in pixeln zuzuweisen ist leider nicht möglich, da die höhe der linken zelle variiert.

gibt es noch eine andere lösung?

[Gernot Back]

Hallo El Supremo,

gibt es noch eine andere lösung?

Die Frage ist, ob du auch allen Elternelementen deiner Tabellenzelle (abgesehen vielleicht einmal von TBODY und TR) eine vernünftige Höhe zugewiesen hast, an der sich deine TD-Elemente orientieren können, also bis hinauf zu HTML- und BODY-Element. Außerdem hängt es sehr stark vom DOCTYPE ab, wie sich die Browser dann verhalten.

Ich dachte ja bisher immer, es ginge bei der folgenden Beispielseite, bei der ich auch einzelnen Zellen per CSS 100% Höhe verpasse, um sie gegenüber ihren Geschwistern zu bevorzugen, nur ohne vollständige DOCTYPE-Angabe, um den Quirksmodus zu provozieren.

Da dieser aber nur für den IE erforderlich ist, habe ich mich nun darauf besonnen, dass es ja auch über eine XML-Deklaration die Möglichkeit gibt, nur den IE in den Quirksmode zu schicken und alle Browser in einem standardkompatiblen Modus zu belassen:

Und siehe; es geht dann sogar mit den striktesten DOCTYPEs:

http://www.sprachlernspiele.de/engel/matroschka.html

Gruß Gernot

[El Supremo]

danke auch dir für deine antwort!
also...
ich habe keinen elementen außer <table> eine höhe/breite zugewiesen.
ist es nicht so, dass wenn ich einer zelle keine höhe/breite zuordne, diese automatisch an den inhalt angepasst werden?
das dokument hat "html 4.01 strict" als dokumenttyp. von xml verstehe ich leider nichts.

wäre es nicht möglich, die höhe aller zellen per CSS als "an den inhalt angepasst" zu definieren und nur bei der untersten zelle eine streckung zu erlauben?
eine entsprechende CSS angabe kenne ich leider nicht, aber vielleicht ja einer von euch...

[Gernot Back]

Hallo El,

wäre es nicht möglich, die höhe aller zellen per CSS als "an den inhalt angepasst" zu definieren und nur bei der untersten zelle eine streckung zu erlauben?

Nein, "100%" und "inherit" brauchen immer einen Bezug auf das Elternelement, es bleibt dir also nicht erspart, alle Vorfahrenselemente (angesehen von TBODY und TR) in ihrer Höhe zu definieren.

Gruß Gernot

[El Supremo]

Nein, "100%" und "inherit" brauchen immer einen Bezug auf das Elternelement, es bleibt dir also nicht erspart, alle Vorfahrenselemente (angesehen von TBODY und TR) in ihrer Höhe zu definieren.

ach du große ********.
dann muss ich insgesamt umstrukturieren, denn bei einigen elementen kann ich einfach nicht im vorraus bestimmen, wie groß sie später sein sollen.
ich war bisher der meinung, wenn die größe eines elements in prozent angegeben wird, aber nicht die des elternelements, dass dann die größe des kindelements einfach von der effektiven größe des elternelements abhängt. das war so eine schöne illusion....

auch wenn mir nicht gefällt, was ich gelernt habe, natürlich trotzdem vielen dank, Gernot!

[El Supremo]

so, ich habe den tipp jetzt befolgt (denke ich zumindest); es war eigentlich einfacher, als gedacht.
ich habe jetzt einfach der "hohen" zelle die gleiche höhe in em zugewiesen, wie der rechten unteren zelle. eigentlich funktioniert das auch ganz gut. aber...
in der "hohen" zelle befindet sich meine navigation, welche aus grafischen buttons besteht. mit hilfe eines javascripts passend die ihre größe an die aktuelle fensterbreite an, bleiben also immer im selben verhältniss zur fensterbreite. wenn ich nun das fenster schmäler ziehe, werden die grafiken also kleiner. leider wird ihre tabellenzelle dabei nicht kleiner, da diese ja fest in em angegeben ist. dadurch entsteht ein hässlich großer leerraum unterhalb der navigation. kann mir da nochmal jemand helfen?

[Gernot Back]

Hallo El,

so, ich habe den tipp jetzt befolgt (denke ich zumindest); es war eigentlich einfacher, als gedacht.
ich habe jetzt einfach der "hohen" zelle die gleiche höhe in em zugewiesen, wie der rechten unteren zelle. eigentlich funktioniert das auch ganz gut. aber...

Das habe ich dir aber nicht geraten.

in der "hohen" zelle befindet sich meine navigation, welche aus grafischen buttons besteht. mit hilfe eines javascripts passend die ihre größe an die aktuelle fensterbreite an, bleiben also immer im selben verhältniss zur fensterbreite.

Dazu bedarf es keines Javascripts, du kannst weiterhin mit CSS und prozentualen Angaben arbeiten, auch bei den Grafik-Buttons, denen du einfach über CSS 100% der Weite der Tabellenzelle gibst. Wenn du dich zur Höhe der Grafik ausschweigst, also weder über HTML-Attribut noch CSS was dazu sagst, wird die Grafik auch in der Höhe proportional zur zugewiesenen Weite skaliert.

wenn ich nun das fenster schmäler ziehe, werden die grafiken also kleiner. leider wird ihre tabellenzelle dabei nicht kleiner, da diese ja fest in em angegeben ist. dadurch entsteht ein hässlich großer leerraum unterhalb der navigation. kann mir da nochmal jemand helfen?

Du solltest die Maßangaben nicht mischen; definiere entweder alles prozentual oder alles in em. Wenn du dich für em Entscheidest, dann solltest du auch die Weite des BODY-Elementes oder zumindest eines als dessen Einzelkind alles umschließenden Containers in em definieren.

Gruß Gernot

[El Supremo]

ehrlich gesagt herrscht in meinem kopf inzwischen eine recht große wirre...
ich werde versuchen, deine tipps um zu setzen und mich dann evtl. nochmal melden.
auf jedenfall vielen dank, Gernot!