Problem mit Firefoxdarstellung einer Bildergalierie (lightbox)

[ryan1979]

Hi zusammen,

ich habe folgendes Problem mit meiner Bildergalerie:
Im Explorer wird sie richtig dargestellt 5 Bilder nebeneinander und dann beginnt die nächste Bildereile mit 5 Bildern usw.
Im Firefox zeigt er auch 5 Bilder, dann 1 Bild alleine rechtsbündig und dann wieder eine Zeile mit 5 Bildern. Wo liegt das Problem?
Hier der Code:

<span class="text">Zum Vergr&ouml;&szlig;ern bitte anklicken</span></p>
<center>
                  <div class="gallerie"><a href="images/gallerie/dsc_0001.jpg" rel="lightbox-impressionen"><IMG alt="Impression" src="images/gallerie/dsc_0001.jpg"></a></div>
                  <div class="gallerie"><a href="images/gallerie/dsc_0002.jpg" rel="lightbox-impressionen"><IMG alt="Impression" src="images/gallerie/dsc_0002.jpg"></a></div>
                  <div class="gallerie"><a href="images/gallerie/dsc_0003.jpg" rel="lightbox-impressionen"><IMG alt="Impression" src="images/gallerie/dsc_0003.jpg"></a></div>
                  <div class="gallerie"><a href="images/gallerie/dsc_0004.jpg" rel="lightbox-impressionen"><IMG alt="Impression" src="images/gallerie/dsc_0004.jpg"></a></div>
                  <div class="gallerie"><a href="images/gallerie/dsc_0005.jpg" rel="lightbox-impressionen"><IMG alt="Impression" src="images/gallerie/dsc_0005.jpg"></a></div>
                  <div class="gallerie"><a href="images/gallerie/dsc_0007.jpg" rel="lightbox-impressionen"><IMG alt="Impression" src="images/gallerie/dsc_0007.jpg"></a></div>
                  <div class="gallerie"><a href="images/gallerie/dsc_0008.jpg" rel="lightbox-impressionen"><IMG alt="Impression" src="images/gallerie/dsc_0005.jpg"></a></div>
                  <div class="gallerie"><a href="images/gallerie/dsc_0009.jpg" rel="lightbox-impressionen"><IMG alt="Impression" src="images/gallerie/dsc_0009.jpg"></a></div>
                  <div class="gallerie"><a href="images/gallerie/dsc_0015.jpg" rel="lightbox-impressionen"><IMG alt="Impression" src="images/gallerie/dsc_0015.jpg"></a></div>
                  <div class="gallerie"><a href="images/gallerie/dsc_0017.jpg" rel="lightbox-impressionen"><IMG alt="Impression" src="images/gallerie/dsc_0017.jpg"></a></div>

CSS:
/*Gallerie features */
.gallerie {
margin:0px 0px 15px 15px;
float:left;
}

.gallerie img, .gallerie_lr-1 img, .gallerie_lr-2 img {
width:100px;
border:1px #222E67 solid;
}

.gallerie img:hover, .gallerie_lr-1 img:hover, gallerie_lr-2 img:hover {
border:1px #ffffff solid;
}

.gallerie_lr-2 {
margin:0px 0px 15px 132px;
float:left;
}

.gallerie_lr-1 {
margin:0px 0px 15px 132px;
float:left;
}

Danke vorab

[Gunnar Bittersmann]

@@ryan1979:

nuqneH

ich habe folgendes Problem mit meiner Bildergalerie:

Online-Beispiel, bitte.

Hier der Code:

Dazu vorab schon mal einige Hinweise:

<span class="text">Zum Vergr&ouml;&szlig;ern bitte anklicken</span></p>

Es ist nicht sinnvoll, Zeichen wie 'ö' und 'ß' derart zu verstümmeln.

Und wozu das 'span'-Element?

  			<center>  

Verwende kein Markup (missibilligte HTML-Elemente und -Attribute) für die Dastellung, sondern ausschließlich CSS!

<div class="gallerie"><a href="images/gallerie/dsc_0001.jpg" rel="lightbox-impressionen"><IMG alt="Impression" src="images/gallerie/dsc_0001.jpg"></a></div>
                  <div class="gallerie"><a href="images/gallerie/dsc_0002.jpg" rel="lightbox-impressionen"><IMG alt="Impression" src="images/gallerie/dsc_0002.jpg"></a></div>

Wenn alle Geschwisterelemente (hier 'div') derselben Klasse (hier "gallerie"[sic!]) angehören, ist das ein sicheres Indiz, dass die Klasse völlig überflüssig ist.

Für alle Bilder denselben @alt-Text zu verwenden macht die Seite auch nicht barrierefrei. Dann kannst du @alt auch gleich weglassen.

Warum 'div'-Suppe? Das ist eine Liste von Bildern! Also:

<p>Zum Vergrößern bitte anklicken</p>  
<ul class="galerie">  
                  <li><a href="images/gallerie/dsc_0001.jpg" rel="lightbox-impressionen"><img src="images/gallerie/dsc_0001.jpg"></a></li>  
                  <li><a href="images/gallerie/dsc_0002.jpg" rel="lightbox-impressionen"><img src="images/gallerie/dsc_0002.jpg"></a></li>  
<!-- ... -->  
</ul>

Du verwendest die großen Bilder für die Vorschau?? Das ist unsinnig, eine riesige Datenmenge zu übertragen, die der Nutzer gar nicht benötigt. Kostet nur sinnlos Ladezeit. Erstelle Thumbnails (kleine Vorschaubilder in der Größe, wie sie angezeigt werden)!

Qapla'