Major Pro & IE Compatibility Issues

[leighgen]

I’m seeing several compatibility issues between my website (https://brothersbrother.org) and IE11. Adding the following CSS code from this thread here did a little bit to fix my problems, but things are still not showing correctly in terms of formatting, alignment and placement. (i.e. sections are not recognizing spacing that is assigned in the Pro editor and overlapping with one another.)

.fm4.x-text, .fm5.x-text, .fm8.x-text, .fm9.x-text, .fm12.x-text, .fm13.x-text {
letter-spacing: 0em;
width: 100% !important;
}

ul:not(.sub-menu).x-menu .x-dropdown {
position: absolute !important;
left: 0px !important;
top: 100% !important;
}
ul.x-menu .sub-menu .x-dropdown {
left: 100% !important;
top: 0px !important;
}
.no-preserve3d .x-image img {
width: 100%;
}
.no-preserve3d .x-masthead .x-image img {
width: auto;
}

The website shows up properly on every other browser but is just giving me tons of problems in IE. Are there any additional lines of code you could add to the above in order to fix the section bottom spacing issues? Please someone help me – I haven’t been able to find any solutions!!! Will provide login credentials if needed.

[lely]

Hi @leighgen,

The root cause of the overlap in IE is the negative bottom margin on container. See this: https://screencast-o-matic.com/watch/cqivQPOpGe . The background will adjust once -10em bottom margin was remove.

Now, the reason you have added that -10em is because of excess space on that section. That space is coming from your columns. Remove or reduce 3.5% bottom margin and remove my-class from your columns and you are good to go. my-class has property -150px. See this: https://screencast-o-matic.com/watch/cqiv6iOpGg

Unlike other browsers, IE doesn’t respond well on negative margins or spacing. This is not an issue with Pro but generally with IE browser. Looking at your design, I understand why you come up with this. Because you want an overlap. We can achieve those overlap without using negative margins or position. We can use the magic of Lower and Upper Background available on sections.

To achieve it, we only need 1 section.
1.) Inspect the section with headline Global Relief Organization
2.) On Background Lower Layer of this section set the image as background. On Background Upper layer set the white color as background:

3.) On customize tab > Element CSS of this section, add the following CSS that will set the upper layer white background height:

$el .x-bg-layer-upper-color{
  height:50%; /*Adjust this height as intended to achieve the overlap you need.*/
  
}

4.) On this same section, add the row with 3 columns images.

No matter what you add on those section, the background image will display and on top it, depending on the height you have set on CSS above, white image will display too.

Hope this helps.

[leighgen]

Great, thank you! That definitely fixed the overlapping problems.

Another quick question…

1. Is there a reason Revolution Slider isn’t showing up correctly or is that inherently native to them and not ThemeCo? Is there a way to make it render at least a photo for it instead?

[leighgen]

Actually, I had another question. (Sorry for sending it in two separate notes!)

I can’t get the footer to touch the last section on the page. This is leaving about an inch sized gap of white space at the bottom between the last section and the footer. I tried making all of the margin/padding sizes small or 0, and eliminating the “my-class” from it but nothing seems to work.

Do you have a solution for this as well? Thank you in advance!

[lely]

Hi @leighgen,

@leighgen

Is there a reason Revolution Slider isn’t showing up correctly or is that inherently native to them and not ThemeCo? Is there a way to make it render at least a photo for it instead?

I am not exactly sure of the issue.In case you do update Slider Revolution, it now needs that you load its libraries to the pages where a slider has been added via a function in the PHP page template which is the case in our themes if you use the Slider Above and Below Masthead option.

With that said, please follow the solution in this thread: https://theme.co/apex/forum/t/updated-slider-revolution-and-it-stopped-working/61443/92

@leighgen

I can’t get the footer to touch the last section on the page. This is leaving about an inch sized gap of white space at the bottom between the last section and the footer. I tried making all of the margin/padding sizes small or 0, and eliminating the “my-class” from it but nothing seems to work.

I can’t see the white space between your footer and last section. See below: