IFrame verschiebt Divs im IE

[Nico]

Hallo!

Ich bastel gerade an einer Vereinshomepage. Dabei versuche ich, folgendes Layout zu realisieren.
+-+--------+-+-+------------------------------------+-+
+-+--------+-+-+------------------------------------+-+
| |        | | |                                    | |
| |        | | |                                    | |
| |        | | |           Main                     | |
| | Navi   | | |                                    | |
| |        | +-+------------------------------------+-+
| |        | +-+------------------------------------+-+
| |        | +-+------------------------------------+-+
| |        | | |                                    | |
| |        | | |           Footer                   | |
| |        | | |                                    | |
+-+--------+-+-+------------------------------------+-+
+-+--------+-+-+------------------------------------+-+
Ich hoffe, es ist so ungefähr zu erkennen. Jedes Rechteck stellt ein Div dar, also insgesamt 27.
Die Divs, die den Bereich Main und Footer bilden, habe ich für moderne Browser mit den Attributen left und right ausgerichtet und für den IE mit

  
height:expression((document.body.clientHeight - 230) + 'px')  

Bzw. mit anderen Werten. Also alles mit CSS und absoluter Positionierung. Das funktioniert auch wunderbar im Firefox als auch im IE.
Im Bereich Main soll jetzt aber noch ein IFrame rein. Sobald irgendwo auf der Seite ein solcher ist, verschieben sich einige Divs im IE scheinbar zufällig. Wenn man die Seite aktualisiert, ohne die Quelltexte geändert zu haben, hüpfen die Divs durcheinander. Das scheint vorwiegend die Divs zu betreffen, die unterhalb des IFrames sind. Die horizontale Ausrichtung bleibt erhalten, nur vertikal verrutschen sie so um ca. 40px, das ist die Höhe der Rand-Divs um die einzelnen Bereiche.
Weiß jemand, wie man das verhindern kann?

Nico

[Felix Riesterer]

Lieber Nico,

Jedes Rechteck stellt ein Div dar, also insgesamt 27.

das ist ein strukturelles Problem, welches vermeidbar ist.

Im Bereich Main soll jetzt aber noch ein IFrame rein.

Warum? Sind Dir Frames die vielen Nachteile wert, die sie mit sich bringen?

Sobald irgendwo auf der Seite ein solcher ist, verschieben sich einige Divs im IE scheinbar zufällig.

Ich ahne, dass eine simplere Struktur Deines (X)HTML-Dokuments und der Verzicht auf Frames die Sache enorm vereinfachen, und Deine Darstellungsprobleme sehr schnell in Luft auflösen könnten.

Liebe Grüße,

Felix Riesterer.

[Nico]

Hallo!

Ich würde die Frames ja auch lieber umgehen, aber das schien mir der einzige Weg zu sein. Übrigens glaube ich nicht, dass ich die Divs übermäßg verwendet habe.
Die drei Bereiche haben alle einen Rand, der nach außen immer transparenter wird, deswegen noch für jeden Bereich 8 RandDivs. Außerdem ist jeder Bereich an sich halbtransparent. Das heißt, wenn ich den Inhalt einfach so in den HauptDiv schreiben würde, sodass dieser verlängert wird, würde das auch durch den Footer scheinen. Außerdem könnte ich bei einem verlängertem HauptDiv den Navigations- und Footerbereich nicht fixieren (also zumindest im IE).
Oder liege ich damit jetzt falsch?

Nico

[Nico]

Gut, ich habe mich doch geirrt. Ein einfaches overflow:scroll reicht für meinen Fall vollkommen aus und bringt den gewünschten Effekt.

Nico

[suit]

Gut, ich habe mich doch geirrt. Ein einfaches overflow:scroll reicht für meinen Fall vollkommen aus und bringt den gewünschten Effekt.

ggf auch overflow: auto; damit wird der schrollbar nur bei bedarf angezeigt - an divitis leidest du aber trotzdem ;D

[suit]

Hallo!

tag auch

Ich würde die Frames ja auch lieber umgehen, aber das schien mir der einzige Weg zu sein. Übrigens glaube ich nicht, dass ich die Divs übermäßg verwendet habe.

doch, du sprichst von "einige" - bei deinem layout gibts aber, rein logisch betrachtet 1 nötiges div element wenn überhaupt (für den inhalt) - das menü kannst du als unsortierte liste bauen, den footer (welcher üblicherweise kontaktinformationen enthält) als address-element

Die drei Bereiche haben alle einen Rand, der nach außen immer transparenter wird, deswegen noch für jeden Bereich 8 RandDivs.

wie vermutet 8 ist schon zu viel - selbst wenn du jedes gruppierende element durch ein div-element ersetzt, wären 3 bei weitem ausreichend (siehe oben)

Außerdem ist jeder Bereich an sich halbtransparent.
Oder liege ich damit jetzt falsch?

ich sehe darin keinen zusammenhang

wie schon erwähnt würde imho folgender html quelltext reichen (ergänzt um die relevanten elemente, damit der code valide ist

  
<body>  
  <ul id="menue" />  
  <div id="inhalt" />  
  <address id="footer" />  
</body>

[Felix Riesterer]

Lieber Nico,

einen Rand, der nach außen immer transparenter wird, deswegen noch für jeden Bereich 8 RandDivs.

das ist definitiv Divitis. Ändere die Struktur Deiner Seite, verwende semantischen Code und poste hier entweder einen Link zum Ergebnis, oder einen relevanten Code-Ausschnitt. Dann kann Dir geholfen werden.

Ich persönlich rate zu dieser Alternative (im Gegensatz zu suit):

<body>  
    <div id="header"></div>  
    <div id="inhalt">  
        <h1>Haupt-Überschrift</h1>  
        <p>... Text ...</p>  
    </div>  
    <div id="navi">  
        <h2>Navigation</h2>  
        <ul>  
            <li><a href="#">Link...</a></li>  
        </ul>  
    </div>  
    <p id="footer">...</p>  
</body>

Liebe Grüße,

Felix Riesterer.

[suit]

Ich persönlich rate zu dieser Alternative (im Gegensatz zu suit):

in der praxis lässt sich natürlich darüber streiten, üblicherweise verwende ich selbst leider auch mehr div-elemente als eigentlich nötig - aber dein beispiel zeigt, dass es durchaus mit weniger als 8 div-elementen funktioniert ;)

[Felix Riesterer]

Lieber suit,

in der praxis lässt sich natürlich darüber streiten, üblicherweise verwende ich selbst leider auch mehr div-elemente als eigentlich nötig - aber dein beispiel zeigt, dass es durchaus mit weniger als 8 div-elementen funktioniert ;)

naja, ich benutze in der Regel öfters einmal mehr als genau acht (in Worten "8") <div>-Elemente, aber nicht alleine dafür, um einen visuellen Rand zu realisieren... Hier sind es gerade einmal zehn, aber für die gesamte Seite.

Liebe Grüße,

Felix Riesterer.

[suit]

Hier sind es gerade einmal zehn, aber für die gesamte Seite.

bei einem kompletten layout ist das ja vertretbar - aber ein layout, welches visuell aus 3 kästen besteht, da verstehe ich bei bestem willen nicht, wie man da 8 kästen machen kann :D