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

  • Resolved Bill

    (@billmcq)


    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/

Viewing 12 replies - 1 through 12 (of 12 total)
  • 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

    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?

    Tables

    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

    (@nativepaul)

    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

    (@markcoppock)

    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

    (@bizibot)

    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)

    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).

    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:)

    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;
    }

    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.

    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.

    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.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘[Plugin: NextGEN Gallery] IE 8 issue with image lists’ is closed to new replies.