AB Post Grid looking awfully in IE

Hi @henriette123, which version of IE are you using? Can you send screenshots of what you’re seeing?

IE 10 & 11 only work with version 1.0 of the CSS Grid spec and it’s a partial implementation at that. When coding CSS grid for IE, you have to pre-fix grid specifiers with the MIcrosoft versioning -ms-grid. The early grid specification can only use the column, row, span syntax. For IE !0+, you should also wrap MS Specific grid code in this media query wrapper that only executes for IE 10+. Earlier versions of IE do not support the grid spec.

/* IE 10+ CSS Grid and browser specific styles */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

}

Here’s an example of CSS grid for IE 10+ browsers:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */

    .site-header .wrap {
        display: -ms-grid;
        -ms-grid-columns: minmax(1rem, 200px) 1fr minmax(1rem, 200px);
        -ms-grid-column-align: center;
        -ms-grid-row-align: start;
    }

    .header-image .title-area {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-row-span: 2;
    }

    .locations {
        -ms-grid-column: 2;
        -ms-grid-row: 1;
        -ms-grid-row-align: end;
    }
}

• This reply was modified 5 years, 11 months ago by Victor Font.

Hello Victor, thank you for these explanations! And also thanks to John Parris for his reply, to which I apologise for not answering earlier because I am only an occasional web builder and not a frequent visitor of www.remarpro.com, and also because I tested my site through SmartBear Cross Browser testing with a free account which expired after a few days. The problematic browsers however, were exactly IE 10 & 11.

So what Victor says, makes a lot of sense. I believe that these techniques should by implemented directly in the AB plugin builders and (@John:) I hope that in the near future this issue will be resolved in a new release! (In fact I find it a bit strange that the AB post grid block wasn’t already cross browser tested in the first place, including in IE 10 & 11.)

Thanks, we have this on our list to tackle soon, hopefully in an update next week.

We updated to support MS grid in the latest 1.6.1 update. Let us know if you see any other issues.

Hi John,

We are seeing issues still with the 1.6.1 AB Post and Page Grid block on Internet Explorer.

URL: https://www.veteransstatebenefits.com (the Read All About It section of this homepage)

When will this be fixed please? In the meantime, is there something we can do to fix this?

Thank you very much!

Hi Marcus,

Which IE are you looking at? This will help us test it further.

I don’t know. We are a MacBook shop.

It was reported to us by a visitor using a computer in a library so I imagine something old.

I can send you a jpg photo of the problem if you provide me a email address.

The problem is the same as reported originally by @henriette123

The grid appears as one column (one scrambled Post) instead of two columns displaying 6 posts.

Hi Marcus,

Microsoft doesn’t support anything lower than Internet Explorer 11, and we’ve tested for that with success. CSS Grid also has partial support for IE 10 for users who are still on that, but unfortunately we can’t support anything that Microsoft doesn’t support.

Thanks John!

So I am assuming that this was indeed corrected in 1.6.1 for version 11?

Yep, that’s correct. We added the necessary -ms prefixes to the grid to ensure it looks good in modern IE browsers.

Hey folks,

We just released another update to Atomic Blocks with some additional fixes for the grid in IE11. Thanks for your patience!

Sorry to resurrect this but I’m having a problem and sadly only have one IE 11 available. I’m using the Essence Pro theme. The problem shows for me in the demo for that theme. So, it could be my Explorer but is not unique to my new site. Here’s the link to the page.

https://my.studiopress.com/themes/essence/#demo-full

When I scroll down to the 3 column example with the image backgrounds and the words About, eBook and Shop, I see the images are overlapping one another. Is this just me and just my IE 11? I’m running version 11.0.9600.19399.

I could have sworn this was working some days ago. Just so you know, this was happening before the new update to Genesis today and does not change after.