1
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:
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
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ü.
<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