Skip to content Skip to main menu Skip to utility menu

Messed Up Layout in IE?

Home Forums GovIntranetters Messed Up Layout in IE?

This topic contains 7 replies, has 3 voices, and was last updated by  appleadv 11 months ago.

  • Author
    Posts
  • #2761

    aaron robb
    Participant

    Hi! We’ve set this theme up for a client, and a good number of their users use IE 11 for their browsers (organization enforced – no idea why).
    The site is coming up for them all messed up, as if some random css or js calls are not working.

    I’ve attached two files here – the good and the bad layouts. (Note: badlayout is zoomed out a bit, hence why its more narrow – this isn’t the problem, just the rest of it is the issue)

    I’ve tried to pinpoint if certain files or lines of css are missing/bad in IE but I can’t find anything.

    My thought is their system is blocking something in IE. Apparently Chrome works fine on their network, so its IE specific. I haven’t been able to go there myself to test.

    Has anyone seen this before? Any idea of a fix?

    Thanks!!!

    • This topic was modified 11 months ago by  aaron robb.
    Attachments:
    You must be logged in to view attached files.
  • #2765

    appleadv
    Participant

    Check the Compatibility View setting in IE (tools >> Compatibility View). It usually defaults to always show intranet sites in Compatibility View which will break this layout.

    The network admins should be able to set this to ‘off’ in their group policy for a global fix across the organization.

  • #2766

    Stuart Brameld
    Participant

    I think we may have had the same problem, I spent many hours trying to fix this! Try editing your header.php as follows:

    “The following customisation has been made to the header.php file in order to force IE to use a modern rendering engine, to ensure the site works correctly in modern version of Internet Explorer when ‘display compatibility mode for Intranet sites’ is selected.

    // deal with IE display all sites in compatibility mode setting
    header(‘X-UA-Compatible: IE=edge’);”

    note: this files gets overwritten with theme updates, so if it works, you’ll need to add back after an update, or create a child theme or plugin.

  • #2767

    Stuart Brameld
    Participant

    p.s. just saw the response from appleadv, problem we had is the company wouldn’t turn it off as they had a load of big, important but old internal applications that required it

    • #2770

      aaron robb
      Participant

      See final solution below!

      • This reply was modified 11 months ago by  aaron robb.
  • #2768

    aaron robb
    Participant

    Brilliant.

    I think that’s it. I just tested on my computer by adding the site to the list of compatibility ones, and it broke the same way.

    So we’ll see if the IT department can fix that, if not, I’ll try Stuart’s fix.

    Thanks for the incredibly fast responses!

  • #2772

    aaron robb
    Participant

    Ok, so I got the compatibility issue fixed by adding the code below to the wordpress mu-plugins plugin file that we created for this theme. The “header(‘X-UA-Compatible: IE=edge’);” code for some reason wasn’t showing up for me, even in a few other variations I tried, so this is a bit of a offshoot of it.

    Adding it to a must-use plugin will eliminate the problem of it being overwritten with a theme update.

    The 0 at the end of the action forces this to load at the top of the header file (or close to the top).

    //Remove Compability Error from IE
    add_action('wp_head', 'compat_remove_wp_head', 0);
    function compat_remove_wp_head(){
     echo "<meta http-equiv='X-UA-Compatible' content='IE=edge'>";
    }

    Got confirmation from the admin within the network that this makes the site load properly!
    So thank you for the help to get this started!

  • #2773

    appleadv
    Participant

    Thanks for the plugin solution, I’ll add it to my toolbox!

You must be logged in to reply to this topic.