CSS - Galerieprobleme im IE
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/cs...-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 FF3 funktioniert das auch alelws ganz gut aber im IE8 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
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/cs...-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 FF3 funktioniert das auch alelws ganz gut aber im IE8 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
Kommentieren
Teilen
Auf Facebook teilen
Auf X (Twitter) teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 142644
Url: https://administrator.de/forum/css-galerieprobleme-im-ie-142644.html
Ausgedruckt am: 06.06.2025 um 11:06 Uhr
3 Kommentare
Neuester Kommentar
Hi !
Was Du benötigst ist eine so genannte Browserweiche. Vielleicht wäre es besser, wenn Du dich in das Thema CSS einarbeitest. Wie die unterschiedlichen Browser bei CSS reagieren und wo die Unterschiede genau liegen, kannst Du hier nachlesen. Auf dieser Seite gibt es auch Tutorials zu dem Thema, die (meiner Meinung nach) sehr hilfreich sind.
mrtux
Was Du benötigst ist eine so genannte Browserweiche. Vielleicht wäre es besser, wenn Du dich in das Thema CSS einarbeitest. Wie die unterschiedlichen Browser bei CSS reagieren und wo die Unterschiede genau liegen, kannst Du hier nachlesen. Auf dieser Seite gibt es auch Tutorials zu dem Thema, die (meiner Meinung nach) sehr hilfreich sind.
mrtux
Mahlzeit,
ja, der IE8. Ich liebe Ihn. Ich habe auch schon so einige Probleme mit ihm gehabt. Aber egal. Was ich vermute:
- problem mit nem DIV Container
- im Style das " ; " nach einem parameter vergessen (mag der IE8 nicht)
- wie definierst du die Position des Hover-Bildes (fixe, relative, absolute...?)
Gruß, Knut
ja, der IE8. Ich liebe Ihn. Ich habe auch schon so einige Probleme mit ihm gehabt. Aber egal. Was ich vermute:
- problem mit nem DIV Container
- im Style das " ; " nach einem parameter vergessen (mag der IE8 nicht)
- wie definierst du die Position des Hover-Bildes (fixe, relative, absolute...?)
Gruß, Knut
Hi,
ich kopier mal das CSS hierhin, das ist auch soweit noch das, was im vorherigen Link steht:
Das HTML sieht so aus:
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 
Ich hab grad mal in einer VM den IE7 probiert und da erscheint alles wie gewünscht,demnach scheint das wirklich ein IE8 Problem zu sein wobei ich nicht verstehe wieso, oder liegt das vielleicht an Windows7 64Bit?
mfg
ich kopier mal das CSS hierhin, das ist auch soweit noch das, was im vorherigen Link steht:
#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 */
} <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>Ich hab grad mal in einer VM den IE7 probiert und da erscheint alles wie gewünscht,demnach scheint das wirklich ein IE8 Problem zu sein wobei ich nicht verstehe wieso, oder liegt das vielleicht an Windows7 64Bit?
mfg
