k4simir: <div> + Dropdown Menü Problem im IE und Firefox

hallo zusammen,

ich habe da eine ziemlich blödes problem mit meiner seite. sie soll ein komplett <div>-basiertes layout besitzen. klassisch: 3 zeilen (header, content, footer), sowie innerhalb der zeilen jeweils 3 spalten (left, main, right).

<!-- ... -->
  <DIV id=wrapper>
    <DIV id=page>
      <DIV id=header>
        <DIV id=headerleft>
          <DIV id=logo></DIV>
        </DIV>
        <DIV id=headermain></DIV>
        <DIV id=headerright></DIV>
        <DIV id=topmainmenu>
          <!-- START module 'Display Menu - Tigra 2-0-1'   -->
        </DIV>
      </DIV>

<DIV id=content>
        <!-- content -->
      </DIV>
      <DIV id=footer>
        <!-- footer -->
      </DIV>
    </DIV>
  </DIV>
<!-- ... -->

soweit so gut. wie im obigen listening zu erkennen, soll im header bereich ein dropdown menü dargestellt werden. das bekannte "display menu tigra". es soll sich am unteren rand des headers befinden und beim aufklappen in den content-bereich hineinreichen.

das ganze könnt ihr euch (vereinfacht) hier anschauen:
http://www.neuber-art.de/joomla/test/index.html

