nicht angemeldet
/CSS: IE-Problem mit Event-Handlern in Verbindung mit CSS
0
/CSS: IE-Problem mit Event-Handlern in Verbindung mit CSS
Hallo,
ich bin auf ein merkwuerdiges Verhalten des IE bei Event-Handlern in Verbindung mit bestimmtem CSS-Eigenschaften gestossen.
Ich habe innerhalb einer umfangreichen Seite ein Container-Element mit verschiedenen Kindelementen (hx, p), das ich mit einem Event-Handler (onclick, onmouseover/out) versehen habe. In Firefox und Opera funktionieren die Event-Handler im gesamten Bereich des Containers, im IE6 jedoch nur 'auf' dessen Kindelementen.
Nach einigem rumprobieren habe ich festgestellt, dass dieses Verhalten im IE nicht auftritt, wenn ich dem Elternelement 2. Grades, welches einen negativen margin-top besitzt, selbigen wegnehme.
Leider konnte ich das Problem mit margin-top nicht in einem uebersichtlichen Beispiel reproduzieren. Wohl aber habe ich festgestellt, dass das Problem auch dann auftritt, wenn einem uebergeordneten Element eine feste Dimension (Hoehe und/oder Breite) zugewiesen wird, zu sehen auf dieser Beispielseite.
Hat jemand eine Idee woran das liegt, und wie man das Problem beheben koennte? (Ich kann im Praxisfall den negativen margin-top leider nicht entfernen.)
Viele Grüße
Patrick
--
"Though this be madness, yet there's method in't."
sh:( fo:| ch:? rl:( br:^ n4:( ie:{ mo:) va:} de:> zu:) fl:| js:( ss:| ls:[
"Though this be madness, yet there's method in't."
sh:( fo:| ch:? rl:( br:^ n4:( ie:{ mo:) va:} de:> zu:) fl:| js:( ss:| ls:[
-
<!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="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" /><title>Test</title>
<style type="text/css" media="screen">
body {
margin:0;
padding:4em 6em;
}
.wrapper {
height:1%;
}
.container {
margin:2em 0;
background:#eee;
border:1px #000 solid;
}h2, p {
margin:0;/* 1em 2em; */
padding:1em;
}
</style>
<script>
function makeBgDark(e) {
document.getElementById('c1').style.backgroundColor = '#ccc'
}
function makeBgLight(e) {
document.getElementById('c1').style.backgroundColor = '#eee'
}
function init() {
document.getElementById('c1').onmouseover = makeBgDark;
document.getElementById('c1').onmouseout = makeBgLight;
}
</script>
</head>
<body onload="init()">
<div>
<div id="c1" class="container">
<h2>Event-Handler und IE(6)</h2>
<p>
In diesem Beispiel soll sich die Hintergrundfarbe des DIVs .container per
JavaScript aendern, wenn man ihn mit der Maus ueberfaehrt.
</p>
<p>
Bist Du hiermit zufrieden?
Viele Grüße
David
</p>
</div>
</div>
</body></html>-
Hallo David,
das unobtrusive JavaScript (nennt man doch so!? ;) gefällt mir zwar sehr gut, allerdings löst das nicht mein Problem mit dem IE :(
Gibt man dem äusseren div eine Breite/Höhe erhält man im IE wieder denselben Effekt, dass der Text überfahren werden muss, anstatt einfach der gesamte Container.Viele Grüße
Patrick--
"Though this be madness, yet there's method in't."
sh:( fo:| ch:? rl:( br:^ n4:( ie:{ mo:) va:} de:> zu:) fl:| js:( ss:| ls:[-
Ums nochmal deutlicher zu formulieren:
Das Problem liegt wohl nicht am JavaScript, sondern am CSS. Der IE scheint nicht mehr zu wissen dass der Container ein Block-Element ist (oder so ähnlich ;), sobald er in nem Container mit fester Groesse steckt.Viele Grüße
Patrick--
"Though this be madness, yet there's method in't."
sh:( fo:| ch:? rl:( br:^ n4:( ie:{ mo:) va:} de:> zu:) fl:| js:( ss:| ls:[-
Probiers mal hiermit:
<!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="de" lang="de">
<head>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" /><title>Test</title>
<style type="text/css" media="screen">
body {
margin:0;
padding:4em 6em;
}
.wrapper {
margin:2em 0;
/* height:1%; */
}
.container {
/* margin:2em 0; */
background:#eee;
border:1px #000 solid;
}
h2, p {
margin:0;/* 1em 2em; */
padding:0;
}.container h2, p {
margin:0;/* 1em 2em; */
padding:1em;
}
</style>
</head>
<body>
<div>
<div id="c1" class="container" onmouseover="this.style.backgroundColor = '#ccc';" onmouseout="this.style.backgroundColor = '#eee';">
<h2>Event-Handler und IE(6)</h2>
<p>
In diesem Beispiel soll sich die Hintergrundfarbe des DIVs .container per
JavaScript aendern, wenn man ihn mit der Maus ueberfaehrt.
</p>
<p>
Bist Du hiermit zufrieden?
Gruß
David
</p>
</div>
</div>
<div class="wrapper">
<div id="c2" class="container" onmouseover="this.style.backgroundColor = '#ccc';" onmouseout="this.style.backgroundColor = '#eee';"><!-- -->
<h2>Event-Handler und IE(6)</h2>
<p>
Auch hier soll sich die Hintergrundfarbe des DIVs .container per
JavaScript aendern, wenn man ihn mit der Maus ueberfaehrt.
</p>
<p>
Lass die Höhe für den Wrapper weg. Dann klappts bei Netscape und IE und Opera.Gruß
David
</p>
</div>
</div>
</body>
</html>-
Hallo,
Lass die Höhe für den Wrapper weg. Dann klappts bei Netscape und IE und Opera.
Das Problem ist ja, dass ich die Höhe (bzw. die Verwurstelung mit dem negativen margin-top in der eigentlichen Seite wo mir das Problem aufgefallen ist) aus Layout-technischen Gründen eben brauche.
(Ich kann im Praxisfall den negativen margin-top leider nicht entfernen.)
Unabhängig vom eigentlichen Problem:
Ist es möglich, das Script welches du zuerst gepostet hast, so auszuweiten, dass es für alle Elemente mit der Klasse 'container' funktioniert (also ohne IDs vergeben zu müssen)?Viele Grüße
Patrick--
"Though this be madness, yet there's method in't."
sh:( fo:| ch:? rl:( br:^ n4:( ie:{ mo:) va:} de:> zu:) fl:| js:( ss:| ls:[-
Hey Patrick,
Das Problem ist ja, dass ich die Höhe (bzw. die Verwurstelung mit dem negativen margin-top in der eigentlichen Seite wo mir das Problem aufgefallen ist) aus Layout-technischen Gründen eben brauche.
(Ich kann im Praxisfall den negativen margin-top leider nicht entfernen.)
Gib mal nen Link oder poste die Seite.
Unabhängig vom eigentlichen Problem:
Ist es möglich, das Script welches du zuerst gepostet hast, so auszuweiten, dass es für alle Elemente mit der Klasse 'container' funktioniert (also ohne IDs vergeben zu müssen)?Also, da ist mit Sicherheit irgendetwas möglich, aber das braucht etwas Gehirnschmalz. Der Haken dabei ist, daß Du in irgendeiner Form die Überwachung initianitieren (oder so) musst. Ausserdem kannst Du nicht einfach alle DIVs überwachen, da sonst evtl. die Seite verrückt spielt. Du mußt halt in der init() die Elemente so geschickt ansprechen, daß auch (weitgehend) nur die überwacht werden, die angesprochen werden sollen.
Wenn diese Formulierung gut ist, kannst Du die 2. gepostete Funktion so anpassen, daß sie auch für NN läuft und die Elemente mit "this" angesprochen werden können. Das klappt auch ohne ID.Aber da musst Du dann weitgehend selber durch, daß ist alles nicht so einfach. Die IDs vereinfachen die Sache wesentlich, warum willst Du sie rausnehmen?
Viele Grüße
David-
Hallo,
Gib mal nen Link oder poste die Seite.
Kann ich leider nicht, ohne alles auseinanderzuklamüsern. Hatte gehofft dass schonmal jemand über dieses Problem gestolpert ist. Aber im Grunde ist das wesentliche des Problem im Beispiel ersichtlich.
Die IDs vereinfachen die Sache wesentlich, warum willst Du sie rausnehmen?
Wäre praktisch, da die Elemente wo ich das brauch alle dieselbe Klasse haben, und ich ausserdem nicht weiss, wieviele es sind, sie sonst auch keine ID bräuchten und die init-Funktion dynamisch 'befüllt' werden müsste. Werd ich mal bissel rumprobiern.
Viele Grüße
Patrick--
"Though this be madness, yet there's method in't."
sh:( fo:| ch:? rl:( br:^ n4:( ie:{ mo:) va:} de:> zu:) fl:| js:( ss:| ls:[
-
-
-
-
-
-
Das Script hatte ich interessehalber noch leicht verbessert, aber unter NN läuft es in dieser Form nicht und Du brauchst es ja auch nicht:
<script>
function changeBG(e) {
e = window.event;
//alert(e.type);
if (e.type.toUpperCase()=='MOUSEOVER') this.style.backgroundColor = '#ccc';
else /*if (e.type.toUpperCase()=='MOUSEOUT')*/ this.style.backgroundColor = '#eee';
}
function init() {
document.getElementById('c1').onmouseover = changeBG;
document.getElementById('c1').onmouseout = changeBG;
document.getElementById('c2').onmouseover = changeBG;
document.getElementById('c2').onmouseout = changeBG;
}
</script>
-