Font display oversized in IE Compatibility Mode - css

I have a page working in all browsers including IE 8/9 except when those browsers shift to compatibility mode - then any text tagged as <p> becomes horribly oversized - larger than <h1>. The <p> is not responding to any stylesheets or css directives as pertains to size.
jquery and jQueryUI are present on the page but not involved in (explicitly) styling my <p> elements.

This meta-tag forces IE to display in the highest mode available to the version of Internet Explorer :
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
Put it in the <head> section of your page.

Jukka's premise proved correct - an unclosed H1 tag was the cause.

Related

IE8 Document mode not being set correctly

I have a website, where IIS sends the following in the header (which is correct for the overall site):
X-UA-Compatible: IE=Edge
However, on a specific page, I have at the very top of my <head> section the following:
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<![endif]-->
This is being interpreted correctly by IE8, as it shows up at the top of the when I view the page source. However, it never changes my Document Mode from "IE8 Standards" to "IE7 Standards." The Browser Mode is in IE8 Compatibility View by default(it's an intranet site), but even in normal IE8 mode, it still has the same Document Mode issues.
I thought that having the meta tag on the page overrides whatever was sent in the initial header from the server. Is there anything else I could be doing to change the document mode for this one page?
EDIT: I can force IE7 document mode if I place the following in my Page_Load of my aspx page Response.AddHeader("X-UA-Compatible", "IE=7"); so I now have this header show up after the IE=Edge header, so only this second one is interpreted. This doesn't actually solve my issue though, because the meta tag above has the advantage of not being used in IE9 or IE10, and some of the niceties of the page disappear when forcing to IE7 document mode. I just specifically need this to work for IE8 and older.
Also, if I remove the conditional CSS, it appears to get the document mode correct. So is it possible that conditional CSS executes after the page loads, and if so, how do I fix it to make IE7 document mode only show up for IE8 and earlier browsers?
Are you sure you have the order correct? I just tried this page that I found HERE and my browser defaults to "IE7 standards".
<html>
<head>
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<![endif]-->
<title>My webpage</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>

HTML5 lining up in Firefox and Chrome but not at all in IE

http://www.grossmag.com/2012/september/home.shtml
This link works in both Firefox and Chrome. I am not sure why it won't line up correctly in IE. I am trying to convert from old style tables/td's/tr's and this will be great if I can find out why it isn't lining up in explorer.
Sounds like your site is being viewed in compatibility mode in IE. This can depend on the DOCTYPE of your document.
To cause IE to display using the default mode of the current version, use the following META tag
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
This will not fix the site for IE7 (for example). If you wish to do that, then you will likely need to create custom CSS rules for older browsers

Web Server tomcat is not loading the ie related css

I have an issue with css.
I have a css file which has ie specific css clauses..Like
.ie7 #div
.ie #table
These css is working good in my local on tomcat server.
But the same css is not loading in IE in my dev system which is also running on tomcat.
When I debug the ie is not recognizing the ie specific css clauses. Also I found out that
the IE is not recognizing even the section and header tags.
Please let me know what can be the work around.
Thanks for your time and help.
Regards,
Varma
Assuming you're running IE9..
Make sure you don't have Compatibility Mode turned on, and make sure you have a valid doctype as the very first line to trigger Standards Mode:
<!DOCTYPE html>
If it still doesn't work, then add this meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Concerning this point:
Also I found out that the IE is not recognizing even the section and
header tags.
In older versions of IE, you need this to make the HTML5 semantic tags work properly:
http://code.google.com/p/html5shiv/

ASP.NET Force IE8 to use IE7 or IE8 Compatability View

I've tried the following and all it does is change the Document Mode, not the Browser Mode:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="X-UA-Compatible" content="IE=7">
My particluar page only works when the browser mode is either IE7 or IE8 Compat View.
The code you posted should work.
Please ensure the following:
The meta tag is right at the top of the header, as first element after the <title></title>.
Restart IE and open your page without manually setting the Browser- or Document Mode from the Developer Tools. Setting these manually can overwrite IE's behavior and causes it to ignore the compatibility tag.

IE not rendering CSS properly when the site is located at networkdrive

This is kinda weird problem we came across with my friend. We located our site at network drive and tried to open it from there. All other browsers render this page just fine but IE (btw. why it's always IE? :) ) can't understand inline-block statement. But if I copy our file to my local drive there is no problem, IE renders everything just like other browsers.
I tested this with IE7-9b.
This sounds like that problem - where IE switches rendering modes depending on where the page is located.
It's insane.
See this answer.
http://127.0.0.1/mysite/mypage.php <-- IE8 by default (updated!)
http://localhost/mysite/mypage.php <-- IE8 by default (updated!)
http://machinename/mysite/mypage.php <-- IE7 by default
http://192.168.100.x/mysite/mypage.php <-- IE7 by default
http://google.com/ <-- IE8 by default
So, because you're accessing your site via "network drive", IE is going into IE7 mode, and IE7 does not support inline-block properly, hence your site does not render properly.
You can request IE8 to render your page in IE8 mode by adding this to your page:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Or, to request IE8 to use the most recent version of it's rendering engine (think IE9), you should use this:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
Or, to use Chrome Frame instead if it's available:
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
Use an admin account. IE may Denies access to network drive if not admin.

Resources