immer dieser IE

[corXy]

HTML:

       <div class="bilder">
        <div class="galery">
        
<b id="target1" class="target"></b>
<b id="target2" class="target"></b>
<b id="target3" class="target"></b>
<b id="target4" class="target"></b>
<b id="target5" class="target"></b>
<b id="target6" class="target"></b>
<b id="target7" class="target"></b>
<b id="target8" class="target"></b>
<b id="target9" class="target"></b>
<b id="target10" class="target"></b>

<div id="gallery">
    <div id="fullsize">
        <div id="pic1"><img class="bilder" src="../images/projekte/0001/1.jpg" alt="1" /></div>
        <div id="pic2"><img class="bilder" src="../images/projekte/0001/2.jpg" alt="2" /></div>
        <div id="pic3"><img class="bilder" src="../images/projekte/0001/3.jpg" alt="3" /></div>
        <div id="pic4"><img class="bilder" src="../images/projekte/0001/4.jpg" alt="4" /></div>
        <div id="pic5"><img class="bilder" src="../images/projekte/0001/5.jpg" alt="5" /></div>
        <div id="pic6"><img class="bilder" src="../images/projekte/0001/6.jpg" alt="5" /></div>
        <div id="pic7"><img class="bilder" src="../images/projekte/0001/7.jpg" alt="5" /></div>
        <div id="pic8"><img class="bilder" src="../images/projekte/0001/8.jpg" alt="5" /></div>
    </div>
    <ul id="thumbnails">
        <li><a href="#target1"><img src="../images/projekte/0001/1.jpg" alt="1" /></a></li>
        <li><a href="#target2"><img src="../images/projekte/0001/2.jpg" alt="2" /></a></li>
        <li><a href="#target3"><img src="../images/projekte/0001/3.jpg" alt="3" /></a></li>
        <li><a href="#target4"><img src="../images/projekte/0001/4.jpg" alt="4" /></a></li>
        <li><a href="#target5"><img src="../images/projekte/0001/5.jpg" alt="5" /></a></li>
        <li><a href="#target6"><img src="../images/projekte/0001/6.jpg" alt="6" /></a></li>
        <li><a href="#target7"><img src="../images/projekte/0001/7.jpg" alt="7" /></a></li>
        <li><a href="#target8"><img src="../images/projekte/0001/8.jpg" alt="8" /></a></li>
    </ul>
</div><!-- END #gallery -->

        </div><!-- END .galery -->
        </div><!-- END .bilder -->

CSS:

.bilder {
    background:#000;
    padding: 5px 15px 5px 15px;
    border-radius:15px;
    width:800px;
    margin:auto;
}


.target {
    display:none;
}

#gallery {
    width:700px;
    height:470px;
    margin:0px auto;
    margin-bottom:0;
    position:relative;
    overflow:hidden;
    background:#000;
}

#fullsize {
    width:7000px;
    height:420px;
    position:relative;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}

#fullsize div {
    width:700px;
    height:400px;
    float:left;
}

#fullsize div img {
    display:block;
    border:0;
}

#fullsize div img.bilder {
    margin:10px auto;
}

ul#thumbnails {
    padding:0 0 0 70px;
    margin:0;
    list-style:none;
}

ul#thumbnails li {float:left;}

ul#thumbnails li a {
    height:36px;
    width:50px;
    padding:3px;
    display:block;
    text-decoration:none;
    background:#000;
}

ul#thumbnails li a img {
    width:50px;
    height:36px;
    border:0;
}

ul#thumbnails li a:hover { background-image:url(images/home/rahmen.png);}

#target1:target ~ #gallery #fullsize {margin-left:0;}
#target2:target ~ #gallery #fullsize {margin-left:-700px;}
#target3:target ~ #gallery #fullsize {margin-left:-1400px;}
#target4:target ~ #gallery #fullsize {margin-left:-2100px;}
#target5:target ~ #gallery #fullsize {margin-left:-2800px;}
#target6:target ~ #gallery #fullsize {margin-left:-3500px;}
#target7:target ~ #gallery #fullsize {margin-left:-4200px;}
#target8:target ~ #gallery #fullsize {margin-left:-4900px;}
#target9:target ~ #gallery #fullsize {margin-left:-5600px;}
#target10:target ~ #gallery #fullsize {margin-left:-6300px;}

Das ist eine kleine CSS Bildergalerie. Ich finde diese Lösung sehr schön, nix kompliziertes und trotzdem anschaubar.
Aber ich habe ein Problem mit, natürlich, dem IE. Das dem IE die transition nichts ausmacht ist mir schon klar aber diese Bildergalerie funktioniert erst ab Version 9, aber ich hätte das schon gerne so für die V7 und V8. Ist da was zu machen?
Oder soll ich vll eine alternative anbieten, so in der Art: "Bildergalerie wird nicht richtig dargestellt? HIER KLICKEN" und dann kommen die Besucher halt zu einer "hässlichen" Bildergalerie.
Oder die Besucher zu einen Update bewegen? sinnvoll wäre es ja :grin:

 

[Tronjer]

Oder du suchst nach einem passenden jQuery Plugin.

Ein Upgrade des Internet Explorer ist nicht so einfach, weil der Browser im Betriebssystem verankert ist. Wer noch Win XP einsetzt, kommt über den IE8 nicht hinaus.

 

[bodil]

Einen Link zur Seite hast du nicht zufällig?

 

[corXy]

Schwoebel + Parnter Architekten