nicht angemeldet
Falsche Positionierung
Hi,
ich lasse auf meienr Seite mittels Javascript ein Mouseover-DIV-Layer öffnen. Wenn man über ein Bild mit der Maus fährt, ist der Layer rechts unten neben der Maus zu sehen. Es sind immer 3 Bilder nebeneinander und dann so etwa 10 Reihen. Ab der 4. Reihe etwa wird im IE das Mouseover nicht mehr rechts unterhalb der Maus angezeigt, sondern einfach weiter oben.
Das führt dazu, dass wenn man weiter runter scrollt, der Mouseover-Layer nicht mehr zu sehen ist. Hier mal das Skript:
<script type="text/javascript" language="JavaScript">
<!--
var offsetx=70
var offsety=70
function hideTooltip() {
document.getElementById('tooltip').style.visibility = "hidden";
}
function showTooltip(e,txt,offsetX,offsetY)
{
if (offsetX) {offsetx=offsetX;} else {offsetx=20;}
if (offsetY) {offsety=offsetY;} else {offsety=0;}
var PositionX = 0;
var PositionY = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
PositionX = e.pageX;
PositionY = e.pageY;
}
else if (e.clientX || e.clientY)
{
PositionX = e.clientX + document.body.scrollLeft;
PositionY = e.clientY + document.body.scrollTop;
}
document.getElementById("text").innerHTML=txt;
document.getElementById("tooltip").style.left = (PositionX + offsetx) + "px";
document.getElementById("tooltip").style.top = (PositionY + offsety) + "px";
document.getElementById("tooltip").style.visibility = "visible";
}
// -->
</script>
Das Bild sieht dann wie folgt aus:
<a href="#" onMouseOver="showTooltip(event,'Hier steht der Text');" onMouseOut="hideTooltip();">
<img src="image.jpg" border="0" title="Classique in Platin" alt="Bild 1" /></a>
Ich denke es muss doch was an der Stelle sein, wo die Position der Maus "abgefragt" wird, oder?
Hat jemand eine Idee oder schonmal ein Ähnliches Problem gehabt?
Danke und Gruß
henne32
-
Hi,
Ab der 4. Reihe etwa wird im IE das Mouseover nicht mehr rechts unterhalb der Maus angezeigt, sondern einfach weiter oben.
Dann ist, wenn da kein IE-spezifischer CSS-Bug zuschlägt, vermutlich deine Berechnung der Positionen nicht korrekt - also lass sie dir zur Kontrolle ausgeben, bspw. in der Statuszeile oder document.title.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
das Komische ist ja, dass es im FF einwandfrei funktioniert. Und wenn ich den Doctype ändere, funktioniert es im IE auch, aber dann funktioniert mein margin: 0 auto nicht mehr.
MfG
henne32
-
Hi,
Und wenn ich den Doctype ändere, funktioniert es im IE auch, aber dann funktioniert mein margin: 0 auto nicht mehr.
Dann machst du wohl was falsch.
Was du machst, hast du uns aber gar nicht gezeigt.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Dann machst du wohl was falsch.
Was du machst, hast du uns aber gar nicht gezeigt.Ok, dann will ich es mal zeigen. Mein Doctype sieht derzeit so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Ich habe ein DIV, was ich mittig positioniere mit folgendem CSS-Code:
#container { z-index:1; position:relative; top:0; left:0; width:1250px; height:auto; margin:0 auto; background:url(../images/bg_main.jpg) repeat-y; }Das Mouseover wird mit folgendem Javascript geladen:
var offsetx=70 var offsety=70 function hideTooltip() { document.getElementById('tooltip').style.visibility = "hidden"; } function showTooltip(e,txt,offsetX,offsetY) { if (offsetX) {offsetx=offsetX;} else {offsetx=20;} if (offsetY) {offsety=offsetY;} else {offsety=0;} var PositionX = 0; var PositionY = 0; var scrofY = 0; var scrofX = 0; if (!e) var e = window.event; if (e.pageX || e.pageY) { PositionX = e.pageX; PositionY = e.pageY; } else if (e.clientX || e.clientY) { PositionX = e.clientX + document.body.scrollLeft; PositionY = e.clientY + document.body.scrollTop; } scrOfY = document.documentElement.scrollTop; scrOfX = document.documentElement.scrollLeft; document.getElementById("text").innerHTML=txt; document.getElementById("tooltip").style.left = (PositionX + offsetx + scrofX) + "px"; document.getElementById("tooltip").style.top = (PositionY + offsety + scrofY) + "px"; document.getElementById("tooltip").style.visibility = "visible"; }Und das DIV, welches sich beim Mouseover öffnet, sieht im CSS so aus:
#tooltip { position:absolute; top:180px; left:180px; z-index:99; background:#000; border:1px solid #fff; padding:5px; margin:0; color:#fff; width:250px; height:150px; overflow:hidden; }Wenn ich die Seiten ganz normal im FF 4 (und auch vorher im FF 3) und im IE 8 anschaue läuft erstmal alles. Im IE wird allerdings das Mouseover nur solange korrekt dargestellt, wie ich nicht weiter nach unten scrolle.
Änder ich den IE 8 auf Quirks-Mode, wird das margin:0 auto ignoriert und der DIV "container" wird nicht zentriert. Das Mouseover läuft dann allerdings.
Kannst du mir sagen wo der Fehler liegt, oder wo ich noch suchen soll?!
Danke erstmal für deine/eure Mühen!
Gruß
henne32
-
-
-
-
Hi,
hier nochmal ein Update.
Ich habe gerade mal meinen Doctype geändert und voilà, es funktioniert. Allerdings positioniere ich meine Seite mittels
margin:0 auto;Das wird dann vom IE nicht mehr korrekt dargestellt.
Derzeit sieht man Doctype jetzt so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">margin:auto funktionert, Positionierung der Layer nicht (liegt wohl auch am Scrollen).
Hat jemand eine Idee, wie ich beides unter einen Hut bekomme?
Gruß
henn32
-
Om nah hoo pez nyeetz, henne32!
Ich habe gerade mal meinen Doctype geändert
Der Doctype muss zum Dokument passen. Aus einem Worddokument wird auch kein Bild, wenn du die Dateiendung änderst.
Matthias
--
1/z ist kein Blatt Papier.
-