Tobias Klein: Zusammenspiel von Doctypeangabe, display:block und a:hover im IE

Hallo ihr lieben Forenuser,

Ich habe ein ziemlich krasses Problem mit der Darstellung eines Websiteentwurfs im IE. Ich konnte nur mit Version 6 testen, ältere hab ich nicht zur Verfügung.

Hier der Link zur Testseite: http://bibgem-ma.ath.cx

Wenn man mit der Maus über die Links in dem Dummy-Text in der Mitte der Seite fährt, dann verschwindet plötzlich der untere Teil des zweiten divs auf der linken Seite unter dem Menü (Termine). Im Mozilla sowie Opera gibt es diese Problem nicht.

Wenn ich die Dokumenttypangabe entferne, funzts auch im IE - aber das kann ja nicht Sinn der Sache sein. Den Links in dem Navigationsmenü hab ich die CSS-Eigenschaft display:block zugewiesen - wenn ich das entferne [was ich aber nicht will], funzt es auch im IE. Zu guter Letzt funzt es ebenfalls, wenn ich die a:hover eigenschaften der links rausnehme... *an den kopf greif*

Kennt jemand des Rätsels Lösung?

Greets, Tobias.

  1. Hi,

    Ich habe ein ziemlich krasses Problem mit der Darstellung eines Websiteentwurfs im IE. Ich konnte nur mit Version 6 testen, ältere hab ich nicht zur Verfügung.

    ich habe hier den IE 5, damit kann ich das Problem nicht nachvollziehen.

    Wenn man mit der Maus über die Links in dem Dummy-Text in der Mitte der Seite fährt, dann verschwindet plötzlich der untere Teil des zweiten divs auf der linken Seite unter dem Menü (Termine).

    Klingt ein wenig nach dem Peekaboo-Bug oder einer Variante davon. Google hilft. Kleiner Tipp: Beim IE kann man oft mit unsinnigen Sachen wie border:none (wenn es eh keinen Border gibt) oder display:inline (bei gefloateten Elementen, die dann automatisch block werden) "irgendwas" bewirken.

    *an den kopf greif*

    Ja, in der Tat. Wenn man sich mit IE-Bugs beschäftigt, bleibt einem nichts anderes mehr übrig - und sei es nur zur Kontrolle, ob der Kopf wirklich noch da ist.

    Cheatah

    --
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Neue Erkenntnisse...

      Es muss auch was mit dem floating zu tun haben.

      Der Bug tritt nur auf, wenn die content-spalte eine geringere höhe als die linke spalte hat... (testen mit resize des fensters, so dass content länger als menü). Wenn die content-spalte jedoch eine geringere höhe hat, dann schneidet der ie links sozusagen die andere spalte zurecht - und passt die höhe an... *rätsel*

      Gruß, Tobias

      1. Hi,

        Der Bug tritt nur auf, wenn die content-spalte eine geringere höhe als die linke spalte hat... (testen mit resize des fensters, so dass content länger als menü). Wenn die content-spalte jedoch eine geringere höhe hat, dann schneidet der ie links sozusagen die andere spalte zurecht - und passt die höhe an... *rätsel*

        das wiederum erinnert an den 3-Pixel-Bug :-) den Du sehen kannst, wenn der Content _höher_ ist als die Navigation links: Bis einschließlich der Unterkante des linksgefloateten Elements ist der Text im Content-Bereich drei Pixel zu weit rechts. Vielleicht hilft Dir die Lösung hierzu weiter. Ein Quell der "Freude" zu IE-Bugs ist übrigens http://www.positioniseverything.net/.

        Cheatah

        --
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
      2. Gerad eben hab ich glücklicherweise eine Lösung im Netz gefunden.

        Nachdem ich  explizit für <p> im stylesheet "position:relative;" festgelegt habe, gehts...

        Danke nochmal für den Hinweis bzgl. peekaboo!

        Gruß, Tobias.

        1. Hi,

          Gerad eben hab ich glücklicherweise eine Lösung im Netz gefunden.

          verrätst Du mir bitte, wo? :-) Da ich momentan eine CSS-Schulung in meiner Firma vorbereite, bin ich an solchen Quellen sehr interessiert ...

          Nachdem ich  explizit für <p> im stylesheet "position:relative;" festgelegt habe, gehts...

          Ja, solche Dinge meinte ich mit "unsinnig" ... :-)

          Cheatah

          --
          X-Will-Answer-Email: No
          X-Please-Search-Archive-First: Absolutely Yes
          1. verrätst Du mir bitte, wo? :-) Da ich momentan eine CSS-Schulung in meiner Firma vorbereite, bin ich an solchen Quellen sehr interessiert

            Klar - hätte ich sofort mit posten sollen.

            Hier: http://www.evolt.org/article/MSIE6_bug_with_floating_divs_and_spacers/17/23899/

            Gruß, Tobias.

            1. Hi,

              Hier: http://www.evolt.org/article/MSIE6_bug_with_floating_divs_and_spacers/17/23899/

              danke! evolt.org war mir in dieser Thematik bisher noch überhaupt nicht aufgefallen. Eine Handvoll interessanter Artikel scheint es aber doch zu geben ...

              Cheatah

              --
              X-Will-Answer-Email: No
              X-Please-Search-Archive-First: Absolutely Yes