WordPress › Support » [Plugin: NextGEN Gallery] IE 8 issue with image lists

Billmcq
Member
Posted 1 year ago #

I am using the latest Nextgen 1.6.0, and when I have an image list instead of a slideshow in a post, in IE 8 the image list crowds together, each thumbnail is about 10px wide with no space between each thumbnail. It does not occur in Firefox, Chrome, or Safari. When I click the "Compatibility view" on the IE 8 browser, it corrects it. Is this a bug in Nextgen for IE8? It occurs on 2 different sites I have, and I disabled all plugins....same situation.

http://wordpress.org/extend/plugins/nextgen-gallery/
KLIQ-METHOD
Member
Posted 1 year ago #

I am having the same problem. My gallery is single row all the way down. Can anyone help? I have tried the other posts regarding this subject. The others say to customize the CSS in stlye.css, am I doing something wrong?

Sincerely,
Sean
KLIQ-METHOD
Member
Posted 1 year ago #

Not only is the gallery not aligning correctly in IE 8, but the image will not show the thick-box and thumbnail. The image is not popping up on click.

Here is my page below. Can someone help me with this?

http://ariescompany.com/catering-party-rental/tables
aureality
Member
Posted 1 year ago #

I found that the cause of this problem may lie not so much in a Nextgen gallery stylesheet as in a theme stylesheet (style.css).
In mine I had this entry:

a img, .entry img {
padding: 2px;
border: 1px solid #ccc;
max-width:100%;
}

removing the max-width property solved the issue (though it is still not looking nice because of a messed-up background).

Hope this helps

Paul
NativePaul
Member
Posted 1 year ago #
I'm not sure where the image max-width property applies but here's a safer way to fix the squashed thumbnails without effecting anything other than Next Gen Galleries. Add this to your theme's stylesheet:
```
.entry-content .ngg-gallery-thumbnail img {
    height:auto;
    margin: 0 0 18px 0;
    max-width:none;
}
```
That will reset the max-width property for Next Gen Galleries only.

Hope that helps.
markcoppock
Member
Posted 1 year ago #

I'm using Genesis, and it has max-width:100%; for images. For me, max-width:none; didn't work, but width:auto; worked fine.
bizibot
Member
Posted 1 year ago #

Here's the solution that worked for me:

Open ngallery.css
find .ngg-gallery-thumbnail img
set the margin to whatever thumbnail width you are using.

Ex:
margin:4px 300px 4px 5px; (if you are using 300px wide thumbs)
angelfish276
Member
Posted 1 year ago #
Adding
```
.entry-content .ngg-gallery-thumbnail img {
    height:auto;
    margin: 0 0 18px 0;
    max-width:none;
}
```
to my custom theme's style.css per NativePaul's suggestion above fixed it for me. (Thanks!)

I was getting all the images in the image list squashed to a few pixels wide with no space in between them. Lightbox effects were still working though. This issue was only occurring in IE (big surprise there).
kitshay
Member
Posted 1 year ago #

I'm am experiencing the same problem with the narrow gallery images when viewed with IE 8. I'm usuing the Platform Theme and when I tried entering the code above into the Style.css file It not only didn't work, but caused the site to malfunction, loosing all my spacing and pictures. I rolled back the changes and everything is back, but I'm still left with this problem of the narrow thumbnails in the NextGen gallerys when I use the List feature. No problem with the slidshow or full size photo browser features.

Anyone had another work around for this problem? And please, take into account I'm a bit of a lamb at playing with code, thats what plugins are for:)
mjkemp
Member
Posted 12 months ago #

Like markcoppock, I'm in Genesis.
The other solutions did not work, but adding this to the theme style.css worked.
You are better off, I think, adding to a child theme css file, because if you edit the NG sheet it could get overwritten on an upgrade to the plugin.

/*** FIX SQUASHED THUMBNAILS IN NEXTGEN GALLERY IN IE8 ***/
.entry-content .ngg-gallery-thumbnail img {
height:auto;
margin: 0 0 18px 0;
width:auto;
}
rain
Member
Posted 9 months ago #

Thanks! Native Paul. That fix worked. For others, please note that you may have to change the .entry-content to your themes own class for the entry content.
hrstrm
Member
Posted 9 months ago #

Another way could just be to add in your head of html doc:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

This makes the IE8 browser behave like IE7, and by that it works.
sparky672
Member
Posted 9 months ago #
Now what?

I've got a WordPress Twenty Eleven Theme with a NextGen default theme and this doesn't work in IE8.

I've tried all the things in this thread and it still won't work. No, I am not going to force IE8 into IE7 compatibility mode... I'd rather find the root cause and fix it.

EDIT: I finally got it.

In the style.css for the Twenty Eleven theme, I had to remove this...
```
.entry-content img,
.comment-content img,
.widget img {
	max-width: 97.5%;  /* Fluid images for posts, comments, and widgets */
}
```
I hope the NextGen developer addresses this issue in the next release. This should work with the "deafult" WordPress theme (Twenty Eleven) at least.