PDA

View Full Version : CSS PopUp Image Viewer - Safari loading thumbnails incorrectly



Bio
10-19-2010, 04:43 PM
1) Script Title: CSS Image Popup Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

3) Problem: When loading my page on Safari, the thumbnails are loaded in incorrect locations and stacked on top of each other (but if you resize the page and bring it back to normal view, the thumbnails locations are corrected).

--------------

To summarize how I set up the gallery, I used the tutorial's code for a single thumbnail and duplicated it multiple times in the stylesheet (using six of them for this page), giving each one different names and coordinates. This way each one is according to where I wanted that respective thumbnail to go on the page. Here's an example of two of them:



/*Thumb-v1*/



.thumbnail-v1{
position: relative;
text-decoration: none;
z-index: 0;
}

.thumbnail-v1:hover{
background-color: transparent;
text-decoration: none;
z-index: 50;
}

.thumbnail-v1 span{ /*CSS for enlarged image*/
position: absolute;
padding: 0px;
left: -1000px;
visibility: hidden;
color: #a9c1d4;
text-decoration: none;
}

.thumbnail-v1 span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}

.thumbnail-v1:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -129px;
left: -677px;

/*position where enlarged image should offset horizontally */

}


/*Thumb-v2*/



.thumbnail-v2{
position: relative;
text-decoration: none;
z-index: 0;
}

.thumbnail-v2:hover{
background-color: transparent;
text-decoration: none;
z-index: 50;
}

.thumbnail-v2 span{ /*CSS for enlarged image*/
position: absolute;
padding: 0px;
left: -1000px;
visibility: hidden;
color: #a9c1d4;
text-decoration: none;
}

.thumbnail-v2 span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}

.thumbnail-v2:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -194px;
left: -677px;

/*position where enlarged image should offset horizontally */

}



Afterwards, I just referenced the images to the corresponding thumbnail code for each thumbnail in the body of my html.

Here's a look at the page (to see the problem happen, open in Safari): http://pennington-design.com/pages/logo_designs.html

I'm new to html, so really don't have a grasp on what part of the browser-specific behavior is causing it. The code seems to run the gallery fine on other browsers except for Safari. Anybody know what the problem is?

Bio
10-21-2010, 04:09 PM
No one can help? Sorry for the bump but I really need to find the solution so I can get my portfolio going. =/