iframe in div-container & IE
Robert S.
- css
Hallo Community,
zzt. entwickle ich für einen Freund eine Webpräsenz. Obwohl mir SELFHTML, das Forum und die Artikel zu treuen Begleitern wurden, stehe ich im Moment an und bitte daher um Eure Mithilfe.
Problemstellung:
Um den verschiedensten Bildschirmformaten unserer Zeit gerecht zu werden, wird der zentrale Teilbereich der Seite dynamisch in Höhe und Breite gehalten.
Das Layout der Seite wird über CSS und <div>'s definiert, wobei bei den meisten die absolute Positionierung angewandt wird, bzw. der dynamische Teil durch Abzug der mit <margin> definierten Abstände automatisch berechnet wird. In FF und Opera steht das fertige Layout und funktioniert einwandfrei. Der IE (6.0) ist dagegen ein echtes Problem.
----------------------------------------------------
| Header-Bereich, fixe Breite und Höhe (1) |
----------------------------------------------------
| | <iframe> f. Breadcrumbs, fixe Breite | |
| (2) | <iframe> Content, H&B dynamisch (3) | (4) |
| | | |
| | | |
----------------------------------------------------
| Footer-Bereich, fixe Breite und Höhe (5) |
----------------------------------------------------
(1) aus vielen Grafiken zusammengebaut und funktioniert auch im IE
(2) absolut positionierte Navigation mit Grafiken hinterlegt, funkt. im IE
(3) der div-container hat fest definierte Außenbereiche, der iframe ist auf 100% (H&B) festgelegt
(4) der div-container hat nach rechts und oben fest definierte Außenbereiche und eine festgelegte Weite, der iframe ist auf 100% (H&B) festgelegt
(5) der Footer ist mit absolut unten positioniert, funktioniert im IE (es wird mir aber trotzdem ein 1px-Abstand nach unten eingefügt, trotz margin:0 ??)
Gesteuert wird das Ganze über ein einfaches JS-Script für die Navigation (funktioniert auch im IE problemlos), wobei in (3) und (4) HTM-Sheets geladen werden, deren Breite und Höhe aber nicht definiert sind.
Während FF und Opera den dynamischen Abstand problemlos berechnen, wodurch die 100% im iframe-tag einen bezug erhalten, schiebt der IE den (3) bis nach ganz rechts (hinter (4) vorbei) und nach ganz unten bzw den (4) nach unten, hinter den Footer. Mittlerweile verwende ich ein eigenes CSS für den IE, was mir schon einen Teil der Lösung gebracht hat. Bitte nicht über den schlampigen Code lästern, aber bei dem vielen Herumprobieren... ;)
Die ersten Testseiten sind unter: http://susa.sarcon.at/index2.htm aufrufbar. (es geht zzt. nur 'Home' und 'Impressum' im Footer)
Im Voraus für jeden brauchbaren Denkanstoß dankbar
Robert
PS: ich löse das deshalb nicht mit z.B. PHP, weil ich es nicht kann