My Highslide slide show has a grid of square thumbs. In IE and Firefox the grid displays very nicely in all circumstances. But in Chrome (39.0.2171.95 m), Opera (recently downloaded) , and Safari (version ??) the size of the thumbs is unpredictable with some thumbs taking on incorrect sizes.
If I access the gallery from the site’s menu all is well.
If I open up the gallery straight from the browser or press F5 to refresh the gallery some thumbs become the wrong size and the grid is a mess.
Another F5 and different thumbs are now the wrong size.
If I am lucky one or two more F5s might correct the problem but might not.
Here is my website http://www.stockportwalkers.org.uk. Attached are my 2 html files, highslide.css and highslide-full.js. I am using Windows 7 64 bit and Highslide 4.1.13
This posting on the forum sounds like my problem but no solution was available "rendering issue with Chrome" http://forum.highcharts.com/highslide-j ... me-t31273/
Thank you for your help in resolving this issue and please let me know if you need any more in formation.
Rendering problem in Chrome, Opera and Safari
- Attachments
-
- Gallery Rendering Problem html.zip
- (3.46 KiB) Downloaded 323 times
-
- Rendering problem highslide.zip
- (29.65 KiB) Downloaded 306 times
-
- Gallery Rendering problem in Chrome, Opera and Safari - Example.jpg (75.27 KiB) Viewed 5154 times
-
MisterNeutron
- Posts: 440
- Joined: Sun Aug 18, 2013 11:20 am
Re: Rendering problem in Chrome, Opera and Safari
This isn't really a Highslide JS issue at all. Remember, the Highslide JS script doesn't do anything until you expand a thumbnail to view the large image. It doesn't create the thumbnail layout, and isn't involved in the display of the thumbnails.
The problems on this page are more basic HTML issues. First, you have a number of HTML errors on the page, including things like multiple <head> and <body> tags, unclosed <div> tags, using id's more than once, and so on. Run the page through a validator, and correct all of those problems before doing anything else. One of the most popular validators, at http://validator.w3.org/, is recording 38 errors and a bunch of warnings.
If that doesn't take care of the issue, it's time to bite the bullet and put size specifications on the thumbnail images. In other words, instead of this:
Do this:
Finally, I would strongly recommend getting away from the XHTML Transitional DOCTYPE, which is now 15 years old, and considered obsolete. It's long past time to rewrite to the HTML5 DOCTYPE.
The problems on this page are more basic HTML issues. First, you have a number of HTML errors on the page, including things like multiple <head> and <body> tags, unclosed <div> tags, using id's more than once, and so on. Run the page through a validator, and correct all of those problems before doing anything else. One of the most popular validators, at http://validator.w3.org/, is recording 38 errors and a bunch of warnings.
If that doesn't take care of the issue, it's time to bite the bullet and put size specifications on the thumbnail images. In other words, instead of this:
Code: Select all
<img src="highslide/images/thumbs/2014-02-05,01 Stockport Walkers,Rainow.JPG" alt="Stockport Walkers" title="Remember all the rain in February?"/>Code: Select all
<img src="highslide/images/thumbs/2014-02-05,01 Stockport Walkers,Rainow.JPG" width="160" height="160" alt="Stockport Walkers" title="Remember all the rain in February?"/>Re: Rendering problem in Chrome, Opera and Safari
Thanks for getting back so quickly and for pointing out the errors which I am working through. Thanks too for the work around which i will try if fixing the errors doesn't do the trick.
-
MisterNeutron
- Posts: 440
- Joined: Sun Aug 18, 2013 11:20 am
Re: Rendering problem in Chrome, Opera and Safari
I'm pretty sure that just fixing the worst of the errors will cure this problem. What you've done is take a whole page of code, including its own <head> and <body> sections, and plug it directly into another page, which already had its own <head> and <body> section. You can't do that. That's like taking a Morris Minor, jamming it inside a Rolls Royce, then trying to drive both of them at the same time.
These lines, for example, need to be in the <head> section of the page:
When I first looked at your page, they were in their own <head> section, but a page of HTML can have only one <head> section. Now, you have them in the <body> section, which is not where they belong.
These lines, for example, need to be in the <head> section of the page:
Code: Select all
<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="../highslide/highslide-ie6.css" />
<![endif]-->-
MisterNeutron
- Posts: 440
- Joined: Sun Aug 18, 2013 11:20 am
Re: Rendering problem in Chrome, Opera and Safari
I've suddenly realized what the big problem is with your thumbnail layout. There are two ways to approach a grid of thumbnails like that. One is to use an HTML <table> structure, with a <tr> for each row, and a <td> for each thumbnail. Sort of "old school" these days, but it works.
The other way to do it is with ordered lists, with a <ul> to start things off, each thumbnail in its own <li>, and using display:inline-block and a grid width to make the rows happen. (One big plus to this method, by the way, is that it makes it simple to center the last row, even if you have an uneven number of thumbnails in it - with an HTML table, that's wildly difficult).
But you have an unholy combination of both methods.
I'm kind of wrapped up in other things at the moment, but if I get time in the next day or two, I'll come back to this and do some quick re-coding.
(RoadRash, feel like taking on a project? Would you like to tackle this?)
The other way to do it is with ordered lists, with a <ul> to start things off, each thumbnail in its own <li>, and using display:inline-block and a grid width to make the rows happen. (One big plus to this method, by the way, is that it makes it simple to center the last row, even if you have an uneven number of thumbnails in it - with an HTML table, that's wildly difficult).
But you have an unholy combination of both methods.
I'm kind of wrapped up in other things at the moment, but if I get time in the next day or two, I'll come back to this and do some quick re-coding.
(RoadRash, feel like taking on a project? Would you like to tackle this?)
Re: Rendering problem in Chrome, Opera and Safari
Correcting the errors thrown up by validation didn't correct the messy thumb grid but adding width="160" height="160" did.
Thanks for your posts. I have corrected the issue you raised on 5th Jan at 09:29.
I look forward to seeing what you have to say on my unholy combination of table and ul
Thanks for your posts. I have corrected the issue you raised on 5th Jan at 09:29.
I look forward to seeing what you have to say on my unholy combination of table and ul
-
MisterNeutron
- Posts: 440
- Joined: Sun Aug 18, 2013 11:20 am
Re: Rendering problem in Chrome, Opera and Safari
Rather than try to wade into your page code, I figured it would be more useful to put together a quick demo page. This illustrates three different ways of trotting out a grid of thumbnails - using an HTML table (old school, looked down upon by purists), using an unordered list (I misspoke earlier - this doesn't cure the uncentered last row problem), and using display:inline-block (my personal favorite).
http://misterneutron.com/thumbsDemo/
This is very much stripped-down, without the actual href's for the Highslide images, without any styling on the thumbnails, and so on. I kept it simple on purpose, of course. The needed CSS is all inline - in the real world, you'd probably include that in your CSS file, instead. The only caveat is that display:inline-block won't work in IE7 or below, but those browsers are now well and truly dead, and can be ignored. This page is also valid HTML5, rather than the mid-1990's "transitional" DOCTYPE.
Take a look at the source code for the page, and notice how clean it is, which means that whichever method you choose, it will be easy to maintain. Note that with both the unordered list and the display:inline-block method, you can change the number of rows and columns without having to recode anything - all you have to do is change the width of the <div> that wraps around the whole grid. But you should really pick one method and stick to it.
On your page, you're using an amalgam of an HTML table with unordered lists within each table row. It works, but is sort of an offense against god and man.
http://misterneutron.com/thumbsDemo/
This is very much stripped-down, without the actual href's for the Highslide images, without any styling on the thumbnails, and so on. I kept it simple on purpose, of course. The needed CSS is all inline - in the real world, you'd probably include that in your CSS file, instead. The only caveat is that display:inline-block won't work in IE7 or below, but those browsers are now well and truly dead, and can be ignored. This page is also valid HTML5, rather than the mid-1990's "transitional" DOCTYPE.
Take a look at the source code for the page, and notice how clean it is, which means that whichever method you choose, it will be easy to maintain. Note that with both the unordered list and the display:inline-block method, you can change the number of rows and columns without having to recode anything - all you have to do is change the width of the <div> that wraps around the whole grid. But you should really pick one method and stick to it.
On your page, you're using an amalgam of an HTML table with unordered lists within each table row. It works, but is sort of an offense against god and man.
Re: Rendering problem in Chrome, Opera and Safari
Many thanks for your tutorial 
-
MisterNeutron
- Posts: 440
- Joined: Sun Aug 18, 2013 11:20 am
Re: Rendering problem in Chrome, Opera and Safari
You're welcome! 
When I'm trying to figure out something, I always find that a straightforward example is more helpful than all the explanations in the world. I'm betting that I'm going to end up steering other people to that little demo page in the future - this subject comes up a lot.
When I'm trying to figure out something, I always find that a straightforward example is more helpful than all the explanations in the world. I'm betting that I'm going to end up steering other people to that little demo page in the future - this subject comes up a lot.