The Divi Theme's full width header module comes with a handy "full screen" mode, which makes the module not only full width, but also full height. This allows you to easily add attention grabbing pages to your site, such as the example above which I quickly knocked up. Unfortunately, they don't look so great in Internet Explorer…
Fullscreen Headers in IE
This is as it appears in Google Chrome. However, as Mark kindly pointed out to me, it's a different story when the full width header is viewed in Internet Explorer:
Notice that the content isn't vertically centered any more, reducing the impact of the header.
And in older versions of Internet Explorer, things get worse. Here's the same page viewed in IE9:
Notice now that there is a gap between the Divi header and the full width header module background.
Fixing Fullscreen Headers in IE
Without boring you with the details of the specific IE bugs and incompatibilities involved, I found I was able to make the fullwidth header (fullscreen) mode behave better in IE with the following:
<style>
body
.et_pb_fullwidth_header.et_pb_fullscreen
.et_pb_fullwidth_header_container {
height: 1px;
}
</style>
<!--[if lte IE 9]>
<style>
.et_pb_fullwidth_header.et_pb_fullscreen
.header-content-container.center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.et_pb_fullwidth_header.et_pb_fullscreen
.header-content-container.bottom {
position: relative;
top: calc(100% - 80px);
transform: translateY(-100%);
}
.et_pb_fullwidth_header.et_pb_fullscreen
.header-content {
float: none !important;
margin:0;
width: 100%;
}
</style>
<![endif]-->
Note that this is wrapped in conditional HTML tags and so should be treated as HTML, not plain CSS. To add it to Divi, I suggest putting it into the "Divi > Theme Options > Integration > Add code to the <head> of your blog" box.
This code fixes various issues to get the fullscreen fullwidth headers displaying correctly in IE 9 and above. Note that I haven't attempted a fix for IE8 and below as these browser versions have significant additional incompatibilities and are dwindling in usage.
Fixing Fullscreen Headers in IE using Divi Booster
I've added an option to my Divi Booster plugin to easily implement the IE fullscreen header fixes. Simply go to "Modules > Header (Fullwidth)" and you'll see:
Tick the "Fix fullscreen mode display issues in IE" option, save the settings, and you're done.
The option is available in Divi Booster version 2.1.2 and higher.
Hi Dan, this works once, when I go to the website again it goes back to how it was before the fix. If I update the integration page it fixes the issue on IE, but then it goes back to how it was. How can I make this a permanent fix? Thank you.
Hi Cat, I'm not sure what's causing this problem for you – the fix as described should be permanent… Any chance you can send me a link to the page you're working on so that I can take a look at what's going on? Thanks!
Thanks for your reply, I've attached the website address, it's the second header of the home page. Thank you
Hi Cat, thanks for the URL and sorry I'm only now getting back to you.
It looks like the problem is a result of the caching you have enabled on the page (using Comet Cache). Divi adds a CSS class to the body element of the page to indicate which browser is being used (chrome, IE, etc), and my code makes use of this to detect and apply the code only on IE. However, the caching is breaking this and sometimes a user on IE is shown a page which has the class from a different browser, such as Chrome. That's what's causing the intermittent issues you've been seeing.
There are two ways I can see to fix this. One is to disable caching on the home page. The other is to change the second line of code in my fix from "body.ie" to just "body". While this means the fix code will be applied on all browsers, I've done some testing and it doesn't seem to affect how the header looks in other browsers.
I hope that helps.
Just to follow up, I've applied that code change in the post above and in the next version of Divi Booster (2.5.6). Thanks!
Hi Dan,
could you please look at my website, and point out where is my error?
I appreciate this,
Cat
Did not work. Purchased Plugin. Also did not work.
Hi Fred, I'm sorry to hear that. Is there any chance you're able to send me a link to the page your working on so that I can take a look at what's going on?
Thanks so much for this fix!
Dan, this is a good fix. I was experiencing this problem with the Extra theme and this tip fixes the issue. Good to also add to your Extra Booster plugin.
Thanks for letting me know, Glen. Yes I'll definitely include this in Extra Booster when it's ready. Cheers!