1
Display Table Workaround für IE 6 und 7
Im Moment kämpfe ich mal wieder mit dem Problem, das der IE keine Display-Eigenschaften mit table versteht.
Und zwar habe ich folgendes Szenario:
Das Layout hat eine feste Breite von ca 900px und besteht aus Header, Hauptteil und Footer. Header und Footer haben dabei 100% der Breite. Im Hauptteil(#middle) dagegen sind links(#sidebar) und rechts(#right) je ein Div(mit fester Breite, rechts ist je nach bedarf vorhanden oder eben auch nicht) und in der Mitte der Contentbereich(#content), wobei dieser sich zwischen links und rechts die volle Breite nehmen soll( und wenn eben rechts wegfällt auch den Platz von rechts verwenden soll)
Der HTML-Code für den Hauptteil sieht so aus:
Der CSS-Code dafür so:
Mein Problem dabei ist das im FF und IE8, etc. das auch wunderbar funktioniert. Im IE 6 und 7 dagegen kommt das Problem, das diese ja die Display-Eigenschaften nicht verstehen. Bei einem zweispaltigen konnte ich das ganze auch noch mit Display:block realisieren, bei diesem dreispaltigen Layout funktioniert es aber anscheinend nicht.
Hat irgendjemand vielleicht eine Idee für ein Workaround?(außer natürlich Tabellen-Konstrukte ;) )
Und zwar habe ich folgendes Szenario:
Das Layout hat eine feste Breite von ca 900px und besteht aus Header, Hauptteil und Footer. Header und Footer haben dabei 100% der Breite. Im Hauptteil(#middle) dagegen sind links(#sidebar) und rechts(#right) je ein Div(mit fester Breite, rechts ist je nach bedarf vorhanden oder eben auch nicht) und in der Mitte der Contentbereich(#content), wobei dieser sich zwischen links und rechts die volle Breite nehmen soll( und wenn eben rechts wegfällt auch den Platz von rechts verwenden soll)
Der HTML-Code für den Hauptteil sieht so aus:
<div id="middle">
<div id="row">
<div id="sidebar">sidebar</div>
<div id="content">content</div>
<div id="right">right</div>
</div>
</div>#middle
{
width: 990px;
float: left;
display: table;
border: 1px solid red;
}
#row
{
display: table-row;
}
#sidebar
{
width: auto;
display: table-cell;
border: 1px solid green;
}
#content
{
width: 100%;
display: table-cell;
border: 1px solid green;
}
#right
{
width: auto;
display: table-cell;
border: 1px solid green;
} Mein Problem dabei ist das im FF und IE8, etc. das auch wunderbar funktioniert. Im IE 6 und 7 dagegen kommt das Problem, das diese ja die Display-Eigenschaften nicht verstehen. Bei einem zweispaltigen konnte ich das ganze auch noch mit Display:block realisieren, bei diesem dreispaltigen Layout funktioniert es aber anscheinend nicht.
Hat irgendjemand vielleicht eine Idee für ein Workaround?(außer natürlich Tabellen-Konstrukte ;) )
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 116459
Url: https://administrator.de/contentid/116459
Ausgedruckt am: 25.11.2024 um 19:11 Uhr
1 Kommentar
Du machst da gefährliche Spielchen 
Und denk dran: Auch die Nutzerzahl von Safari ist mittlerweile nicht mehr zu verachten.
Nun sind Three-Column-Layouts aber auch schon zur Genüge thematisiert worden:
http://css-discuss.incutio.com/?page=ThreeColumnLayouts
Dort findest du garantiert eine passende Vorlage
Grüße
Max
Und denk dran: Auch die Nutzerzahl von Safari ist mittlerweile nicht mehr zu verachten.
Nun sind Three-Column-Layouts aber auch schon zur Genüge thematisiert worden:
http://css-discuss.incutio.com/?page=ThreeColumnLayouts
Dort findest du garantiert eine passende Vorlage
Grüße
Max
