gelöst!! CSS Fotogalerie - Probleme mit IE 6+7

[chunga]

Das Problem ist gelöst!! Habe Hilfe in einem anderen Forum gefunden. Für alle, die ein ähnliches Problem haben (entstand ursprünglich dadurch, dass die Original-Galerie die thumbnails oben hatte und nicht links)
im html-code:

Code: Alles auswählen

<div id="containercontent">
<div id="container">

   <div style="float:left;width:130px">
      <a class="pics" href="#nogo"><img src="http://leuchtstoffe.com/images/strassenlandschaften/thumbs/1.jpg" ........ and so on
...
...
</div>

<span class="info"><img src="http://leuchtstoffe.com/images/strassenlandschaften/1.jpg" width="500" height="350" alt="background" /> <br />
                        </span>

... und danach in der css die Breiten für "container" und "containercontent" auf die gesamte Breite (thumbnail + Bild) setzen. Nun klappt es auch in IE 6 und 7....

Lucia







Hallo,
ich habe eine CSS-Bildergalerie erstellt, nach einer Vorlage von Stu Nicholls.
Sie läuft wunderbar im FF und im IE8 - aber leider nicht im IE 6 und 7.
Die Bildergalerie hat kleine Thumbnails links (vertikal) und daneben wird bei mouseover das grosse Bild angezeigt. DAS klappt auch in allen Browsern.
Aber: der Container, in dem die grossen Bilder angezeigt werden, hat ein Quasi-Default-Hintergrundbild, so dass man auch ein Bild sieht, wenn man nicht mit der Maus über einem thumbnail ist.
Dieses Bild rutscht beim IE 6 und 7 nach unten - warum auch immer. Ich konnte es bisher nicht lösen.

Hat vielleicht von Euch jemand eine Idee??? Bin für jede Hilfe dankbar.

URL: http://www.leuchtstoffe.com/strasse.htm

Code der Galerie:

Code: Alles auswählen

.wrap {width:100%; height:550px; background:#D7D7D7;}

   #container {position:relative; width:130px; height:350px; background:inherit;
   border:0px solid #000;
margin:10px 0px 10px 30px; font-family:verdana, arial, sans-serif; font-size:12px;}

#container a.pics {float:left; margin:1px 1px; display:inline; color:#000;
text-decoration:none;
border:1px solid #9C620C; width:60px; height:42px; cursor:default;}
#container a.pics img.thumb {display:block; border:0;}

#container a.pics span {display:none; border:0; width:505px; background:#D7D7D7;
text-align:center;

border:0px solid #fff; margin-left:0px;
}
#containercontent {
background:transparent;
float:left;
margin-left:0px;
margin-top:10px;
position:relative;
width:510px; height:400px;
}
#container a.pics span img {margin:10px auto; border:1px solid #9C620C;}

#container a.pics:hover {white-space:normal; border:1px solid #000;}
#container a.pics:hover span {display:block; position:absolute; left:148px; top:-10px; z-index:10;
height:400px;}

#container a.pics:active {border:1px solid #9C620C;}
#container a.pics:active span {display:block; position:absolute; left:148px; top:-10px; z-index:5;
height:400px;}

#container a.pics:focus {border:1px solid #9C620C; outline:0;}
#container a.pics:focus span {display:block; position:absolute; left:148px; top:-10px; z-index:5;
outline:0;}

#container span.info { display:block;  line-height:20px; margin-left:5px;
padding:0px 0px 0px 0px; background:#D7D7D7; margin-left:150px;
width:500px;  color:#eee; z-index:1; border:1px solid #9C620C;}
#container span.info a {color:#000;}