[Resolved] Website not loading on IE.9

Home Forums Support Website not loading on IE.9

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1355207
    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

    #1355227
    David
    Staff
    Customer Support

    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.

    #1355232
    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

    #1355416
    David
    Staff
    Customer Support

    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

    #1355420
    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! 🙂

    #1355461
    David
    Staff
    Customer Support

    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;
        }
    }
    #1355463
    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!

    #1355473
    David
    Staff
    Customer Support

    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.

    #1355485
    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!

    #1355501
    David
    Staff
    Customer Support

    They are only necessary if you add something inside them 🙂

    You’re welcome

    #1355506
    Jeremy

    Thanks for all your help today David!

    #1355507
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.