✔ Galleria - Unterschied IE 7 und Firefox

[fortyniner]

Hallo,

ich bin gerade dabei eine Bildergalerie mit Galleria zu erstellen und habe ein Problem.

Ich habe die Bildergalerie mit CSS eingerichtet und es sieht in Firefox auch ganz gut aus. Im IE ist hingegen alles verschoben.

http://www.drhorvath.de/galleria.html

Warum?

.demo{
	position:relative;
	margin-top:2em;
	left: -40px;
}
.galleria{list-style:none;width:200px}
.galleria li{
	display:block;
	width:56px;
	height:56px;
	overflow:hidden;
	float:left;
	border:3px double #eee;
	margin-top: 0;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 0;
	z-index: 2;
}
.galleria li.hover{border-color:#bbb;}
.galleria li.active{border-style:solid;border-color:#222;}
.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left:180px}
.galleria li div img{cursor:pointer}
.galleria li.active div img,.galleria li.active div{display:block}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display:block;padding-top:.5em}
.galleria_container{
	margin:0 auto 0px auto;
	height:400px;
	width:620px;
	float:right;
	z-index: 3;
}
.nav{
	position:absolute;
	top:363px;
	left:40px;
}
* html .galleria li div span{width:400px} /* MSIE bug */

Vielen Dank für die Hilfe

 

[Maik]

Hi,

sieht so aus, dass die Breitenangabe für die Klasse .gallery des ul-Listenelements in der CSS-Datei css.css hierfür verantwortlich ist, dass die Listenpunkte in einer Zeile ausgegeben werden.

Wenn ich diese auf 200px herabsetze, wird die Galerie im IE 6 + 7 in zwei Spalten angezeigt.

 

[fortyniner]

Hmm,

ich dachte ich hätte bisher gar keinen Wert angegeben. Wo hast du den Wert denn verändert?

 

[Maik]

http://www.drhorvath.de/css/css.css

@charset "utf-8";
...
...
...
.gallery {
	width: 870px;
	margin-top: 20px;
	margin-bottom: 20px;
	z-index: 3;
}

<ul class="gallery">
        <li><img src="pictures/applikationdam/OptraDam1.jpg" width="357" height="390" alt="OptraDam" /></li>
        <li><img src="pictures/applikationdam/OptraDam2.jpg" alt="OptraDam" width="424" height="390" /></li>
        <li><img src="pictures/applikationdam/OptraDam3.jpg" alt="OptraDam" width="293" height="390" /></li>

        <li><img src="pictures/applikationdam/OptraDam4.jpg" alt="OptraDam" width="529" height="390" /></li>
        <li><img src="pictures/applikationdam/OptraDam5.jpg" alt="OptraDam" width="432" height="390" /></li>
        <li><img src="pictures/applikationdam/OptraDam6.jpg" alt="OptraDam" width="383" height="390" /></li>
        <li><img src="pictures/applikationdam/OptraDam7.jpg" alt="OptraDam" width="614" height="390" /></li>
        <li><img src="pictures/applikationdam/OptraDam8.jpg" alt="OptraDam" width="319" height="390" /></li>
        <li><img src="pictures/applikationdam/OptraDam9.jpg" alt="OptraDam" width="491" height="390" /></li>
        <li><img src="pictures/applikationdam/OptraDam10.jpg" alt="OptraDam" width="307" height="390" /></li>
      </ul>

 

[fortyniner]

Hammer

Hat geklappt. Vielen Dank.

Noch 2 Fragen:
Wie werde ich den z-index bug auf dieser Seite los?
Wie muss ein div-tag aussehen dass unter die Galerie kommen soll das dafür sorgt dass auch der Header unterhalb davon zu sehen ist?

Gruß

 

[fortyniner]

Hallo,

ich habe jetzt ein div-tag gemacht und es absolut positioniert.

Das Problem ist jetzt dass der footer nicht unterhalb des div-tags angezeigt wird.

Und das Problem mit dem z-index-bug besteht auch immer noch. :-(

Gruß