nicht angemeldet
offset problem
Hallihallo,
für ein CSS Kontextmenü verwende ich folgendes Markup. Für jeden Listeneintrag gibt es ein Kontextmenu, die Liste ist so klein dimensioniert, dass man sie scrollen muss. Scroll man die Liste und öffnet das Kontextmenü (durch überfahren des "O"), dann hat das Kontextmenü (in Safari und Opera) einen Top-Offset als würde die Liste keine Höhenbeschränkung haben.
safari (ungewünscht):
Der FF macht es "richtig" (so wie ich es gerne hätte), scrollt man und öffnet das Kontextmenü, befindet sich das Kontextmenu an der gewünschten Position.
firefox (gewünscht):
Wie bekomme ich in den Browsern, die es nicht wie gewünscht darstellen, den Offset weg?
Vielen Dank
<!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>abc</title>
<style type="text/css">
p {margin:0;}
ul {list-style-type:none; margin:0; padding:0;}
.group
{
height:100px;
width:100px;
overflow:auto;
}
.contextMenu
{
float:right;
}
.contextMenu .listItems
{
display:none;
position:absolute;
margin-top:auto;
top:auto;
border:1px solid black;
background: #eee;
list-style-type:none;
}
.contextMenu .toggle:hover
{
color:red;
}
.contextMenu .toggle:hover + .listItems
{
display:block;
}
</style>
</head>
<body>
<ul class="group">
<li>
<div class="contextMenu"><span class="toggle">O</span>
<ul class="listItems">
<li>abc</li>
<li>abcd</li>
<li>abcde</li>
</ul>
</div>
<p>cba</p>
</li>
<li>
<div class="contextMenu"><span class="toggle">O</span>
<ul class="listItems">
<li>abc</li>
<li>abcd</li>
<li>abcde</li>
</ul>
</div>
<p>cba</p>
</li>
<li>
<div class="contextMenu"><span class="toggle">O</span>
<ul class="listItems">
<li>abc</li>
<li>abcd</li>
<li>abcde</li>
</ul>
</div>
<p>cba</p>
</li>
<li>
<div class="contextMenu"><span class="toggle">O</span>
<ul class="listItems">
<li>abc</li>
<li>abcd</li>
<li>abcde</li>
</ul>
</div>
<p>cba</p>
</li>
<li>
<div class="contextMenu"><span class="toggle">O</span>
<ul class="listItems">
<li>abc</li>
<li>abcd</li>
<li>abcde</li>
</ul>
</div>
<p>cba</p>
</li>
<li>
<div class="contextMenu"><span class="toggle">O</span>
<ul class="listItems">
<li>abc</li>
<li>abcd</li>
<li>abcde</li>
</ul>
</div>
<p>cba</p>
</li>
<li>
<div class="contextMenu"><span class="toggle">O</span>
<ul class="listItems">
<li>abc</li>
<li>abcd</li>
<li>abcde</li>
</ul>
</div>
<p>cba</p>
</li>
<li>
<div class="contextMenu"><span class="toggle">O</span>
<ul class="listItems">
<li>abc</li>
<li>abcd</li>
<li>abcde</li>
</ul>
</div>
<p>cba</p>
</li>
<li>
<div class="contextMenu"><span class="toggle">O</span>
<ul class="listItems">
<li>abc</li>
<li>abcd</li>
<li>abcde</li>
</ul>
</div>
<p>cba</p>
</li>
<li>
<div class="contextMenu"><span class="toggle">O</span>
<ul class="listItems">
<li>abc</li>
<li>abcd</li>
<li>abcde</li>
</ul>
</div>
<p>cba</p>
</li>
</ul>
</body>
</html>
-
Wie bekomme ich in den Browsern, die es nicht wie gewünscht darstellen, den Offset weg?
Positioniere .listItems absolut relativ zu .contextMenu.
Letzteres braucht position:relative.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hallo,
Positioniere .listItems absolut relativ zu .contextMenu.
Letzteres braucht position:relative.das war eindeutig zweideutig :)
.contextMenu { float:right; position:relative; } .contextMenu .listItems { position:absolute; }funktioniert leider nicht, da dann die kontextmenubox nicht mehr der overflow:auto liste entfliehen kann (sprich teil des overflows ist).
Danke
-