You’ve finally finished your website. You’ve tested it thoroughly. It’s responsive and fast. All looks great.

Chances are that during the creation and testing of your site you’ve used a popular browser such as Chrome if you’re a PC user or Safari or Chrome if you’re creating on a Mac.

During the final testing phase before you launch your venture out into the world you do some cross browser testing. Only to find there’s an issue on Internet Explorer and Edge browsers.

If there was a browser school where all of the browsers go to learn, IE and Edge would be the two disruptive kids that didn’t pay attention and were then confused on their CSS test.

We ran into this very same situation recently when building the following WordPress page using Divi.

Here’s How It Should Look 

Here’s How It Looks On IE

Here’s How It Looks On Edge

Our immediate thought was IE and Edge not supporting a CSS feature that Divi had used to achieve its colour overlay effect and low and behold background-blend-mode that was used in the Divi module to overlay a colour onto a monochrome background image is not supported in IE and Edge.

Rather than reworking what we’d already done we thought. Ok. The most simple way to get around this is to remove the background image on IE and Edge so that just the colour shows.

To do this there’s a couple of neat CSS tricks. One will be recognised by Internet Explorer and the other will be recognised by Edge. Other browsers will just ignore it.

First of all we need to be able to reference these sections so that we can make changes to them.

To do this we need to inspect the code and find its CSS class details.

There were nine coloured boxes, so this gives us nine separate elements.

Now this is where the magic happens. What we’re going to do is wrap these with the following Microsoft extension that is used by Internet Explorer to detect if a screen is being displayed in high contrast mode. 

As we’re checking if this is active and if it isn’t active anything within the following section will be executed on Internet Explorer.

As we created this page using Divi we’ll add this piece of CSS to the page. If you need to know how to do this just watch the video at the top of this page for full details.  

Now we’ll test on IE.

The background image is now no longer shown so the colours can be seen. Much better! BUT – this doesn’t work on Edge as it’s not supported by it. 

To get around this we’re going to use another Microsoft Extension that Edge does recognise. 

Again we’ll use this to remove the background image by using the following code. 

Once this code has been added to the page the Edge browser looks like this.

So that’s it. If you’re ever in a pickle with a layout on IE or Edge you can use this to add CSS that is specific to these browsers.

If you want to roll up your sleeves and get stuck in we have a great resource for you that is packed with training courses from beginner to expert for CSS and CSS3.

To find out more all you need to do is click on the button below to claim 2 months FREE access to over 500 courses that can help you to make your WordPress website look amazing.

Don’t want to go through the whole process of learning CSS? We offer a wide variety of services including: content creation, website setup, customisation through HTML, CSS, PHP, Javascript and JQuery.

To get help all you need to do is click on the button below. 

Affiliate Disclaimer: Please note that some of the links on this site are affiliate links. This means, at no additional cost to you, I will earn a commission if you decide to make a purchase after clicking through the link. Full disclosure on all affiliate links and why they’re recommended can be found in the affiliate disclaimer by clicking here