CSS Pop-up-Box im IE

[_Robert]

Hallo,

unter folgendem Link habe ich mein Problem mal dargestellt:

http://812.knu-systems.de/box/box.htm

Es handelt sich um eine Box, welches ein Bild enthält. Wenn man mit der Maus über das Bild fährt, geht ein "Pop-up" auf. Die ersten drei Boxen sind mit korrektem HTML erstellt und funktionieren mit Opera, Firefox und Chrome einwandfrei, mit dem IE (Version 6 und 8 gestestet) hingegen nicht. Die danach folgenden drei Boxen (roter Hintergrund) enthalten absolut fehlerhaftes HTML und funktionieren mit dem IE tadellos (Version 6 und 8 gestestet; ich denke das sagt viel über die Qualität des IE aus *hust*). Auch Opera kommt damit klar.  Mit Firefox und Chrome funktioniert es nicht.

Meine Frage:

Weiß jemand, wie ich diesen Pop-up-Effekt auch dem IE beibringen kann, ohne dass ich ich unsinniges HTML verwenden muss?

[dave]

Hi,

eine ID muss Dokumentweit eindeutig sein.
Mehrer div[id=box] sind also nicht valide.

#box {  
    [...]  
    z-index:1;  
}

Getestet im IE8.

~dave

[_Robert]

Hi,

eine ID muss Dokumentweit eindeutig sein.
Mehrer div[id=box] sind also nicht valide.

#box {

[...]
    z-index:1;
}

>   
> Getestet im IE8.  
>   
> ~dave  
  
Danke für den Hinweis. Leider löst der mein Problem nicht. Im IE funktioniert die Box nur mit dem falschem HTML.  

[ChrisB]

Hi,

Es handelt sich um eine Box, welches ein Bild enthält. Wenn man mit der Maus über das Bild fährt, geht ein "Pop-up" auf. Die ersten drei Boxen sind mit korrektem HTML erstellt

Nein, sind sie nicht. Abgesehen von der mehrfach vergebenen ID darf A in HTML 4.01 auch keine DIV-Elemente enthalten.

und funktionieren mit Opera, Firefox und Chrome einwandfrei, mit dem IE (Version 6 und 8 gestestet) hingegen nicht.

Im IE 8 „funktionieren“ sie schon - du merkst es nur nicht, weil die jeweils nachfolgende Box das Popup-Element auf der Z-Ebene überdeckt.

Weiß jemand, wie ich diesen Pop-up-Effekt auch dem IE beibringen kann, ohne dass ich ich unsinniges HTML verwenden muss?

Dem IE <= 6 gar nicht, weil der :hover bekanntlich nur auf Links unterstützt.

MfG ChrisB

[_Robert]

Hallo,

Nein, sind sie nicht. Abgesehen von der mehrfach vergebenen ID darf A in HTML 4.01 auch keine DIV-Elemente enthalten.

Das mit der ID wurde bereits bemängelt. Das DIV wurde mit Absicht in das A geschoben. Für das Bild und die Bildunterschrift benötige ich nämlich "overflow:hidden". Und wenn das nur der "Box" zuweise, dann wird das Popup nicht mehr angezeigt, da es sich ja außerhalb der "Box" befindet.

Im IE 8 „funktionieren“ sie schon - du merkst es nur nicht, weil die jeweils nachfolgende Box das Popup-Element auf der Z-Ebene überdeckt.

Ja, okay. Sie werden verdeckt. Kennst du eine Lösung für das Problem? Eigentlich habe ich dafür ja etra die Angabe "z-index:10" gemacht, aber der IE ignoriert das einfach. Selsbt wenn ich für die Zehn 1000000 einsetze, ändert das nichts.

Dem IE <= 6 gar nicht, weil der :hover bekanntlich nur auf Links unterstützt.

Soll ab IE6 aufwärts funktionieren.

[EKKi]

Mahlzeit _Robert,

Dem IE <= 6 gar nicht, weil der :hover bekanntlich nur auf Links unterstützt.

Soll ab IE6 aufwärts funktionieren.

Woher hast Du diese (AFAIK falsche) Information?

MfG,
EKKi

[Der Martin]

Hallo,

Dem IE <= 6 gar nicht, weil der :hover bekanntlich nur auf Links unterstützt.
Soll ab IE6 aufwärts funktionieren.
Woher hast Du diese (AFAIK falsche) Information?

