BTW, the same problem is happening in Google’s Chrome browser. I assume that since both Safari and Chrome are using the WebKit rendering engine, therein lies the problem: something about the coding in NextGen for the thumbnails is incompatible with WebKit.
Seeing as how Chrome is already garnering a user base (cnet reported recently that it’s already the fourth most used browser to visit their sites), and seeing as how Safari is well established, maybe this display problem can be tackled sooner rather than later… maybe? C|:-}
Have you the same issue with the default theme ?
Hey alexrabe,
Thanks a lot for this plugin! I just started using it.
Here is a sample of the thumbnail display.
FYI, I’m using the Maple Leaf by (TemplateLite.com).
Indeed, the squished thumbnail problem does NOT exist in both the default theme and the Classic. BTW, the theme I’m using is called “Maple Leaf” available at TemplateLite.com.
This makes me think there’s something in my theme’s CSS that is affecting NextGen (like maybe an a: or hover: class). This is not the case though. I looked at the various divs that NextGen creates to display thumbnails and they are all uniquely labeled and should not conflict with my theme’s CSS. I also removed a bunch of CSS bits that might affect it with no changes.
One consistency I did find in Safari is that simply loading a gallery page with thumbnails will nearly always show the squish problem. However, if I click the [Slideshow] link to switch over the the Flash viewer, and then switch back by clicking the [Picture List] link, the thumbnails nearly ALWAYS show up correctly.
Yet, this is only on Safari. Goggle’s Chrome always shows them squished regardless.
Very puzzling. I’m at a loss of where to start eliminating code to see if anything affects it.
Somehow the width of a random number set of images gets set to 20px….i can’t figure out what does that. Chrome’s DOM Inspector even shows you that the original value is read from the CSS, then overwritten out of nowhere with 20px.
When the page is refreshed the selection of malformed images is almost always different. This may well be a browser bug.
I fixed this by adding the following to the thumbnail image style in nggallery.css:
.ngg-gallery-thumbnail img {
float: left;
...
}
(Also tested in ff, ie7, ie6.)
It will increase the horisontal thumbnail spacing in ie6, which can be slightly remedied by using padding instead of margin on the thumbnail container as follows (for those who care about ie6):
.ngg-gallery-thumbnail {
/*margin-right: 5px;*/
padding-right: 5px;
...
}
@anyusernamewilldo,
This seems to have fixed it for me as well!
Thank you very much for sharing this!
Ah, I just noticed that this behaviour is back. I see it with both G5 and Intel ship based Macs. I guess now I would look into the theme itself…
I am planning to use NextGEN gallery, very helpful. http://www.webhostingr.net
look in your theme’s css for something like img{max-width:98%;} I took that out and the problem went away.
Hey, yeah! I did find similar code in my style.css doc for the Maple Leaf template:
img {
max-width: 100%;
}
I killed it and it seems to work perfectly well on both Safari and Windows Chrome.
I wonder what it’s for…? Maybe to keep images that are larger than the content column width from displaying beyond that width…? Oh well.
Nice!
