Anzeigefehler Firefox Menu

[Adrasteia]

Hallo,

weis jemand von euch Rat, wie ich den Firefox dazu bekomme Menuelemente richtig anzuzeigen, so wie der IE auch?

Soll heißen im IE9 wird alles angezeigt, nur der FF5 will nicht so wie ich.

Anzeige im FF5

Anzeige im IE9


Hier der ccs Bereich dazu

/* main navigation */
#nav  { background: url(../../images/topnav.jpg) repeat-x bottom #322C2C; min-width: 990px; }
#nav-content  { margin: 0 auto; width: 978px; }
#nav .sf-menu  { float: left; line-height: 1.1; max-width: 770px; }
#nav .sf-menu a  { display: block; text-decoration: none; padding: 8px 12px 11px; color: #AAA; font-size: 14px; }
#nav .sf-menu ul li  { border: 1px solid #474331; margin-top: -1px; }
#nav .sf-menu a:hover { background: #373331; color: #FFF; }
#nav .sf-menu li:hover, #nav .sf-menu li.sfHover, #nav .sf-menu ul li  { background: #373331; color: #FFF; }
#nav .sf-menu ul a:hover, #nav .sf-menu ul li.sfHover, #nav .sf-menu ul li:hover { color: #373331; background: #FFF; }
#nav .sf-menu ul li.sfHover a.sf-with-ul { color: #373331; }
#nav .sf-menu li li a  { padding: 7px 10px; line-height: 1; height: auto; font-size: 12px; }
#nav .sf-menu .sf-with-ul  { padding-right: 15px; }
#nav .sf-sub-indicator  { background: url(../../images/dropdown.png) no-repeat; width: 5px; height: 5px; text-indent: -9999px; display: inline-block; position: relative; left: 7px; top: 0; vertical-align: middle; }
#nav .sf-menu ul .sf-sub-indicator    { display: none; }
#nav .quick-nav li  { padding-top: 8px; }

Hat jemand ne Idee wie ich das dem Firefox beibringen kann, dass er die Verschachtelung korrekt anzeigt?

 

[threadi]

Kannst Du mal noch einen Link dazu zeigen?

 

[Adrasteia]

Ja klar. only one world Ich weis nicht so recht, wo ich ansetzen kann, damit ich dieses Problem loswerde.

 

[threadi]

Hast Du es schon korrigieren können? In meinem FF4 sehe ich kein Problem.

 

[mermshaus]

Erstell bitte ein verkürztes Beispiel, das den Fehler zeigt. Mag sein, dass dir jemand so helfen kann, aber ich bin nicht motiviert genug, mich durch die Komplexität zu denken.

Du musst immer sehen, dass Dritte nicht ohne weiteres wissen, welche Stellen im Code (HTML, CSS, JS) relevant sind (oder potenziell sein könnten) und welche nicht.

 

[Adrasteia]

Danke mermshaus für die klare Ansage. Da weis ich bescheid. Als Anfänger hat man da leider selbst nicht so den Überblick drüber, aber ich werde mich bemühen den erforderlichen Bereich in klein nachzubauen.

@threadi nein der FF5 zeigt bei mir zumindest nachwievor nichts an.

 

[DarkDragon193]

Hab mir das auch mal angesehen, im Chrome wohlgemerkt. Bei dem gezeigten Link hat er auch einen Fehler, aber nur bei dem. Sobald man mit der Maus "drüberhovert" ist der Text sichtbar. Vielleicht kannst du da ja ansetzen?

€dith:

Mit dem Chrome Debugger hab ich mir das ganze mal angesehen und bin zu folgendem Ergebnis gekommen:
Besagtes Element hat die Klasse "sf-with-ul". Jetzt rate mal, wieso das nicht klappt... Hintergrundfarbe = #373331, Textfarbe (durch diese Klasse) = #373331;.

 

[Adrasteia]

Wow, danke für den Hinweis, aber so einfach wie es sich da liest ist das nicht.

Wenn ich nun versuche die Farbe der Klasse zu verändern,

1. erscheint entweder die Hintergrundfarbe nicht, obwohl sie angegeben ist
2. erscheint alles weis

Ich habe den CSS Bereich #nav von oben (mein erster Post) aus dem Codschnipsel mit diesem überschrieben.

#nav{background:#222;min-width:978px;width:978px;border:2px solid #535353;box-shadow:0 0 20px #666;-moz-box-shadow:0 0 20px #666;-webkit-box-shadow:0 0 20px #666;margin:0 auto;padding:none;}
#nav .sf-menu a:hover,#nav .sf-menu li:hover,#nav .sf-menu li.sfHover,#nav .sf-menu ul li{background:#373331;}

So dazu noch die Klasse .sf-with-ul {color: #373331; background: #FFF;} erzeugt dann das hier.


Wenn ich mit der Maus drauf gehe sind also schon die Bereiche weiß, die eine Unterkategorie besitzen. :shock: Werde daraus einfach nicht schlau und reproduzieren kann ich das Problem auch nicht.

 

[DarkDragon193]

Dem Debugger kann man dies entnehmen:

#nav .sf-menu a:hover,
#nav .sf-menu li:hover,
#nav .sf-menu li.sfHover,
#nav .sf-menu ul li {
  background: #373331;
}

#nav .sf-menu ul li.sfHover a.sf-with-ul {
  color: #373331;
}

letzterer Codeteil sollte vielleicht eher so aussehen:

#nav .sf-menu ul li.sfHover a.sf-with-ul {
  color: white;
  background: #373331;
}

#nav .sf-menu ul li.sfHover a.sf-with-ul:hover {
  color: #373331;
  background: white;
}

(getestet, macht auch ein paar Schwierigkeiten.)
Du kennst dich am besten mit deinem CSS aus also weißt du wohl auch am besten, wo was in deinen vielen Klassen hin muss... Ich hab keine Ahnung, was alles Einfluss ausübt genauso wenig wie jeder andere von uns. So ist das verdammt mühselige Arbeit... ;P

 

[Adrasteia]

Jo schon klar. Das muss ich irgendwie auseinander friemeln. Ich danke euch für die Anregungen, das macht mich auf jedenfall schlauer als vorher.