mkzero
May 20, 2009, updated at 09:20:09 (UTC)
view6199
view1
0
Goto Top

Display Table Workaround für IE 6 und 7

GermanQuestionCSSDevelopment
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:

<div id="middle">   
    <div id="row">   
        <div id="sidebar">sidebar</div>   
        <div id="content">content</div>   
        <div id="right">right</div>   
    </div> 
</div>
Der CSS-Code dafür so:

#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 ;) )
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 116459

Url: https://administrator.de/contentid/116459

Printed on: April 27, 2024 at 00:04 o'clock

1 Comment
Goto Top
Member: dog
dog May 21, 2009 at 00:34:14 (UTC)
Goto Top
Du machst da gefährliche Spielchen face-smile

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
GermanQuestionCSSDevelopment