Zentrierung - IE7 hat Probleme mit position:relative;

  • Ich erstelle derzeit eine Homepage. Dabei habe ich Probleme mit der Zentrierung im IE7. (IE6 vernachlässige ich)

    Mein Code sieht folgendermaßen aus: (vereinfacht)

    Code
    <body>
    <div id='header'></div>
    <div id='wrapper'>
     <div id='nav'></div>
     <div id='content'></div>
     <ul id='footer'></ul>
    </div>
    </body>


    Dazu folgender CSS-Code:


    Das Problem stellt sich wie folgt dar:
    Der Wrapper-Div wird im IE7 nicht zentriert sondern klebt an der linken Seite.
    Ich war darüber sehr verwundert, da ich den Code bereits bei einer anderen Seite problemlos verwende, und habe mich deswegen natürlich auf Fehlersuche begeben.

    Letztendlich habe ich gesehen, dass ich nicht GENAU den gleichen Code verwende. Das Problem liegt an position:relative; von #wrapper. Ohne position:relative; wird #wrapper zentriert. Jedoch ist ohne position:relative; der #nav-Div nichtmehr 100% hoch (bzw. zu hoch - er orientiert sich dann ja an body und nichtmehr an #wrapper)

    Wie kann ich es nun lösen, dass #nav 100% Höhe von #wrapper hat, #wrapper aber zentriert ist ?

  • Dann schreibs so:

    Denn: body derart zu verformen ist mitunter problematisch, und "position: relative;" bräuchtest Du bei dem von dir definierten #wrapper gar nicht definieren, da dieser bereits dem body entspräche (weil er ja keine weiteren Eigenschaften hat und z.B. keine andere Breite einnimmt).

  • Ich glaube der Code war zu stark vereinfacht um das Problem wirklich darstellen zu können, deshalb mal der Link: Hier

    Die Vorschläge haben leider nichts gebracht (Außer, dass die komplette Seite im IE7 links ist)

    Ich war davon überzeugt, dass ohne das position:relative; für #wrapper der #nav div sich am body orientiert. Da der body aber nicht genau #wrapper entspricht stimmt das mit height:100% nichtmehr.
    (Außerdem umschließt #wrapper ja nicht #header, wodurch nur durch die Zentrierung #header sowieso links bleibt.)

    Aber vielleicht ist das Problem einfach durch den Link zur Seite besser erkennbar.

    Edit: Übrigens wollte ich #nav nicht mittels float:left in #wrapper positionieren, da, sollte ich in #content etwas floaten und nachfolgend clear:left; verwenden, der Inhalt erst NACH #nav wieder weitergeht.

    Einmal editiert, zuletzt von shikari (22. August 2010 um 01:19)

  • Zitat von MrMurphy

    der Validator sagt, das in Zeile 163 ein div geschlossen wird, das nicht geöffnet wurde. Vielleicht reagiert der IE darauf ja allergisch.


    Validator ist mal eine gute Idee. Ich war so überzeugt, dass ich sauber gecodet hab, dass ich garnicht nachgeschaut hab :P Aber leider löst es nicht das Problem.

    Zitat von threadi

    Und es hilft nicht wie von mir vorgeschlagen statt dem body die umgebenden div-Elemente mit einer festen Breite und margin zu versehen?



    Nein. Ich teste meine Seiten immer mit IE Net Renderer da ich selbst kein Windows habe. Vielleicht stellt der ja auch etwas falsch dar ?

  • Hab ich auch nicht, zumindest nicht zu hause. Schau dir die Seite mal bei http://www.browsershots.org an.


    hm, da scheint die Seite zentriert zu sein (Link zum Bild) - Und es scheint sogar so, als würde die Seite im IE6 funktionieren (zweiter Link), bis auf die Navigation was ich ja aber noch reparieren könnte.

    Dann muss ich wohl mal zu Nachbarn, Freunden oder wem auch immer und mir da mal die Seite anschauen um 100% sicher zu sein.