[HTML][CSS][JavaScript]Problem z galerią zdjęć Opcje

[pucureczek]

Witam

Mam problem z galerią zdjęć na stronie www. Chodzi o to, że w przeglądarce Google Chrome oraz w Operze po najechaniu myszką na galerię oraz którekolwiek zdjęcie zaczyna "pływać", "ruszać się w górę oraz w dół" przez ten błąd nie można kliknąć oraz powiększyć zdjęcia dodam, że w IE oraz w Mozilla Firefox błąd nie występuje niżej podaje screena z przedstawieniem problemu.



Podsyłam również kod:

[HTML] pobierz, plaintext 
<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
 
<div id="gallery">
    <ul>
        <li>
            <a href="photos/zdj26a.png" title="# Zdjęcie 26 #">
                <img src="photos/zdj26.png" width="300" height="200" alt="" />
            </a>
        </li>
        <br>
        <li>
            <a href="photos/zdj27a.png" title="# Zdjęcie 27 #">
                <img src="photos/zdj27.png" width="300" height="200" alt="" />
            </a>
        </li>
        <br>
        <li>
            <a href="photos/zdj28a.png" title="# Zdjęcie 28 #">
                <img src="photos/zdj28.png" width="300" height="200" alt="" />
            </a>
        </li>
        <br>
        <li>
            <a href="photos/zdj29a.png" title="# Zdjęcie 29 #">
                <img src="photos/zdj29.png" width="300" height="200" alt="" />
            </a>
        </li>
    </ul>
</div>
[HTML] pobierz, plaintext 

CSS

[HTML] pobierz, plaintext 
/* jQuery lightBox plugin - Gallery style*/
 
#gallery                         {
                                    /*background-color: #444;--tło */
                                    padding: 10px;
                                    width: 0px;
                                    margin: 70px 0px 0px 800px;
                                }
 
#gallery ul 
                                { 
                                    list-style: none;
                                }
 
#gallery ul li 
                                { 
                                    display: inline;
                                }
 
#gallery ul img                     {
                                    border: 5px solid #3e3e3e;
                                    border-width: 5px 5px 20px; /*rozmiar ramki 3e3e3e*/
                                }
 
#gallery ul a:hover img 
                                {
                                    border: 5px solid #fff;
                                    border-width: 5px 5px 20px;
                                    color: #fff;
                                }
 
#gallery ul a:hover 
                                { 
                                    color: #fff; 
                                }
[HTML] pobierz, plaintext 

CSS \ jquery.lightbox-0.5

[HTML] pobierz, plaintext 
#jquery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    width: auto;
    min-width:1280px;
    height: 500px;
    margin: 0;
}
#jquery-lightbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    text-align: center;
    line-height: 0;
}
#jquery-lightbox a img { border: none;}
#lightbox-container-image-box {
    position: relative;
    background-color: #fff;
    width: 250px;
    height: 250px;
    margin: 0 auto;
}
#lightbox-container-image { padding: 10px;}
#lightbox-loading {
    position: absolute;
    top: 40%;
    left: 0%;
    height:25%;
    width: 100%;
 
    text-align: center;
    line-height: 0;
}
 
#lightbox-nav {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0;}
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
    width: 49%;
    height: 100%;
    zoom: 1;
    display: block;
}
#lightbox-nav-btnPrev { 
    left: 0; 
    float: left;
}
#lightbox-nav-btnNext { 
    right: 0; 
    float: right;
}
#lightbox-container-image-data-box {
    font: 10px Verdana, Helvetica, sans-serif;
    background-color: #fff; /* odpowiada za kolor tła w powiększonym zdjęciu [dół] */
    margin: 0 auto;
    line-height: 1.4em;
    overflow: auto;
    width: 100%;
    padding: 0 10px 0;
}
#lightbox-container-image-data {
    padding: 0; 
    color: #666; /* kolor czcionki w powiększonym zdjęciu [dół]*/
}
#lightbox-container-image-data #lightbox-image-details { 
    width: 70%; 
    float: left; 
    text-align: left;
}    
#lightbox-image-details-caption { font-weight: bold;}
#lightbox-image-details-currentNumber {
    display: block; 
    clear: left; 
    padding-bottom: 1.0em;
}            
#lightbox-secNav-btnClose {
    width: 66px; 
    float: right;
    padding-bottom: 0.7em;
}
[HTML] pobierz, plaintext 

Proszę o pomoc w rozwiązaniu problemu

[Damonsson]

Zamiast 1000 znaków w poście, starczyłby link do strony.

edit:
wywal display: inline-block; z li a:

[CSS] pobierz, plaintext 
li a 								
								{
									width:auto; 
									color:#ffffff;
									text-decoration:none;
									margin:0 5px;
									padding:0 5px;
								}	
[CSS] pobierz, plaintext 

Ten post edytował Damonsson 5.09.2013, 09:19:10

[pucureczek]

Bardzo dziękuję pomogło!!