Einzelnen Beitrag anzeigen
  #1  
Alt 02.12.07, 16:11
mrgibson mrgibson ist offline
Forum Newbie
 
Registriert seit: 08.11.07
Alter: 29
Beiträge: 28

DAM_LITESHOW und IE 6/7


Hallo, benutze dam_liteshow als Fotogallerie. Im Web unter
THE STEAMY DUMPLINGS - SKA, REGGAE, ROCKSTEADY FROM MUNICH CITY:Fotos . Funktioniert im Firefox prima.

Im IE 6 und 7 funktioniert nur die oberste Gallerie und nur wenn der Scrollbalken der Seite ganz oben ist. Verallgemeinert habe ich folgendes Problem:

Im Firefox sieht man bei Klick auf das Liteshow-Previewbild, dass der Firefoxx immer erst nach ganz oben an den Seitenanfang springt und dann die Liteshow da oben startet. Also auch bei der untersten Gallerie erfolgt erst der Sprung nach oben.

Der IE macht das nicht! Er springt nicht nach oben, lädt aber die Gallerie trotzdem am oberen Seitenrand, im Ergebnis sieht man die Gallerie also nicht oder nur halb. Das gilt auch für den grauen Hintergrund! Der geht dann auch nur bis zur Hälfte der Seite, drunter ist die normale Seite ohne graue Überdeckung. Scrollen ist übrigens NICHT möglich.

Es sieht so aus, als gäbe es eine feste Höhe für die dam_liteshow und wenn vorher nicht an den Seitenanfang gegangen wird, dann sieht man die Liteshow halt nicht.

WIE KANN MAN DIESEN IE BUG BEHEBEN?

Hier mein Stylesheet für TYPO3:

Code:
/* fixing IE 6 display bug */
html, body { width: 100%; height: 100%; }



.tx-damliteshow-pi1 {
          margin-left:5px;
          width:150px;
          text-align:left;

    }

.tx-damliteshow-previewtitle{

         width:500px;
         margin-bottom:5px;

    }

.tx-damliteshow-previewimage IMG{
          border:1px dotted #888888;
       /*   width:150px;
          height:100%;   */
          padding:3px;
          background-color:#ffffff;

    }

.tx-damliteshow-previewimage IMG:hover{
          border:1px dotted #111111;
        /*  width:150px;
         height:100%;   */
          padding:3px;
          background-color:#d6d6d6;

    }


div#liteOverlay {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    z-index: 10;
    width: 150%;
    height: 200%;
    background-color: #000000;
}

img#liteThrobber {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1000;
}

div#liteShow {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
    overflow: hidden;
    z-index: 20;

    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
    color: #ffffff;
}

div.liteItem { position: absolute; }

div.liteItem img {
    display: block;
    clear: both;
    border: 2px solid #ffffff;
}

div.liteControls {
    float: left;
    clear: both;
    background: #ffffff;
    padding: 0;
    margin: 0;
}

div.liteControls h4 {
    display: block;
    float: left;
    color: #777777;
    line-height: 30px;
    font-size: 16px;
    width: 70%;
    margin: 0;
    padding: 5px 0 5px 10px;
    text-align: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
}

div.liteControls a.close,
div.liteControls a.browse {
    float: right;
    margin: 0 10px 0 0;
    border: 0;
    width: 30px;
    height: 40px;
    background: url('../g/close.gif') center center no-repeat transparent;
}
div.liteControls a.browse { background-image: url('../g/browse.gif'); }


div#liteCache {
    position: absolute;
    left: 2000px;
    top: 0px;
}

div#liteBrowser {
    z-index: 30;
    position: absolute;
    text-align: center;
    overflow-y: scroll;
    overflow-x: hidden;
}

div#liteBrowser table { margin: 0 auto; }

div#liteBrowser td {
    border: 0;
    padding: 20px 10px;
    height: 300px;
    text-align: center;
    vertical-align: top;
}

div#liteBrowser td img {
    margin: 0 auto 28px;
    text-align: center;
    border: 2px solid #777777;
}

div#liteBrowser td span {
    display: none;
    clear: both;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    color: #777777;
    background: #ffffff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 24px;
    border: 2px solid #ffffff;
}

div#liteBrowser td:hover img {
    border: 2px solid #ffffff;
    margin-bottom: 0;
}

div#liteBrowser td:hover span { display: block; }
Da steht ja oben eh schon was von "IE BUG beheben".

Die nächsten 4 Blöcke sind nicht original bei der extension dabei sondern von mir geschrieben. Der Rest ist original.


Ich würde mich sehr über Hilfe freuen, da ich mich mit Javascript und den meisten CSS-Befehlen, die die Positionierung übernehmen nicht auskenne.

Vielen Dank

Michael
Mit Zitat antworten