PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : CSS - Galerieproblem im IE


ooAlbert
2010-05-11, 11:06:20
Hallo,

ich hab möchte ganz gern in einer Webseite eine kleine Galerie haben die nur mit CSS funktioniert. Nach einigem Suchen hab ich unteranderem das gefunden: http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

Ich muss dazusagen, das meine Thumbs in einem Block angeordnet sind, so das das Hover-bild über den anderen Thumbs liegen würde. Im FF funktioniert das auch alelws ganz gut aber im IE sind die Thumbs immer über dem Hover-Bild. Das Attribut "Z-Index" hat nichts bewirken können.

Das Hoverbild liegt nur dann über allen Ebenen, wenn man das Thumb im IE klickt.

Kann man das irgendwie umgehen oder muss für den IE irgendwas speziell angepasst werden?

mfg

ooAlbert
2010-05-12, 12:43:03
Keiner eine Idee? Ich kopier hier mal den CSS-ausschnitt rein mit dem verlinkten Code von oben:

#galerie {
position:absolute;
top:155px;
left:300px;
width:425px;
height:290px;
}

.thumbnail{
position: relative;
z-index: 1;
float:left;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}


Das HTML sieht so aus:

<div ID="galerie">
Text
<a class="thumbnail" href="#thumb">
<img src="galerie/thumb/t1.jpg" border="0" />
<span>
<img src="galerie/b1.jpg" /><br />
Text 1
</span>
</a>
<a class="thumbnail" href="#thumb">
<img src="galerie/thumb/t2.jpg" border="0" />
<span>
<img src="galerie/b2.jpg" /><br />
Text 1
</span>
</a>
</div>


Die Bilder sind wie gesagt nebeneinander bis die Grenze des DIV erreicht wird und brechen dann auf die nächste Zeile um, das es letztendlich aussieht wie ein Bilder-Block :)

mfg

DanMan
2010-05-12, 17:41:16
Ehrlich gesagt hab ich persönlich keine Lust mir extra eine HTML Datei zusammen zu schustern. Kannst du nicht eine fertige Demo irgendwo hochladen, damit wir das direkt dort überprüfen können?

Außerdem: welcher IE?

Kuroineko
2010-05-13, 14:24:49
ohja der gute alte IE
der macht bei solchen dingen gern Probleme hab ich auch feststelln müssn.
Wenn ich ehrlich bin geb ich da inzwischen schon garnixmehr drauf , wer IE benutzt is selbst schuld :P

aba joa deine html zu sehn würde den leuten bestimmt helfn das problem zu findn