Community Forums › Forums › Archived Forums › Design Tips and Tricks › IE Compatibility View issue
Tagged: IE Compatibility view
- This topic has 3 replies, 2 voices, and was last updated 9 years, 10 months ago by rfmeier.
-
AuthorPosts
-
June 12, 2014 at 7:53 am #109478vrobertspressMember
Serious rendering issues.
Using any theme with sidebar widget like agency, ambiance, centric.
With IE "Compatibility view mode" is "ON"All other browsers working fine.
IE works fine with Compat view mode "off", but there are upwards of 80k people at my company potentially all using IE, and IE comes with compat mode on by default... so i cant ask them to turn it off.Based on info I found on the web... I added the following in Genensis > Theme Settings > Header and footer scripts
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7? />But no go.
Is this the right code? Should it be 'before' <head> if yes then how?
Below is the "view source" output.
As you can see, it's in there towards the bottom line 27... ,but does not seem to have the desired effect.
HELP !
------------------------------
http://Cant, it's internal to my company
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>*** TEST SITE *** – Where Talent and Work Connect Like Never Before</title>
<meta name="description" content="Where Talent and Work Connect Like Never Before" />
<meta name="robots" content="noodp,noydir" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="alternate" type="application/rss+xml" title="*** TEST SITE *** » Feed" href="http://10.11.224.100/?feed=rss2" />
<link rel="alternate" type="application/rss+xml" title="*** TEST SITE *** » Comments Feed" href="http://10.11.224.100/?feed=comments-rss2" />
<link rel="canonical" href="http://10.11.224.100/" />
<link rel='stylesheet' id='wordpress-popular-posts-css' href='http://10.11.224.100/wp-content/plugins/wordpress-popular-posts/style/wpp.css?ver=2.3.7' type='text/css' media='all' />
<link rel='stylesheet' id='agency-pro-theme-css' href='http://10.11.224.100/wp-content/themes/agency-pro/style.css?ver=3.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='google-fonts-css' href='//fonts.googleapis.com/css?family=EB+Garamond%7CSpinnaker&ver=3.0.1' type='text/css' media='all' />
<script type='text/javascript' src='http://10.11.224.100/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
<script type='text/javascript' src='http://10.11.224.100/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://10.11.224.100/wp-content/themes/agency-pro/js/backstretch.js?ver=1.0.0'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var BackStretchImg = {"src":"\/\/10.11.224.100\/wp-content\/uploads\/2014\/05\/HomePage970x-BandW-PRINTER-Grey.jpg"};
/* ]]> */
</script>
<script type='text/javascript' src='http://10.11.224.100/wp-content/themes/agency-pro/js/backstretch-set.js?ver=1.0.0'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://10.11.224.100/xmlrpc.php?rsd" />
<link rel="Shortcut Icon" href="http://10.11.224.100/wp-content/themes/agency-pro/images/favicon.ico" type="image/x-icon" />
<link rel="pingback" href="http://10.11.224.100/xmlrpc.php" />
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7? /><style type="text/css">.site-title a { background: url(http://10.11.224.100/wp-content/uploads/2014/05/web-header-white-Combined-300x60.png) no-repeat !important; }</style>
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<style>body { background-color: #ffda00 !important; }</style>
</head>
<body ...............June 16, 2014 at 8:23 am #109976rfmeierMemberHello,
I used to have this issue at my old job quite often where Microsoft was a the majority use case. Compatibility mode forces IE to be rendered in IE7 (also uses the IE 7 javascript rendering engine...ouch) , so that compatibility tag will not change anything.
I would instead use
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
to force the browser to use to most recent rendering engine available and hope the majority of those users are using at least IE 8.I hope this helps.
P.S. I am not sure how early that meta tag should be injected into the
<header>
element. In theory it should be fine where it is, but this is Internet Explorer we are talking about...
June 16, 2014 at 11:53 am #110003vrobertspressMemberThanks.. tried that. No go.
I think it needs to be higher, perhaps before <head>
As you can see it's well down around line 27
I have it in Genesis>Theme Settings> header section.
Do you know how I can get it to run before that?<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>*** TEST SITE *** – Where Talent and Work Connect Like Never Before</title>
<meta name="description" content="Where Talent and Work Connect Like Never Before" />
<meta name="robots" content="noodp,noydir" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="alternate" type="application/rss+xml" title="*** TEST SITE *** » Feed" href="http://10.11.224.100/?feed=rss2" />
<link rel="alternate" type="application/rss+xml" title="*** TEST SITE *** » Comments Feed" href="http://10.11.224.100/?feed=comments-rss2" />
<link rel="canonical" href="http://10.11.224.100/" />
<link rel='stylesheet' id='wordpress-popular-posts-css' href='http://10.11.224.100/wp-content/plugins/wordpress-popular-posts/style/wpp.css?ver=2.3.7' type='text/css' media='all' />
<link rel='stylesheet' id='agency-pro-theme-css' href='http://10.11.224.100/wp-content/themes/agency-pro/style.css?ver=3.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='google-fonts-css' href='//fonts.googleapis.com/css?family=EB+Garamond%7CSpinnaker&ver=3.0.1' type='text/css' media='all' />
<script type='text/javascript' src='http://10.11.224.100/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
<script type='text/javascript' src='http://10.11.224.100/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://10.11.224.100/wp-content/themes/agency-pro/js/backstretch.js?ver=1.0.0'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var BackStretchImg = {"src":"\/\/10.11.224.100\/wp-content\/uploads\/2014\/05\/HomePage970x-BandW-PRINTER-Grey.jpg"};
/* ]]> */
</script>
<script type='text/javascript' src='http://10.11.224.100/wp-content/themes/agency-pro/js/backstretch-set.js?ver=1.0.0'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://10.11.224.100/xmlrpc.php?rsd" />
<style type="text/css" media="screen"></style><link rel="Shortcut Icon" href="http://10.11.224.100/wp-content/themes/agency-pro/images/favicon.ico" type="image/x-icon" />
<link rel="pingback" href="http://10.11.224.100/xmlrpc.php" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" /><style type="text/css">.site-title a { background: url(http://10.11.224.100/wp-content/uploads/2014/05/web-header-white-Combined-300x60.png) no-repeat !important; }</style>
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<style>body { background-color: #ffda00 !important; }</style>
</head>June 16, 2014 at 12:15 pm #110009rfmeierMemberIt should be within the
<head>
element. Outside of head would definitely be ignored and probably cause even more rendering issues in IE.Here is code to inject the meta element early.
You could probably use Genesis Simple Hooks instead of adding code. I am not sure if it will let you adjust action priority.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.