Zur Navigation

Das Geistermenü - overflow:killfocus

1 C)-(iLL@

Hallo,

Ein wunderbarer (#%&!) Gecko-Bug(?) raubt mir den Verstand. Eigentlich wollte ich nur einen Text haben mit einem CSS-Menü an der Seite, aber wenn der Text auch scrollbar sein soll - also das div mit dem berühmten overflow:auto - dann verliert der Browser den Focus auf die Menü-Liste für Elemente die das Text-div überlagern.
Dieser Effekt tritt in der aktuellen Mozilla-Version (1.7.11) und Firefox 1.0.6 auf - bei Seamonkey Alpha und Opera nicht.
Im Netscape 7.1 sieht man das Untermenü nur mit einem z-index (damit habe ich auch schon erfolglos experimentiert), aber es braucht nicht mal overflow:auto damit das Menü verschwindet.
Hier das Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title></title>
<style type="text/css">
<!--
body, html { padding: 0; margin: 0; height: 100%; }
div#all { width: 80%; margin: 0 auto 0 auto; height: 100%; }
div#content { margin-top: -150px; background: #FAFAFA; position: relative; top: 50%; height: 300px; }
div#text { background: #C0C0C0; height: 100%; overflow: auto; /* unbedingt!! */ }
div#menu { width: 150px; float: right; background: #FFF8DC; height: 100%; }
div#menu > ul { margin: 0; padding: 0; text-align: center; }
div#menu * li{ float: left; margin: 0; width: 150px; padding: 0; list-style: none; position: relative; }
div#menu * ul{ margin: 0; padding: 0; background: #DCDCDC; border: 1px solid #808080; display: none; position: absolute; top: -1px; left: -150px; }
div#menu * li:hover > ul{ display: block; }
-->
</style>
</head>
<body>
<div id="all">
  <div id="content">
     <div id="menu">
     <ul>
       <li>wow, ein Men&uuml;.
         <ul>
           <li>Pustekuchen!</li>
         </ul>
       </li>
     </ul>
     </div>
     <div id="text"></div>
  </div>
</div>
</body>
</html>

Bug oder nicht Bug? Gibt es einen Workaround oder bin ich nur blind? Auch wenns eher unschön wäre, habe ich auch absolute Positionierung versucht, erfolglos.
Es ist schon ein Kreuz. Selbst mit den aktuellen Browsern. Was macht man da, wenn der neue Seamonkey mit der neuen Gecko-Engine (übrigens ein Klasse Teil) das Problem nicht hat, aber alle aktuellen Mozilla/Firefox-Browser schon? Kann man das ignorieren?

Etwas ratlos und dankend für jede Hilfe,
Rudy

19.09.2005 04:19

2 Jörg

Hallo Rudy,

Im Netscape 7.1 sieht man das Untermenü nur mit einem z-index (damit habe ich auch schon erfolglos experimentiert), aber es braucht nicht mal overflow:auto damit das Menü verschwindet.

mit einem z-index > 0 zeigt bei mir auch Firefox 1.0.6 das Menü korrekt an, auch bei overflow:auto für den Textcontainer

div#menu * ul{ margin: 0; padding: 0; background: #DCDCDC; border: 1px solid #808080; display: none; position: absolute; top: -1px; left: -150px; z-index:1; }

19.09.2005 09:18

3 C)-(iLL@

Hallo Jörg,
mit einem z-index > 0 zeigt bei mir auch Firefox 1.0.6 das Menü korrekt an, auch bei overflow:auto für den Textcontainer
Und du kannst mit der Maus über "Pustekuchen" fahren, ohne dass der Menüpunkt verschwindet? Habs gerade noch mal probiert, funktioniert aber leider nicht. Sobald die Maus in den Bereich des Text-Divs kommt, verschwindet der Menüpunkt.

19.09.2005 11:18

4 Jörg

Achso das meintest du. Ich dachte, dass das Menü nicht mehr durchsichtig erscheint. Aber "Pustekuchen" verschwindet bei mir dann auch

---

Nachtrag zu deiner Frage "Bug oder nicht Bug?": wenn der Effekt im Seamonkey Alpha nicht mehr auftritt, handelt es sich wohl um einen Bug, der dort behoben wurde

19.09.2005 11:27 | geändert: 19.09.2005 11:30

5 C)-(iLL@

Das ist das Problem ;( Wie soll ich da Menüpunkte reintun wenn sie verschwinden... ich bekomm noch graue Haare =:) Wie gesagt, auf Opera und Seamonkey einwandfrei.

19.09.2005 11:30

7 C)-(iLL@

Danke Mann, Du bist klasse. Wie findest Du in dem Dschungel bloß den richtigen Bug? Egal - Super!
Das ist ein übel übel übler Bug, sogar der IE bekommt das besser hin. Aber: durch die Nummer habe ich nun auch einen Workaround gefunden: Anstatt display:none einfach left beim Hover ändern, und schon gehts (Zum Glück!!).

div#menu * ul{ margin: 0; padding: 0; background: #DCDCDC; border: 1px solid #808080; position: absolute; top: -1px; left: -500em; z-index:1; }
div#menu * li:hover > ul{ left: -160px; display: block; }
Du hast mich gerettet. ;)

Edit:
Nachtrag zu deiner Frage "Bug oder nicht Bug?": wenn der Effekt im Seamonkey Alpha nicht mehr auftritt, handelt es sich wohl um einen Bug, der dort behoben wurde
Dachte ich mir schon, wollte nur nicht gleich "definitiv Bug!" schreien. Zuerst gehe ich mal von mir als Fehlerquelle aus ;)

19.09.2005 14:21 | geändert: 19.09.2005 14:35

8 Marc (Gast)

Dickes Danke! Hätte nicht gedacht, dass ich den Thread hier finde aufgrund dieses speziellen Problems ;-) Funktioniert prima!

06.11.2005 16:22

Beitrag schreiben (als Gast)





[BBCode-Hilfe]