[Resolved] Website not loading on IE.9

[Jeremy]

Hello,
I hope you can help me.
I noticed that my site had a 99% bounce rate when viewed through the IE9 browser.
I suspect that my site is not loading correctly there as visitors bounce in 3 seconds.
In my child theme additional CSS I have the following code which I suspect could be the issue:

/* GeneratePress Site CSS */ .inside-article,
.sidebar .widget,
.comments-area {
border: 1px solid rgba(232, 234, 237, 1);
box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}

/* Featured widget */
.sidebar .widget:first-child {
background-color: #FFFFFF;
color: #000000;
}

.sidebar .widget:first-child .widget-title,
.sidebar .widget:first-child a:not(.button) {
color: #000000;
}

.sidebar .widget li {
margin-bottom: 15px;
}

.button.light {
background: #fff;
color: #000;
}

.button.light:hover {
background: #fafafa;
color: #222;
}

.separate-containers .page-header {
background: transparent;
padding: 20px 0;
}

.page-header h1 {
font-size: 30px;
}

@media (min-width: 769px) {
.post-image-aligned-left .post-image img {
max-width: 300px;
}

} /* End GeneratePress Site CSS */

If so, could you please advise if I need to change that code anywhere or if there is anything I can add to improve how my site loads across devices including IE9?

Many thanks
Jeremy

[David]

Hi there,

Microsoft ended support for IE8,9 and 10 over 3 years ago.
And as much we like to develop with backwards compatibility, and GP is built to ‘work’ with those browsers, we cannot support custom development for IE8,9 or 10.

But looking at your custom CSS – i think that is highly unlikely to be the cause of the bounce rate. None of that CSS would have a negative effect if it were unsupported by the browser – it just simply would not apply.

It’s more likely to do with other scripts running on the site … or some other reason that would be as bizarre as the reason for using IE9 in the first place.

Unless you have a huge IE9 user base i would probably move focus elsewhere.

[Jeremy]

Hello David,

Thanks for your response and makes sense.
Its over 15,000 visitors per month so am keen to get it resolved ideally.
That being said do you think I need to edit the CSS? I am thinking of adding the following code:

@media (max-width: 768px) {
/* CSS in here for mobile only */
}

@media (min-width: 769px) and (max-width: 1024px) {
/* CSS in here for tablet only */
}

@media (min-width: 1025px) {
/* CSS in here for desktop only */
}

I got this from your support article here: https://docs.generatepress.com/article/responsive-display/#ie10-specific-styles

Does this need to be changed somewhat?

Thanks!
Jeremy

[David]

It is this CSS that you need to add around you styles for 10+ support:

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  /* IE10+ specific styles go here */
}

https://docs.generatepress.com/article/responsive-display/#ie10-specific-styles

[Jeremy]

Okay thanks fort all your help David and promptly response!

I have added this code to my additional CSS along with the media code, so my additional CSS file now looks like this:

/* GeneratePress Site CSS */ .inside-article,
.sidebar .widget,
.comments-area {
border: 1px solid rgba(232, 234, 237, 1);
box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}

/* Featured widget */
.sidebar .widget:first-child {
background-color: #FFFFFF;
color: #000000;
}

.sidebar .widget:first-child .widget-title,
.sidebar .widget:first-child a:not(.button) {
color: #000000;
}

.sidebar .widget li {
margin-bottom: 15px;
}

.button.light {
background: #fff;
color: #000;
}

.button.light:hover {
background: #fafafa;
color: #222;
}

.separate-containers .page-header {
background: transparent;
padding: 20px 0;
}

.page-header h1 {
font-size: 30px;
}

@media (max-width: 768px) {
/* CSS in here for mobile only */
}

@media (min-width: 769px) and (max-width: 1024px) {
/* CSS in here for tablet only */
}

@media (min-width: 1025px) {
/* CSS in here for desktop only */
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}

} /* End GeneratePress Site CSS */

Please let me know if this looks okay, or if you think it will cause any issues loading my site across different devices or else I’ll close off the ticket as resolved.

Thanks! 🙂

[David]

You’re CSS needs to go inside the IE10 media query – so it should look like this:

@media screen and (-ms-high-contrast: active),
screen and (-ms-high-contrast: none) {

    /* IE10+ specific styles go here */
    /* GeneratePress Site CSS */
    .inside-article,
    .sidebar .widget,
    .comments-area {
        border: 1px solid rgba(232, 234, 237, 1);
        box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
    }

    /* Featured widget */
    .sidebar .widget:first-child {
        background-color: #FFFFFF;
        color: #000000;
    }

    .sidebar .widget:first-child .widget-title,
    .sidebar .widget:first-child a:not(.button) {
        color: #000000;
    }

    .sidebar .widget li {
        margin-bottom: 15px;
    }

    .button.light {
        background: #fff;
        color: #000;
    }

    .button.light:hover {
        background: #fafafa;
        color: #222;
    }

    .separate-containers .page-header {
        background: transparent;
        padding: 20px 0;
    }

    .page-header h1 {
        font-size: 30px;
    }
}

[Jeremy]

Thanks David, but what about the remaining media code, is that all good or does that need to go inside a query too?

Sorry for the all questions and appreciate the support. I’m pretty new to this so if you wouldn’t mind laying out the full code I’m sure we will get there sooner!

[David]

No apologies necessary.
No you don’t require the other @media queries.

All they are is a conditional wrapper – so IF the condition is met then the CSS gets applied.
What i did was make it so all your Custom CSS only gets applied when the IE10+ conditions are met.

[Jeremy]

That makes sense and will update the code accordingly,

I just want to ensure my site loads optimally on all devices and mobile, hence why I added those media queries. But if you do not think they are necessary, I will take them out and add the code you provided.

Thanks!

[David]

They are only necessary if you add something inside them 🙂

You’re welcome

[Jeremy]

Thanks for all your help today David!

[David]

You’re welcome

[Author]

Posts