[Erledigt] Dynamisch erzeugte Thumbnail Gallery mit Hovereffekt, sporadischer Fehler!

[Forumsgast]

Hallo zusammen,

bin gerade ein wenig am verzweifeln. Habe eine Gallery Vorschau gebastelt, wenn man dort mit der Maus drüber geht gibt es das gleiche Bild in ein wenig größer zu sehen. Die Bilder werden in einer While-Schleife aufgebaut.

while($resultArrayPictures = @mysql_fetch_array($resultPictures)) {

echo "<div class=\"gallery\">"
. " <a href=\"#\" target=\"_self\">"
. " <div style=\"background: url(images/galleries/" . strtolower($_GET["gallery"]) . "/thumbnails/" . $resultArrayPictures["thumb_file"] . ") no-repeat;\" class=\"picture\"></div>"
. " <div style=\"background: url(images/galleries/" . strtolower($_GET["gallery"]) . "/previews/" . $resultArrayPictures["preview_file"] . ") no-repeat;\" class=\"previewPicture\"></div>"
. " </a>"
. "</div>";

}

Da die Bilder ja auf keine Seite verlinken sollen habe ich als Link "#" angegeben.

So sollte es eigentlich aussehen:


Aber sporadisch wird die Seite so angezeigt:


Die Markierung zeigt das größere Bild im DIV was eigentlich per CSS auf display: none gesetzt ist. Was ja auch bei allen anderen Grafiken funktioniert. Und das schlimme ist, der Fehler taucht nur im FF auf, der IE zeigt es korrekt an.

Was ich schon rausgefunden habe ist, wenn ich anstatt dem "#" als Link z.B. index.php eintrage funktioniert es. Aber da ich noch ein onclick Event brauche und dies eingefügt hatte, kam wieder dieses Phänomen. Ich verstehe es gerade beim besten Willen nicht.

Hier auch noch der CSS Teil der für die Gallery verantwortlich ist:

/* --- Aufbau der Gallery Bilder -- */
.gallery {
background: url(../images/layout/bilderrahmen.png) no-repeat;
list-style-type: none;
float: left;
margin: 5px;
text-align: center;
font-weight: bold;
height: 120px;
width: 120px;
position: relative;
}

.picture {
width: 90px;
height: 90px;
display: block;
margin: 15px;
padding: 0px;
}

.gallery img {
display: block;
margin: 0 auto;
}

.gallery a .previewPicture {
display: none;
}

.previewPicture {
height: 120px;
width: 120px;
border: 5px solid #FFFFFF;
}

.gallery a:hover .previewPicture {
display: block;
position: absolute;
top: -5px;
left: -5px;
}
/* -------------------------------- */

Das komische an der ganzen Sache ist eben, dass es mal richtig mal falsch angezeigt wird, ohne das ich etwas am Code verändere (einfach Refresh).

Weiterhin habe ich auch festgestellt, dass das ganze erst bei 6 Bildern auftaucht.

Hat irgendwer einen Tipp?!?!


--------------------

EDIT: Hat sich erledigt. Ich habe eben Schritt für Schritt Teile aus dem Code entnommen bis es korrekt aussah. Und es lag an der Reihenfolge von DIVs dir ich eingebaut habe. Hab einen Teil nun weiter noch oben verschoben und schon klappt es. Muss mich definitiv mehr mit dem Thema DIVs und Positionierung beschäftigen.

Kann geschlossen werden!!!

[Forumsgast]

Kennzeichne den Beitrag als "erledigt", oben der Button!