welche Information? Dass IE6 :hover nur auf Links anwendet?
Oder Roberts Vorgabe, dass das Projekt auch mit IE6 zu funktionieren hat?

So long,
 Martin

[EKKi]

Mahlzeit Der Martin,

Dem IE <= 6 gar nicht, weil der :hover bekanntlich nur auf Links unterstützt.
Soll ab IE6 aufwärts funktionieren.
Woher hast Du diese (AFAIK falsche) Information?

welche Information? Dass IE6 :hover nur auf Links anwendet?
Oder Roberts Vorgabe, dass das Projekt auch mit IE6 zu funktionieren hat?

Ah - das "soll" war als Vorgabe gemeint ... OK, das hatte ich falsch verstanden (im Sinne von "der IE soll das ab Version 6 beherrschen").

Ich ziehe alles zurück und behaupte das Gegenteil! ;-)

MfG,
EKKi

[Matthias Apsel]

Om nah hoo pez nyeetz, _Robert!

Das DIV wurde mit Absicht in das A geschoben.

Dann hast du mit Absicht ungültiges HTML erzeugt.

Alternativ könntest du ein passendes inline-Element verwenden und es via display: block; als ein Blockelement tarnen.

Matthias

[_Robert]

Alternativ könntest du ein passendes inline-Element verwenden und es via display: block; als ein Blockelement tarnen.

Okay, hab's entsprechend umgewandelt:

http://812.knu-systems.de/box/box.htm

Allerdings entzieht sich mir der Sinn der Einteilung in Block- und Inline-Elemente, wenn ich mit "display" eh alles ineinander umwandeln kann.

Was jetzt bleibt sind folgende Probleme im IE:

1. das Pop-up befindet sich hinter dem Bild der darunter liegenden Box
2. man kann den Bild-Link nicht anklicken

Irgendwelche Ideen/Tricks/etc. wie man das dem IE beibringen könnte? Alle anderen Browser stellen die Seite korrekt dar (lediglich Opera verschiebt die Pop-up-Box einen Pixel zu weit nach unten, aber damit kann ich leben).

[Matthias Apsel]

Om nah hoo pez nyeetz, _Robert!

Allerdings entzieht sich mir der Sinn der Einteilung in Block- und Inline-Elemente

HTML verwendet Block-elemente, die ohne weitere Maßnahmen genausobreit wie das umgebende Element sind und eine neue Zeile beginnen und inline-Elemente

wenn ich mit "display" eh alles ineinander umwandeln kann.

Herzlichen Glückwunsch, du hast die Möglichkeiten von CSS entdeckt

Was jetzt bleibt sind folgende Probleme im IE:

1. das Pop-up befindet sich hinter dem Bild der darunter liegenden Box
2. man kann den Bild-Link nicht anklicken

ohne geschaut zu haben:

#1# der Quelltext ist valide? #2# welche IE, alle?

Matthias

[_Robert]

#1# der Quelltext ist valide?

Ja, mittlerweile ist er es.

#2# welche IE, alle?

Getestet habe ich 6 und 8. Mit denen sollte es dann schon funktionieren.

[Matthias Apsel]

Om nah hoo pez nyeetz, _Robert!

#1# der Quelltext ist valide?

Ja, mittlerweile ist er es.

aber durch die Angabe der verkürzten DTD schickst du die Browser in den Quirksmodus.

Matthias

[_Robert]

aber durch die Angabe der verkürzten DTD schickst du die Browser in den Quirksmodus.

Selbst wenn ich das ändere, löst es immer noch nicht mein Problem. Ideen?

[Matthias Apsel]

Om nah hoo pez nyeetz, _Robert!

aber durch die Angabe der verkürzten DTD schickst du die Browser in den Quirksmodus.

Selbst wenn ich das ändere, löst es immer noch nicht mein Problem. Ideen?

Dann weiß ich nicht, was dein Problem ist. Jedenfalls, wenn ich eine vollständige Doctype-Deklaration angebe und damit die Browser nicht in den Quirksmode schicke, ist das Verhalten deines Dokumentes im IE8 identisch zu dem im FF.

Matthias

[_Robert]

Dann weiß ich nicht, was dein Problem ist. Jedenfalls, wenn ich eine vollständige Doctype-Deklaration angebe und damit die Browser nicht in den Quirksmode schicke, ist das Verhalten deines Dokumentes im IE8 identisch zu dem im FF.

Echt? Dann muss ich noch mal schauen. Wahrscheinlich habe ich dann bloß mit dem IE6 getestet.

Danke.