Bereich eines Tags im IE

AJ

Hallo,

diesmal keine Frage von mir, sondern eine Lösung zu einem Problem, dass ich gestern selber hatte und das möglicherweise auch noch andere haben könnten ;).

Ich hatte mir in einer Seite Bereiche gemacht mit einem div-tag. Dabei habe ich mit css position, left, top, width, height und cursor (damit man auch sieht, dass man da was machen kann) angegeben. Dieser Bereich sollte anklickbar (onClick) sein und dann etwas bestimmtes ausgeführt werden (aber das ist nebensächlich. Bei Mozilla funktionierte das ganze wunderbar. Sobald ich über den Bereich kam änderte sich der Mauszeiger (cursor) und beim draufklicken wurde auch die Funktion ausgeführt. Als ich das ganze allerdings im Internet Explorer testete, musste ich feststellen, dass dieser den Bereich nicht erkannte. Beim drüberfahren änderte sich der Mauszeiger nicht und auch das Anklicken brachte nichts.

Anscheinend hat also der Internet Explorer ein Problem einen Bereich zu erkennen, wenn nichts angegeben ist, das den Bereich ausfüllt. Sobald ich nämlich in den div-tags z. B. einen Text stehen hatte, reagierte alles korrekt, sobald ich über den Text fuhr mit der Maus. Damit auch der ganze Bereich richtig reagiert und anklickbar ist, habe ich einen kleinen Trick angewendet. Ich habe mir eine gif-Datei gemacht mit nur einem Pixel, der als transparent eingestellt ist. Diese Datei (leer.gif) habe ich dann einfach als Hintergrundbild (background-image) für das div verwendet. Mit diesem kleinen Trick funktionierte es auch wunderbar im Internet Explorer :D.

Beispiel:

<html>
<body>
<!-- Diesen Bereich erkennt der IE nicht richtig -->
<div style="position:absolute; left:50px; top:50px; width:100px; height:50px; cursor:move;"
   onClick="alert('Erster Bereich')"></div>
<!-- Dieser Bereich wird auch vom IE richtig erkannt und behandelt -->
<div style="position:absolute; left:100px; top:150px; width:50px; height:100px; cursor:crosshair;
   background-image:url(leer.gif);" onClick="alert('Zweiter Bereich')"></div>
</body>
</html>

Ich hoffe diese kleine Lösung kann anderen noch gut behilflich sein :). Falls jemand noch eine bessere bzw. einfachere Lösung hat, dann wärs natürlich auch spitze, wenn diese hier reingeschrieben würde.

Tow-B.de

Das ist doch wieder die CSS-Hover Eigenschaft, nur das du sie direkt im body definierst.
Das Problem das der IE das Hover andauernd ignoriert oder scheinbar willkürlich macht ist ansich nicht neues.

Du kannst deinen Div auch in ein a kapseln, dann müsste er es auch richtig anzeigen. Allerdings gefällt mir das mit dem BAckground besser und ist mir persönlich auch neu.

mfg
tobi

AJ

@Tow-B
Ja das dacht ich mir auch, dass es am tag-Typ liegen könnte. Ich habe auch <a>, <span> und so ausprobiert. Jedes mal das gleiche Phänomen. Zum Testen hatte ich mir auch einen Rahmen um die Bereich gemacht. Kurioserweise hat der IE immer dann richtig reagiert, wenn ich mit der Maus über die Rahmenlinien gekommen bin, aber sobald die Maus nicht mehr über der Linie war - jedoch trotzdem im Bereich des tags, also innerhalb des Rahmens - bestand das alte Problem. Das hat mich dann auch drauf gebracht den Breich mit einem transparenten Hintergrundbild zu füllen.