Auf a:active Bild zeigen funktioniert im FF3.x aber nicht im IE8

[Mosty]

Hallo zusammen,

ich möchte mittels CSS bei einem Klick auf ein kleines Vorschau-Bild, das selbe in voller Größe anzeigen und damit den Rest der Seite überblenden (aber nur wenn man gedrückt hält, sprich sobald man die Maustaste loslässt, verschwindet das große Bild wieder). Das funktioniert auch einwandfrei im FF, jedoch nicht im IE8. Mittels Suchfunktion konnte ich in diesem speziellen Fall leider nichts finden, daher hoffe ich auf Eure Hilfe.

  
.wrapper{  
   position: relative;  
   float: left;  
   left: 0.00%;  
   width: 100.00%;  
   margin-bottom: 0.1%;  
   background-color: #222;  
}  
.left{  
   position: relative;  
   float: left;  
   left: 1%;  
   width: 30%;  
   height: 100%;  
   background-color: #222;  
   font-family: Verdana, Arial, Helvetica, sans-serif;  
   color: #A0A0A0;  
   font-size: 13px;  
   text-align: justify;  
   border:1px dashed #686868;  
   margin:.5em;  
   padding:.5em;  
}  
.mid{  
   position: relative;  
   float: left;  
   left: 1%;  
   width: 250px;  
   height: 100%;  
   background-color: #222;  
   font-family: Verdana, Arial, Helvetica, sans-serif;  
   color: #A0A0A0;  
   font-size: 13px;  
   text-align: center;  
   border:1px dashed #686868;  
   margin:.5em;  
   padding:.5em;  
   cursor: default;  
}  
  
.mid img  
{  
	width: 240px;  
	height: 180px;  
	border: 1px solid #686868;  
}  
  
.mid a  
{  
	cursor: default;  
}  
  
.mid a .extend  
{  
	display: none;  
}  
  
.mid a:active .extend  
{  
	display: block;  
	position: fixed;  
	border: 1px solid #fff;  
	left: 50%;  
	top: 50%;  
	width: 800px;  
	height: 600px;  
	margin-left: -400px;  
	margin-top: -300px;  
	z-index: 1;  
}  
  
.right{  
   position: relative;  
   float: left;  
   left: 1%;  
   width: 30%;  
   height: 100%;  
   background-color: #222;  
   font-family: Verdana, Arial, Helvetica, sans-serif;  
   color: #A0A0A0;  
   font-size: 13px;  
   text-align: justify;  
   border:1px dashed #686868;  
   margin:.5em;  
   padding:.5em;  
}

Wichtig ist hierbei alles unter ".mid", vor allem a:active und .extend! Im HTML bei dem Bild selbst sieht das dann wie folgt aus:

<a href="#"><img src="img/bla1.JPG" alt="Miami"><img src="img/bla1.JPG" alt="Miami" class="extend"></a>

Sprich bei der Klasse "extend" soll eben das Bild in voller Größe angezeigt werden, aber eben nur solange darauf geklickt wird.

Ich habe es übrigens in zwei unterschiedlichen IE8's probiert, in einem ist auf Klick einfach gar nichts passiert, im anderen ist das Bild zwar halb angezeigt worden, wurde aber von einem anderen div teils überblendet. In mehreren FF's wie gesagt kein Problem.

Hoffe auf Eure Hilfe :-)
VG

[Matthias Apsel]

Om nah hoo pez nyeetz, Mosty!

Ich habe es übrigens in zwei unterschiedlichen IE8's probiert, in einem ist auf Klick einfach gar nichts passiert, im anderen ist das Bild zwar halb angezeigt worden, wurde aber von einem anderen div teils überblendet.

Ist denn das HTML valide?

Wie reagieren die anderen relevanten (Chr9, Op11, Saf4), weniger relevanten (IE6, IE7) und noch nicht relevanten (IE9, FF4) Browser?

Matthias

[Mosty]

Hi Matthias,

danke für die Antwort. Also ich hatte ein paar Fehler im HTML-Check, diese sind nun aber alle behoben, sprich nun sollte alles valide sein. Danke für den Tipp schonmal, allerdings hat er das Problem nicht lösen können.

FF3.x - geht
FF4 Beta - geht
FF3.6.9 unter Linux - geht
Konqueror - geht
Opera 11.1 unter Linux - geht
IE6 - schlägt fehl
IE8 - schlägt fehl
Safarai - kA

Scheint echt überall einwandfrei zu klappen, nur nicht im IE...

[ChrisB]

Hi,

Also ich hatte ein paar Fehler im HTML-Check, diese sind nun aber alle behoben, sprich nun sollte alles valide sein.

Und im Quirks Mode befindet sich das Dokument auch nicht?

IE6 - schlägt fehl
IE8 - schlägt fehl

Scheint echt überall einwandfrei zu klappen, nur nicht im IE...

Hast du die Hinweise unter http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active, sowie Microsofts eigene Angaben zur Unterstützung in den IE-Versionen denn berücksichtigt?

MfG ChrisB

[Mosty]

Hi,

also ich habe in den Links von Dir nichts gefunden, was dem widersprechen würde. Für den IE8 steht bei "active" Yes.

Sagen wir mal ich bekomme es auf diesem Weg gar nicht hin, wir könnte ich alternativ vorgehen? JavaScript? Dachte ich könne es eben so über CSS und HTML lösen.

Mit Quirks Mode meinst Du im Dokument oder im Browser das Setting? Also ich habe das html-File lokal liegen und rufe es mit einem IE8 auf, ohne dass er die Seite im Kompatibilitätsmodus aufruft.

VG

[Mosty]

Sonst keiner mehr ne Idee?

[Matthias Apsel]

Om nah hoo pez nyeetz, Mosty!

Mit Quirks Mode meinst Du im Dokument oder im Browser das Setting? Also ich habe das html-File lokal liegen und rufe es mit einem IE8 auf, ohne dass er die Seite im Kompatibilitätsmodus aufruft.

Wenn du eine ungültige doctype-Angabe verwendest, schaltet der Browser in den Quirksmodus. Der Quirksmodus wäre eine mögliche Erklärung für dein beschriebenes Verhalten.

Matthias

[Mosty]

Om nah hoo pez nyeetz, Mosty!

Mit Quirks Mode meinst Du im Dokument oder im Browser das Setting? Also ich habe das html-File lokal liegen und rufe es mit einem IE8 auf, ohne dass er die Seite im Kompatibilitätsmodus aufruft.

Wenn du eine ungültige doctype-Angabe verwendest, schaltet der Browser in den Quirksmodus. Der Quirksmodus wäre eine mögliche Erklärung für dein beschriebenes Verhalten.

Matthias

Achso verstehe. Ich habe ja den Validitätscheck gemacht und da sieht nun alles gut aus und es gibt keine Fehler mehr. Habe es als 4.01 deklariert. Also ich denke das sollte dann passen.

Viele Grüße