ie9 positioniert ein div nicht richtig - ff natürlich richtig

  • Hallo Ihr Lieben,

    das alte leidige Thema mal wieder. FF zeigt gut an, für den IE muss man mal wieder mit conditional CSS ( * vor margins usw.) rumbasteln.

    Hier der Link zur Site um die es aktuell geht: http://www.cb-isis.com Es ist eine Joomla-Seite.

    Der Kern der Site besteht aus 6 grafischen Buttons, die um einen in der Mitte platzierten Contentbereich (ISIS-experience) liegen.
    Dieser Content-Bereich wird beim Start der Site mit einem Div (class = content-start) überlagert, welches eine bestimmte Grafik als Background hat - aber keinen Text.
    Das passt im FF nathlos - aber im IE scheint die mittlere DIV um 1 Pixel nach oben verschoben zu sein.

    Das eigentliche Content-DIV (class = contentArea) passt auch im IE nahtlos, kann man sehen, wenn man auf einen der grafischen Buttons klickt.

    Klickt man dann wieder auf HOME wird wieder das Start-DIV mit seinem Bildchen über den Content gelegt. Und im IE wieder leicht verschoben angezeigt. Im Übrigen wird dieser Vorgang dadurch geregelt, dass ich in den Start-Artikel in Joomla einfach das DIV mit dem Start-Background gelegt habe - ohne Text. Vielleicht ist das ja das Problem, glaube ich aber nicht wirklich.

    Komisch ist auch: wenn ich im IE9 dessen Kompatibilitäts-Switch auf ON stelle befolgt IE die CSS conditions - wirft aber auch noch viel mehr durcheinander. Dafür befolgt er dann auch den CSS hack mit dem ich für den IE das DIV richtig rücken kann. Ist der Switch auf OFF ist alles ordentlich, außer eben dem mittleren DIV.

    Nun könnte ich ja alle design slices auf Kompatibilät im IE auf ON ausrichten. Aber wahrscheinlich hat ja wohl kaum jemand default-mäßig diesen Switch auf ON. Also keine Lösung.

    Wo mache ich einen Denkfehler - kann man dem IE noch auf andere Weise sagen, dass es einen margin-top-Befehl interpretiert und alle anderen Browser eben nicht - so wie bei *margin-top:-1px; - was der IE9 aber einfach nicht lesen will. Habe auch mit einem Doc-Type strict experimentiert. Das ergibt aber einen anderen unschönen Effekt, indem es die untere Menüleiste verschiebt sobald ich auf einen der Nav-buttons klicke und den eigentlichen Content anzeige.

    Viele Grüße - Chris

  • Ich würde an deiner Stelle die positionierung anders machen. Nimm position absolute für die li's, damit wirst du in so einem Fall glücklicher (der liste selbst positon: relative; verpassen, damit kannst du diese immer noch später fröhlich herumschieben)