Messed Up Layout in IE?

Home Forums GovIntranetters Messed Up Layout in IE?

Viewing 6 reply threads
  • 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 7 years, 4 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 7 years, 4 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!

Viewing 6 reply threads
  • You must be logged in to reply to this topic.