nicht angemeldet
Hallo,
bin gerade wieder einmal auf ein kleines Problem im Zusammenspiel von CSS und dem Internet Explorer gestoßen...
Ich habe ein DIV Element, welchem ich die CSS Eigenschaft overflow: hidden gebe. D.h., wenn das Element bspw. 200px hoch, aber dessen Inhalt größer ist, so wird der Inhalt nach 200px abgeschnitten...
In Firefox, Opera und allen (nicht IE) Browsern funktioniert dies auch einwandfrei... nur im Internet Explorer (6.x und 7.x) wird anscheinend overflow: hidden komplett ignoriert!?
Ich könnte nun bspw. um den DIV einen weiteren legen, mit einer Hintergrundfarbe, und diesem einen höheren z-index verpassen, so dass der darüberliegende Inhalt einfach überdeckt wird... dies ist aber für meine Umsetzung als Kontextmenü nicht erwünscht, da der DIV und dessen Inhalt halbtransparent erscheinen soll... und es daher unbedingt notwendig ist, dass der Inhalt bei Überschreitung der 200px Grenze ausgeblendet wird.
Wäre echt nett, wenn ihr mir einen Tipp geben könntet...
Hier noch die komplette Datei:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
HTML, BODY {
}
#cSub {
width: 160px;
height: 200px;
border: solid 1px #000000;
}
#cSub #main {
height: 100%;
overflow: hidden;
}
UL {
position: relative;
top: 0px;
width: 160px;
list-style: none;
margin: 0px;
padding: 0px;
}
UL LI {
border: solid 1px #000000;
}
</STYLE>
<SCRIPT type="text/javascript">
var cMenuTimer = null;
function startScroll(n) {
if (!cMenuTimer) cMenuTimer = setInterval("scroll(" + (n == 'down' ? true : false) + ")", 50)
}
function stopScroll() {
if (cMenuTimer) { clearInterval(cMenuTimer); cMenuTimer = null }
}
function scroll(n) {
with (document.getElementById("menu")) {
var iTop = parseInt(style.top);
if (!iTop) iTop = 0;
iTop = iTop + (n ? -5 : 5);
if (iTop > 0) iTop = 0;
else if (iTop < -offsetHeight + 200) iTop = -offsetHeight + 200;
style.top = iTop + "px"
}
}
</SCRIPT>
</HEAD>
<BODY>
<P>
<A href="javascript:void(0)" onmousedown="startScroll('up')" onmouseup="stopScroll()">up</A>
<A href="javascript:void(0)" onmousedown="startScroll('down')" onmouseup="stopScroll()">down</A>
</P>
<DIV id=cSub>
<DIV id=main>
<UL id=menu>
<LI>Test 1</LI>
<LI>Test 2</LI>
<LI>Test 3</LI>
<LI>Test 4</LI>
<LI>Test 5</LI>
<LI>Test 6</LI>
<LI>Test 7</LI>
<LI>Test 8</LI>
<LI>Test 9</LI>
<LI>Test 10</LI>
<LI>Test 11</LI>
<LI>Test 12</LI>
</UL>
</DIV>
</DIV>
</BODY>
</HTML>
Grüße