Internet Explorer Issues with Pro Builder and Pages

[tamarapensa]

Hi guys,

I seem to be having an issue with Internet explorer despite the website working fine on all other browsers.

I can’t even use the pro builder in IE. I am using version 11.778 and my pro theme is up to date.

The biggest issue is the contact form container at the bottom of every page, it’s background image cuts off and displays the overlay colour. On other broswers the image goes down and meets the footer with no colour between them
On IE it looks like this:

On Chrome it looks like this:

Any help would be appreciated

Thank you

[christopher]

Hi @tamarapensa,

There are few things going on that I need to give context.

• You used the Ninja Forms and it does not load the form at the page load time, and it waits and loads it afterward. There is a preloader showing instead of the form. Now the IE browser does not calculate the height difference when the form shows and that is why that happens. You can test that by removing the ninja form and you will see that the background works ok. So this is not a theme related issue.
• I would use the Raw Content element instead of the Text element when it comes to adding a shortcode. It will not have a change in this case but as a general rule of thumb. For more information:

Raw Content | Themeco Docs

• You have the same section copied over for all the pages. We have a better way. You can use the Global Block feature to add the form and background once and use it on all pages. Now if you happen to need to change something you can change it from the global block and it will change for all pages. You can learn more about global blocks here:

Global Blocks | Themeco Docs

To add a global block into a page, you will need the global block element. For more information:

Global Block | Themeco Docs

Now, to fix the problem that you are experiencing, I suggest that you add a minimum height to the text element (Better to use the Raw Element). That way it will make sure that there is a minimum height and IE will have a forced height calculation.

Please add the code below into Element CSS feature of the Text (Raw Content) element:

$el .nf-form-cont {
  min-height: 391px;
}

I used the Google Chrome browser developer toolbar to find out the correct selector of the CSS code and I think 391 will be a good minimum height, but you can change that as you see fit. You can learn more about the developer toolbar here:
https://www.youtube.com/watch?v=wcFnnxfA70g

You can learn more about Element CSS feature and what $el mean in the code here:

Element CSS | Themeco Docs

Thank you.