im firefox und opera sieht alles super und völlig korrekt aus! leider vergrößert der IE (version 6) das <div id=header>, weil das <div id=topmainmenu> relativ positioniert ist (mit negativen y-koordinaten). deswegen gibt es innerhalb des headers ein großes schwarzen loch :-(

das soll natürlich nicht da sein. die spontane lösung lautet: einfach für das <div id=header> ein "overflow: hidden" einzuführen. das führt zunächst auch zum erfolg, wie man hier sehen kann:
http://www.neuber-art.de/joomla/test/index_overflow_hidden.html

das schwarze loch ist weg. leider zeigt nun aber der firefox das drowdown menü nicht mehr. es wird (wie es die w3c spezifikation verlangt) einfach abgeschnitten, da es sich ja innerhalb des header bereiches befindet!!!

ich bin echt verweifelt! habe schon alles mögliche probiert und tagelang an diesem template/layout gesessen. langsam denke ich, ich sollte wieder ein tabellen-basiertes layout daraus machen...

hat irgendjemand eine idee, wie ich das problem beheben könnte?

vielen vielen dank
johannes

  1. Hallo johannes,

    schau doch Mal hier http://barrierefrei.e-workers.de/workshops/tricks/menues.php nach

    einen schönen Sonntag noch

    Ralf

    1. Hallo johannes,

      schau doch Mal hier http://barrierefrei.e-workers.de/workshops/tricks/menues.php nach

      das geht leider nicht so einfach. meine seite ist mit dem joomla cms erstellt. deswegen kann ich nur auf module zurückgreifen, die existieren (und ich glaube es gibt noch kein modul für ein rein css-basiertes dropdown-menü, ansonsten würde ich es verwenden). habe auch keine zeit und lust mir was eigenes zu schreiben bzw. das menü statsich per hand zu implementieren. ich will ne dynamische seite (deswegen auch ein cms).

      ausserdem ist das menü ja überhaupt nicht mein problem, sondern eben, wie der internet explorer mit div-tags umgeht ... das menü funktioniert perfekt! wenn man es rausnimmt, macht der IE immernoch murks ...

      für die orginal seite (bzw. die die es mal werden soll) schaust du hier :-)
      http://www.neuber-art.de/joomla/

      einen schönen Sonntag noch

      Ralf

      viele grüße
      johannes

  2. Hi,

    sie soll ein komplett <div>-basiertes layout besitzen.

    schade. Warum verwendest Du kein sinnvolles Markup?

    soweit so gut. wie im obigen listening zu erkennen, soll im header bereich ein dropdown menü dargestellt werden. das bekannte "display menu tigra".

    Ob es wirklich so bekannt ist? Ich kannte es jedenfalls noch nicht. Allerdings ist dieses rein auf Javascript basierende Menü genau deshalb untauglich - es sei denn, Du nimmst bewußt inkauf, daß Besucher ohne Javascript wie auch Suchmaschinen die Seiten nicht aufrufen können.

    weil das <div id=topmainmenu> relativ positioniert ist (mit negativen y-koordinaten).

    und warum verwendest Du hier überhaupt relative Positionierung?

    freundliche Grüße
    Ingo

    1. Hi,

      sie soll ein komplett <div>-basiertes layout besitzen.
      schade. Warum verwendest Du kein sinnvolles Markup?

      was meinst du mit sinnvoller markup? das listing ist kein echtes xhtml ... ich habe es mit dem internet explorer aus meiner original seite (per quelltext anzeigen) extrahiert und nachbearbeitt. der internet explorer wandelt dabei das ursprüngliche (korrekte und gültig xhtml) in eine interne darstellung um. dafür kann ich nix :-)

      soweit so gut. wie im obigen listening zu erkennen, soll im header bereich ein dropdown menü dargestellt werden. das bekannte "display menu tigra".
      Ob es wirklich so bekannt ist? Ich kannte es jedenfalls noch nicht. Allerdings ist dieses rein auf Javascript basierende Menü genau deshalb untauglich - es sei denn, Du nimmst bewußt inkauf, daß Besucher ohne Javascript wie auch Suchmaschinen die Seiten nicht aufrufen können.

      ja das display menu tigra ist meines wissens quasi der standard für crossbrowser dhtml menüs. meine seite ist übrigens mit dem joomla cms erstellt. deswegen kann ich nur auf module zurückgreifen, die existieren ... habe keine zeit und lust mir was eigenes zu schreiben, oder das menü per hand zu implementieren. ausserdem wäre das dann sehr statisch ... ich will ne dynamische seite ...

      besucher ohne javascript kann ich leider nicht bedienen. sorry! habe keinen bock auf solche diskussionen ... nen aktuellen browser und javascript setze ich einfach voraus. punkt aus!

      ausserdem ist das menü ja überhaupt nicht mein problem, sondern eben, wie der internet explorer mit div-tags umgeht ... das menü funktioniert perfekt! wenn man es rausnimmt, macht der IE immernoch murks ...

      weil das <div id=topmainmenu> relativ positioniert ist (mit negativen y-koordinaten).
      und warum verwendest Du hier überhaupt relative Positionierung?

      was sonst? wie soll ich sonst das "topmainmenu" über den anderen header-bereichen positionieren? ja! mir ist es wichtig, dass es ÜBER den anderen header-bereichen liegt, weil das topmainmenu in der originalseite einen alpha-transparenten hintergrund hat und die anderen header-bereiche durchschimmern sollen ...

      zur veranschaulichung schaue man hier :-)
      http://www.neuber-art.de/joomla/

      mfg
      johannes neuber

      1. Hallo k4simir.

        besucher ohne javascript kann ich leider nicht bedienen. sorry! habe keinen bock auf solche diskussionen ... nen aktuellen browser und javascript setze ich einfach voraus. punkt aus!

        Dabei ist doch beides machbar

        Einen schönen Sonntag noch.

        Gruß, Ashura

        --
        sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
        „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
        [HTML Design Constraints: Logical Markup]
        1. Hallo k4simir.

          besucher ohne javascript kann ich leider nicht bedienen. sorry! habe keinen bock auf solche diskussionen ... nen aktuellen browser und javascript setze ich einfach voraus. punkt aus!

          Dabei ist doch beides machbar

          ich weiß, dass beides machbar ist. aber ich möchte einfach nicht alles selbst implementieren. das ist mir zu statisch! ich benutzte das joomla contentmanagement system und kann nur komponenten benutzen, die verfügbar sind...

          klar könnte ich mir das menü selbst implementieren. fein mit css und so. aber dann muss ich jedes mal, wenn ein section oder ein artikel zur seite hinzukommt, das menü per hand anpassen! das macht ansonsten das cms für mich...

          und wie gesagt das problem ist nicht das menü! sondern die blöden divs mit relativer positionierung im internet explorer ...

          Einen schönen Sonntag noch.

          wünsche auch noch nen schönen sonntag

          gruß johannes

      2. Hi,

        schade. Warum verwendest Du kein sinnvolles Markup?
        was meinst du mit sinnvoller markup?

        daß ich nur sinnlose DIVs sehe, aber keine Elemente, die den Inhalt auszeichnen.

        besucher ohne javascript kann ich leider nicht bedienen. sorry! habe keinen bock auf solche diskussionen ... nen aktuellen browser und javascript setze ich einfach voraus. punkt aus!

        Ok, und ich nehme an, daß Dir Besucher im allgemeinen nicht am Herzen liegen, denn zu finden werden Deine Seite dann kaum sein.

        freundliche Grüße
        Ingo

        1. Hi,

          schade. Warum verwendest Du kein sinnvolles Markup?
          was meinst du mit sinnvoller markup?
          daß ich nur sinnlose DIVs sehe, aber keine Elemente, die den Inhalt auszeichnen.

          tz tz. ich sehe schon in diesem forum bekommt man kein antworten nur vorwürfe. habe das problem jetzt alleine gelöst... wie ich den vorherigen postings schon erwähnt habe, ist das ganze nur ein beispiel um das layout zu verdeutlichen. die inhalte kommen dynamisch per php in die div's ... natürlich! sonst würd's ja keinen sinn machen ...

          besucher ohne javascript kann ich leider nicht bedienen. sorry! habe keinen bock auf solche diskussionen ... nen aktuellen browser und javascript setze ich einfach voraus. punkt aus!
          Ok, und ich nehme an, daß Dir Besucher im allgemeinen nicht am Herzen liegen, denn zu finden werden Deine Seite dann kaum sein.

          besucher liegen mir sehr wohl am herzen, aber nicht die, die mit einem textbrowser ohne javascript durchs web surfen. die zielgruppe welche wir ansprechen, haben alle einen aktuellen browser und meist keinen internet explorer (firefox, opera, safari) ... geht aus der bisherigen statistik hervor :-) eine künstlerseite ist nun mal stark visuell ausgelegt.
          für das menü habe ich mir jetzt auch ne andere lösung überlegt, die mit minimalem js auskommt, dynamisch ist (d.h. mit dem joomla cms zusammenarbeitet) und barrierefrei noch dazu (und sehr einfach zu implementieren):
          http://www.htmldog.com/articles/suckerfish/dropdowns/

          freundliche Grüße
          Ingo

          mfg
          johannes

          1. Hallo k4simir.

            besucher liegen mir sehr wohl am herzen, aber nicht die, die mit einem textbrowser ohne javascript durchs web surfen.

            Und was meinst du, was der Bot einer Suchmaschine ist?

            Einen schönen Montag noch.

            Gruß, Ashura

            --
            sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
            „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
            [HTML Design Constraints: Logical Markup]
            1. Hallo k4simir.

              besucher liegen mir sehr wohl am herzen, aber nicht die, die mit einem textbrowser ohne javascript durchs web surfen.

              Und was meinst du, was der Bot einer Suchmaschine ist?

              nen erweiterter textbrowser ohne javascript unterstützung vielleicht!? ;-)

              btw. es gibt auch andere lösungen für die javascript & searchbot problematik. aber sowas wird hier ja anscheinend nicht diskutiert (z.b. eine zusätzlich sitemap anzubieten). aber erstmal drauf auf die leute ...

              von konstruktiven und problembezogenen vorschlägen keine spur. erstmal besserwisserisch daherreden und jeden für einen potentiellen newbie halten, der belehrt werden muss.

              aber das hat jetzt nix mehr mit der usprünglichen thematik dieses threads zu tun ...

              Einen schönen Montag noch.

              Gruß, Ashura

              nen sonnigen montag noch
              johannes