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:
<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>
CSS
/* 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; }
CSS \ jquery.lightbox-0.5
#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; }
Proszę o pomoc w rozwiązaniu problemu
