Posts not appearing in Blog Grid Template in IE 11

Hello,

I am using the Beaver Builder Blog Grid Template for the main archive page of the blog on my company’s website. While the grid template works fine on all other browsers, on Internet Explorer 11, the posts in the grid are not visible.

While I cannot share a live link to the site because it is in a production environment, I can provide some of the differences I saw in the code (below) between Chrome and IE. The first thing I noticed is that the HTML in Chrome includes the class “masonry-brick” and a bunch of inline styles, whereas IE has neither.

So, my main question is why isn’t IE loading that class and applying those inline styles?

Chrome HTML and CSS

HTML:
<div class="fl-post-grid-post masonry-brick" itemscope="" itemtype="http://schema.org/BlogPosting" style="position: absolute; left: 0px; top: 0px; visibility: visible; height: 404px;">

CSS

.fl-post-grid-post {
    background: #fff;
    border: 1px solid #e6e6e6;
    /*visibility: hidden;*/
}

IE HTML and CSS

HTML:
<div class="fl-post-grid-post" itemtype="http://schema.org/BlogPosting" itemscope="">

CSS

.fl-post-grid-post {
    background: #fff;
    border: 1px solid #e6e6e6;
    visibility: hidden;
}

Hey Jonah,

Welcome to the BB forums! :slight_smile:

I just tried viewing the blog grid layout demo of our site via IE 11 on a Windows 10 machine and it works fine. I also tried creating a blog grid layout on our dev server, viewed it on the same actual machine, and it works fine.

What OS were you running when you visited the site? Can you try visiting the same layout that I linked above and see if it works on your IE 11?

Ben

Hey Ben, thanks for getting back to me.

We are running Windows 7. I visited the demo link on our machine… the grid layout looks fine - all posts appearing as they should.

Do you have any ideas about what possibly might be blocking the inline styles from appearing in IE for whatever reason on my site?

Hi Jonah,

Very odd indeed. Is it possible for you to disable all active plugins and see if this makes any difference?

It’s rather difficult when we can’t see the issue first hand. :frowning:

If disabling plugins doesn’t work, can you try switching theme (if you’re not using the BB Theme) and see if this resolves the issue.

Thanks,
Danny

Danny, thanks for the suggestions. I’ll try disabling plugins and switching to a different theme tomorrow, but in the meantime…

I realized there is a way for you to see the site in the staging environment. It is in a “production mimic” staging environment that is only accessible via a “hack” (addition of an IP address redirect of my company’s website) to your computer’s hosts file. I will provide information for the hosts file hack, along with a URL to the blog page, in a private reply below.

[Content Hidden]

Hi! Not sure if you had a chance to do the hosts file hack, but I deactivated my plugins one by one and discovered that this jQuery updater plugin is the source of the issue.

Thanks for your help!

Hi guys, I’m changing the status of this to “unresolved,” again. The plugin that I deactivated, jQuery Updater, all it does is supply jQuery, which we need. With jQuery gone, the grid layout works, but many other things on the site are broken.

So, at that, I’m not sure what else to do. I’m hoping you can try looking at the site via the hosts hack method that I explained earlier. Thanks!!

Hi Jonah,

We support the version that is included with WordPress. What are these things that are broken?

Thanks,
Danny