Hi everyone,
I think I’ve found a solution for the gallery image squashing in IE 8. At least this worked for me in my case.
You’ll need to go to your nggallery.css file. You can access it either via FTP or by going to Gallery > Style within your WordPress dashboard.
I recommend doing this via FTP for making changes.
Once you have opened the nggallery.css file, scroll down until you find this code (under the “Gallery style” section of the file):
.ngg-gallery-thumbnail {
float: left;
margin-right: 5px;
text-align: center;
}
and comment out (or remove) the float: left;, so it looks like this:
.ngg-gallery-thumbnail {
/*float: left;*/
margin-right: 5px;
text-align: center;
}
Commenting the float out does the same as removing it.
Next, you will need to add a height and width for the thumbnail-box. The height and width dimension will depend on your specific image settings for your gallery.
For me, my gallery thumbnail boxes are 119px in height and 120px in width, so that’s what I’ll add to the CSS.
In the nggallery.css file, find this code (it should be right above the one you just edited):
.ngg-gallery-thumbnail-box {
float: left;
margin: 0px 5px 30px 15px;
border: 3px solid #267026;
}
Your specific code may be different than mine because I customized some colors. The main thing you want to find is the .ngg-gallery-thumbnail-box callout.
Then simply add the height and width dimension for your gallery thumbnail boxes, similar to this:
.ngg-gallery-thumbnail-box {
float: left;
height: 119px;
width: 120px;
margin: 0px 5px 30px 15px;
border: 3px solid #267026;
}
That should fix the IE8 display problems.
Also, remember – you should save this edited file to your hard drive, or where ever you keep files for later, because the next time NextGen Gallery is upgraded it will write over the file, and your changes will be lost.
You will then need to copy over the new upgraded file with the one you edited and saved.
I hope this fix helps!