Simon: CSS Selektor/ Dreamweaver Spry Horizontal Menu

Liebes Forum,

ich habe in Dreamweaver eine Spry-Menüleiste eingefügt und anschließend folgende Anleitung befolgt, um die Breite der Buttons variabel zu machen:
http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthHorizontalMenuBarSample.html

Ich hatte daraufhin aber folgende Probleme unter IE: das Sub-Menü hat sich nicht wie gewünscht vertikal nach unten ausgeklappt, sondern ist immer nach rechts ausgefahren.

Dabei ist mir aufgefallen, dass das Problem verschwindet, wenn ich schreibe:

ul.MenuBarHorizontal#navigation_menu ul li { white-space: nowrap; display: block; float: none; width: auto; }

anstatt:

ul.MenuBarHorizontal ul li { display: block; float: none; width: auto; white-space: nowrap; }

#navigation_menu ist dabei das id des Menüs (des <ul> Tags).

Hat vielleicht jemand eine Ahnung, warum das so ist?

Würde mich brennend interessieren!

Viele Grüße
Simon

  1. Om nah hoo pez nyeetz, Simon!

    Dabei ist mir aufgefallen, dass das Problem verschwindet, wenn ich schreibe:

    > ul.MenuBarHorizontal#navigation_menu ul li { > white-space: nowrap; > display: block; > float: none; > width: auto; > }

    anstatt:

    ul.MenuBarHorizontal ul li { > display: block; > float: none; > width: auto; > white-space: nowrap; > }

    ersteres ist ein Selektor höherer [ref:self812;css/formate/kaskade.htm#spezifitaet@title=Spezifität] (0113 gegen 0013)

    Matthias

    -- Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
    1. Hallo,

      ul.MenuBarHorizontal#navigation_menu ul li
      ul.MenuBarHorizontal ul li

      ersteres ist ein Selektor höherer Spezifität (0113 gegen 0013)

      mit anderen Worten: Irgendwo muss eine weitere Regel existieren, die auf ul.MenuBarHorizontal ul li (ohne ID) zutrifft und eine oder mehrere der vier Eigenschaften nochmal anders setzt.

      So long,
       Martin

      --
      Ein Snob ist ein Mensch, der sich auf ein Stachelschwein setzt, ohne eine Miene zu verziehen - nur weil ihm jemand gesagt hat, das sei ein Designersessel.
      Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

      1. Om nah hoo pez nyeetz, Der Martin!

        mit anderen Worten: Irgendwo muss eine weitere Regel existieren, die auf ul.MenuBarHorizontal ul li (ohne ID) zutrifft und eine oder mehrere der vier Eigenschaften nochmal anders setzt.

        Ja, mehr lässt sich aufgrund der dürftigen Fehlerbeschreibung nicht sagen.

        Matthias

        -- Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
        1. Danke für eure Antworten!
          Mir íst schon klar, dass es da irgendetwas geben muss, was die Regel dann wieder überschreibt. Aber was? Hier sind mal alle Selektoren meines angepassten Spry-Menüs:

          ul.MenuBarHorizontal ul.MenuBarActive ul.MenuBarHorizontal li ul.MenuBarHorizontal ul ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarHorizontal ul li ul.MenuBarHorizontal ul ul ul.MenuBarHorizontal li ul li ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible ul.MenuBarHorizontal a ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible ul.MenuBarHorizontal iframe ul.MenuBarHorizontal li.MenuBarItemIE

          Wobei ich nun eben "ul.MenuBarHorizontal ul li" durch "ul.MenuBarHorizontal#navigation_menu ul li" ersetzen muss, damit es funktioniert...

          Könnt ihr mir bitte nochmal helfen?

          Danke & Gruß
          Simon

          1. Om nah hoo pez nyeetz, Simon!

            Es ist zwar klug, sprechende Variablennamen zu verwenden, aber man kann es auch übertreiben.

            Dreamweaver erstellt ein grausiges CSS. In einem solchen Beispiel sollte man mit einer einzigen ID bzw Klasse auskommen und konsequent mit dem Nachfolgeselektor arbeiten.

            nav ul li ul li beispielsweise und abhängig vom html.

            Matthias

            -- Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
            1. Om nah hoo pez nyeetz, Simon!

              Es ist zwar klug, sprechende Variablennamen zu verwenden, aber man kann es auch übertreiben.

              Dreamweaver erstellt ein grausiges CSS. In einem solchen Beispiel sollte man mit *einer einzigen* ID bzw Klasse auskommen und konsequent mit dem Nachfolgeselektor arbeiten.

              #nav ul li ul li beispielsweise und abhängig vom html.

              Matthias

              Danke Matthias,

              das kommt so - wie du auch festgestellt hast - von Dreamweaver! Ich möchte die Systematik auch nicht ändern, da das Spry-Menü auch Javascript verwendet, von dem ich leider keine Ahnung habe :-(

              Gruß
              Severin

          2. Hi,

            Mir íst schon klar, dass es da irgendetwas geben muss, was die Regel dann wieder überschreibt. Aber was?

            Firebug o.ä. nehmen, und nachschauen.

            MfG ChrisB

            --
            RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?