IE vs FF bei "Trennstrichen" zwischen Spalten

[Stefan]

Hallo,

habe ein dreispaltiges Laoyut:
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell; border-right: silver solid 1px; height: 100%"></div>
<div style="display:table-cell"></div>
<div style="display:table-cell"; border-left: silver solid 1px, height: 100%"></div>
</div>
</div>

Die %-Werte werden vom FF interpretiert und die Länge der Spalten bzw. des Borders mit der mittleren Spalte "abgestimmt": Ist eine der Spalten größer, nimmt der "Trennstrich" eine entsprechende Länge an.

Leider ignoriert der IE %-Werte. Eine Lösung wäre für den ersten Div eine Hintergrundgrafik anzufertigen. Wenn ich aber dynamische Spaltenbreiten habe, ist das ausgeschlossen.

Welchen Rat könnt Ihr mir geben?
Dank dafür,
Stefan

[Cheatah]

Hi,

<div style="display:table">

Empfehlung: Beende *alle* Deklarationen mit einem Semikolon. Auch die letzte.

<div style="display:table-cell"; border-left: silver solid 1px, height: 100%"></div>

Bist Du sicher, dass dieser Code dem entspricht, den Du verwendest?

Leider ignoriert der IE %-Werte.

Bist Du sicher, dass er nicht die display-Werte ignoriert? Mit den meisten table-Typen kann er nichts anfangen.

Welchen Rat könnt Ihr mir geben?

Nach "one true layout" zu suchen.

Cheatah

[Stefan]

Danke,

die Styles beende ich im Stylesheet tatsächlich IMMER mit ;, war hier nur zu schnell/faul. ;)

Für IE ordne ich die Spalten über den Starhack (*html #id {float: left;}) an. Mein Problem ist nun: Wie bringe ich den IE dazu, dass eine Spalte mit geringerer Höhe auch den Rest nutzt (und den spaltentrennenden Border entsprechend langzieht)?

[Cheatah]

Hi,

Für IE ordne ich die Spalten über den Starhack (*html #id {float: left;}) an.

und Du meinst nicht, bei einem IE-Problem wäre der IE-Code vielleicht von Belang gewesen? :-/

Mein Problem ist nun: Wie bringe ich den IE dazu, dass eine Spalte mit geringerer Höhe auch den Rest nutzt (und den spaltentrennenden Border entsprechend langzieht)?

Auf die Gefahr hin, mich zu wiederholen: Suche nach "one true layout". Mit Deinem bisherigen Ansatz findest Du keine Lösung.

Cheatah

[Stefan]

Hi,

Für IE ordne ich die Spalten über den Starhack (*html #id {float: left;}) an.

und Du meinst nicht, bei einem IE-Problem wäre der IE-Code vielleicht von Belang gewesen? :-/

Mein Problem ist nun: Wie bringe ich den IE dazu, dass eine Spalte mit geringerer Höhe auch den Rest nutzt (und den spaltentrennenden Border entsprechend langzieht)?

Auf die Gefahr hin, mich zu wiederholen: Suche nach "one true layout". Mit Deinem bisherigen Ansatz findest Du keine Lösung.

Cheatah

Jo, hätte CSS aus dem HTML rausnehmen und extra über IDs angeben sollen. Dann wäre es klarer gewesen. In meinem Projekt arbeite ich dann schon "korrekt".

Schon nachgelesen. Es gibt tatsächlich keine browserübergreifende Lösung außer einem Bild. Schade, eigentlich.

Danke für die guten Antworten!

[Gunnar Bittersmann]

Hello out there!

<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell; border-right: silver solid 1px; height: 100%"></div>
<div style="display:table-cell"></div>
<div style="display:table-cell"; border-left: silver solid 1px, height: 100%"></div>
</div>
</div>

Das ist ziemlicher Murks. Wenn du ein Tabellenlayout willst, nutze 'table', 'tr', 'td'. Indem du eine Tabelle mit 'div' nachbaust, erreichst du gar nichts; sämtliche Nachteile eines Tabellenlayouts bleiben. Zusätzlich krankt dein Quelltext noch an Divitis.

Für IE ordne ich die Spalten über den Starhack (*html #id {float: left;}) an.

Und das solltest du auch für andere Browser tun. Nur so besteht die Chance, dass sich das Layout flexibel an die Gegebenheiten beim Nutzer anpassen kann.

See ya up the road,
Gunnar

[Gunnar Bittersmann]

Hello out there!

<div style="display:table">

Empfehlung: Beende *alle* Deklarationen mit einem Semikolon. Auch die letzte.

Geht nicht. [MudGuard, icke]

Empfehlung: Schreibe *alle* Deklarationen ins Stylesheet. Vermeide 'style'-Attribute.

See ya up the road,
Gunnar