Internet Explorer bockt bei Überlappungen

Computer: Software & Programmierung HTML & CSS
#1

Hallo allerseits,

endlich habe ich ein sich bei Berührung einer kleinen Fläche automatisch öffnendes CSS-Fenster hingekriegt, das im Internet Explorer und im Firefox relativ gleich reagiert.

Eine Sache bleibt noch, und da bin ich mit meinem Latein am Ende: Das Fenster sollte alles auf der Seite überlappen, und zwar auch eine eventuelle zweite Berührfläche. Doch das klappt nur in Browsern wie Firefox - was muss noch für den Internet Explorer getan werden? Seht selbst:

http://www.lotexx.de/menutest.htm

Viele Grüße,

Mohamed.

#2

Moin

Das liegt daran das du zwei gleiche styles für unterschiedliche DIV benutzt.

Meine Lösung :

.popup { position:absolute; background-color:white; z-index:2;
 width:200px;}

.popup .sensitiveArea { color:black; text-decoration:none; background-color:white;
 width:100px; max-width:100px; height:20px; overflow:hidden; border-style:none!important; z-index:2;}

.popup .sensitiveArea div { color:black; text-decoration:none; background-color:white; text-align:center;
 position:absolute; top:0px; left:0px;
 border: 1px solid red; width:100px; max-width:100px; height:20px; overflow:hidden; z-index:2;}

.popup .sensitiveArea:hover { width:200px; height:200px; z-index:3; } /\* für IE 6 \*/

.popup .sensitiveArea:hover div { text-align:left;
 border: 1px solid blue; width:200px; height:200px; max-width:200px; max-height:200px; overflow:scroll;
 z-index:3; background-color:white;} /\* für Firefox \*/
.popup2 { position:absolute; background-color:white; z-index:1;
 width:200px;}

.popup2 .sensitiveArea { color:black; text-decoration:none; background-color:white;
 width:100px; max-width:100px; height:20px; overflow:hidden; border-style:none!important; z-index:1; }

.popup2 .sensitiveArea div { color:black; text-decoration:none; background-color:white; text-align:center;
 position:absolute; top:0px; left:0px;
 border: 1px solid red; width:100px; max-width:100px; height:20px; overflow:hidden; z-index:1;}

.popup2 .sensitiveArea:hover { width:200px; height:200px; z-index:3; background-color:white;} /\* für IE 6 \*/

.popup2 .sensitiveArea:hover div { text-align:left;
 border: 1px solid blue; width:200px; height:200px; max-width:200px; max-height:200px; overflow:scroll;
 z-index:3; background-color:white;} /\* für Firefox \*/

 \<!-- Inhalte //--\>

[Berühre hier Im Internet Explorer wird die zweite...](%23)











[... und hier. Dass dieser Bereich keine Probleme ...](%23)

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#3

Das liegt daran das du zwei gleiche styles für
unterschiedliche DIV benutzt.

Ich hab da nicht nur 2 Styles gemacht sondern auch den Z-index für alle ebenen angegeben, so das klar ist wer hier wen überlappt

#4

Problemchen
Hallo RakonDark,

danke für Deinen Lösungsvorschlag. Allerdings wollte ich genau das vermeiden, denn wenn ich dreißig solcher Berührflächen habe, bekäme ich eine Riesen -CSS-Datei.

Ich hab’s jetzt so gemacht, dass das die Position der Popup-Klasse nicht mehr „absolute“ ist. Im Firefox klappt es dann nach wie vor, und der IExplorer schiebt dann die unteren HTML-Elemente incl. der zweiten Berührfläche immer nach unten statt zu versuchen, sie zu überlappen.

Nicht schön, aber besser als nix, oder?

Viele Grüße,

Mohamed.

#5

Hallo RakonDark,

danke für Deinen Lösungsvorschlag. Allerdings wollte ich genau
das vermeiden, denn wenn ich dreißig solcher Berührflächen
habe, bekäme ich eine Riesen -CSS-Datei.

Mohamed.

OK ich dachte du kommst von selber drauf :smile:

du machst es wie vorher , und machst einfach in das jeweilige

oki :smile:

#6

winzigklitzekleine Korrektur

nicht mit id=„popup“, sondern class=„popup“

beim Abtippen nicht bemerkt und schon geht’s wieder nicht…

Gruß
Sibylle

#7

Danke :wink:

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#8

Danke, will’s bald ausprobieren (owt)

.