Thumbnails not loading in Safari or Chrome

Get Started
1

Hi,
I’ve got a thumbnail gallery with a CSS hover effect that expands the thumbs to larger images. It looks/works great in IE and Firefox but in Safari and Chrome all I have are the Image Names. To view the thumbnails in these browsers, I have to click to another category then click back and then they are all there. I have no idea what’s going on. Here’s the link: http://www.romanloranc.com/photographs.html.

Thanks for any help!

2

Try removing HTML errors and see if your problem is solved.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.romanloranc.com%2Fphotographs.html&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1&outline=1&No200=1&verbose=1

3

Hi captain.crunch, and welcome to the forums. :slight_smile:

As John said, you have a lot of validation errors, and these can often lead to unexpected results. It’s always a good idea to fix these first, and see if that solves the problem. Many of the errors showing are actually very simple. For example in this line:

<li id="vert"><a class="thumbnail" href="#"><img src="images/canal_venice_thumb.jpg" alt="Canal, Venice" border="0" /><span><img src="images/canal_venice_lg.jpg" alt="Canal, Venice"></span></a>
</br>Canal, Venice</li>

the second image tag isn’t closed properly - it should be

<li id="vert"><a class="thumbnail" href="#"><img src="images/canal_venice_thumb.jpg" alt="Canal, Venice" border="0" /><span><img src="images/canal_venice_lg.jpg" alt="Canal, Venice"[COLOR="#FF0000"] /[/COLOR]></span></a>
</br>Canal, Venice</li>

I think it’s the same for each of your images - the second img tag is incorrectly closed. Whether this is enough to cause the browsers to hiccup, I don’t know, but at least if you fix them, that’s one possible cause ruled out. :slight_smile:

If you’ve never used the validator before, it can be a bit bewildering, so if you need help interpreting what it’s telling you, just ask.

4

Thank you John_Betong and TechnoBear for reminding me to validate my errors. I validated it but I still have the same problem. What is strange is that when in Safari or Chrome, when I first go to the page it doesn’t show the images. If I click to another page and go back to it, all the images are there perfectly (and doesn’t even take a long time to load). Any other suggestions? Thank you for your help.

5

@captain.crunch

Try adding this to your stylesheet. Width, height and margin require tweaking:



ul#gallery li.vert a img{
	min-width:128px; min-height:128px; 
        margin:1em; 
	background-color:#fff;          /* CHANGE TO ENSURE CSS IS UP TODATE */
}

I also think that link class=“thumbnail” could be removed and added to your stylesheet.

6

That did it! Setting the min-width and min-height fixed the problem. It now looks great in all the browsers. Thank you for all your help. :slight_smile:

7

Good that we were able to help and greatly appreciate your satisfactory feedback.

Too many times posters do not even give negative feedback let alone gratitude :slight_smile:

Looking forward to seeing you in the photography forum.