I am developing a web page that will only be available from the company's intranet. At first the client's requirements was that if needed to work with IE8 which was fine.
Our first problem was that after launching the site live so the client can test it, we realized that every employee's IE was configured to open intranet's website in compatibility mode (The way employees computer are set up) which destroyed everything visually since nothing was tested for IE7...
I managed to make it work at 95% by including this meta tag :
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
For the other small glitches on the page, I included a small script to detect if it was in compatibility mode and then load another css to fix those other glitches and it works perfectly, everything went back to the right place and the design is fine:
$(document).ready(function () {
try { JSON } catch (e) {
var cssLink = $("<link rel='stylesheet' type='text/css' href='../css/compatibilityMode.css'>");
$("head").append(cssLink);
}
});
The problem now is that they need to be able to print that page so I need to make a css for print. The page is divided in sections and before every one of them I use this code to do a page break. EX :
.part2 { page-break-before: always; }
This works perfectly in Chrome and IE9+ but in compatibility mode it's ignored and the print preview is completely messed up...
I researched a lot on the web and the page-break-before property is supposed to be supported since IE4 so I do not understand why it's not working...
Also, to tell IE which styles to apply to the print version, I put my print css inside this tag :
#media print { }
According to my research online, some people say that this is not supported in IE8- since it's media queries and some says it is supported because media types were supported way before media queries and it should work...
I really don't know what to try and where to look anymore, was wondering if anyone could point me in the right direction or give me any suggestions as what to try next..
Thanks in advance!
Related
I have just finished the layout for my website, and it is working perfectly fine in all browsers (Opera, Safari, Chrome, IE 7, 8, 9, 10 (both), and several others) - but this time around, the Compatibility View button in the address bar of IE 10 is appearing. This has not happened for a very long time and it's really annoying me.
I don't want the Compatibility View button to display at all. It sends a bad message to viewers/visitors. In this case, I have tested my whole site on different computers all running different browsers and different versions of browsers and I have not noticed a single problem.
Why is the Compatibility View button appearing if there are no issues?
Here's the problem, and like I said, everything works fine - except for when I turn ON Compatibility View in IE 10. When I turn it ON, the only things in my entire website I can see is my logo, and a little image in the top right corner of the page (but they're positioned exactly where I wanted them). What gives?
There's nothing wrong with the code - seriously. i've had it validated several times, all AJAX stuff works like a charm, and I really tried so hard to find a problem and I even intentionally tried to mess it up but it's working really well. The positioning of everything is spot on.
So what's the deal with this Compatibility View junk? Why is it there - on a website that does not have any issues? And, most importantly, is it important that I make sure my website works well while in Compatibility View even though it works perfectly when it's off and even though it works perfectly in all the major browsers - and then some?
First and foremost, you can force IE not to display the Compatibility View button simply by adding this to your page head:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
As for your other questions:
Why is the Compatibility View button appearing if there are no issues?
So what's the deal with this Compatibility View junk? Why is it there - on a website that does not have any issues?
It's there in case a site, typically one that was written many years ago, fails to work in a newer version of IE, to allow users to view or IE to display it in a legacy rendering mode where it will hopefully work better.
Additionally, it's there by default because legacy sites will not even have the meta tag above to begin with. In order for the button to display when viewing existing sites without having to update their code, it's only logical to make it an opt-out feature instead, by having the developer add it to new code to tell newer versions of IE to hide the button when it's not needed.
And, most importantly, is it important that I make sure my website works well while in Compatibility View even though it works perfectly when it's off and even though it works perfectly in all the major browsers - and then some?
Compatibility View is meant for websites that were specifically designed for legacy browsers, and as such, depend on legacy rendering quirks not present in more recent browsers which may cause "problems" in those more recent browsers.
Without seeing your site, we won't be able to determine why it works in IE7 and IE10 in IE7 mode but not Compatibility View, but if it works well in newer versions of IE, you do not need to ensure that it works well in Compatibility View. Using the meta tag above to hide the button when it's not necessary will suffice.
Can you provide us a link to your site? I always use
<!DOCTYPE html>
on the first line of the HTML document. This is a universal switch to the latest rendering mode in all modern browsers. Use BoltClock's solution to hide a compatible view button in IE's address bar. I would prefer a HTTP header rather than HTML meta tag, because the meta tag causes parser switch and reset.
I'm having two problems:
My website is not forwarding from index.html on IE6 - IE9
Images are not loading on any page IE6 - IE9
For the first problem, if you go to http://www.matthallock.com/ the website cycles endlessly regardless if I link it to a file (e.g., /hamlet.html) or directly (e.g., http://www.matthallock.com/hamlet.html)
The second problem, more troublesome, is images appearing blank on Internet Explorer. Further, the problem appears to be with the jQuery, as the fixed sidebar also does not work.
I tried the degrade for the lazy load, but that doesn't solve the problem. Curiously, if you go to my blog at blog.matthallock.com, there is no issue and the styling of the sidebar appears correct.
Appearance and functionality works properly in Chrome, Safari, and Firefox.
Any help is much appreciated.
<META HTTP-EQUIV="refresh" CONTENT="0;http://www.matthallock.com/hamlet.html">
You need to specify url= before actually giving the URL, otherwise it just reloads the current page.
$("img").lazyload({
effect : "fadeIn",
/*
appear : function(elements_left, settings) {
console.log("appear");
console.log(elements_left);
//console.log(this, elements_left, settings);
},
load : function(elements_left, settings) {
console.log("load");
console.log(elements_left);
//console.log(this, elements_left, settings);
}
*/
});
Your browser console gives you this one for free: "Expected identifier, string or number" - IE does not like trailing commas in object definitions, and because of your multiline comment your resulting code is:
$("img").lazyload({effect:"fadeIn",});
See that extra comma? Remove it, and everything magically works.
I've been working on a PHP project for University, and as I'm rubbish at PHP I've left the design very simple so I can concentrate on the programming side of things. Now the programming is working I'm working on the design. The site looks fine in Chrome and other webkit browsers but in IE9 it looks awful. The main problems are...
1 - Background image expands the div to the full image size, whereas in webkit is only fills the div size.
2 - Content is not centred, instead it is floated left.
Does anyone know any scripts/hacks I can use to get IE to perform like every other browser? The only thing I'm using at the minute is Modernizr.
You can have a look at the site here if it helps - http://newmedia.leeds.ac.uk/ug10/cs10cwh/pod/index.php.
Modernizr can help, especially if you're using newer things like html5 and css3. Another thing that can help is boilerplate code, I personally like the html5reset.
One particular thing from that is going to help you a lot: if I look at your site in IE it says it goes into Quirks mode, making IE7, 8, and 9 behave... well... quirky :) Place the following meta tag in your head section to improve things for IE:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
You can see what "Browser Mode" and "Document Mode" IE is running in by bringing up the developer toolbar (F12), you can tweak it temporarily for your browsing session to see what happens if document mode is "IE9 standards".
A short update. You may also want to try using w3 validator. One of the errors it gives me for your site:
Line 1, Column 15: Comments seen before doctype. Internet Explorer will
go into the quirks mode.
There are also a few errors on unclosed tags, which can throw off rendering.
What we do is using a seperate .css for the IE versions and in the root we determine the browser and include that .css
So include your normal css for all browsers and for the IE versions include the specific .css file which overwrites the necessary party of the main stylesheet.
Edit: And like Jeroen said, force the IE to render in it's real mode, not some compatible or quirks thing.
This has got to be really boneheaded.. but after reading the same very simple answer over and over on various blogs and on the microsoft site, that AFAICT I AM doing it right, I am still stumped, so I ask here:
Why does the IE conditional in this test page render the literal <![endif]--> at the bottom of the page in IE, when viewed on a local network ? I am pretty sure that is the correct syntax for an IE 'Downlevel-hidden conditional comment'.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IEconditionalSyntax_wtf.html</title>
</head>
<body>
well?<br>
<!--[if IE]>
wtf?!
<![endif]-->
</body>
</html>
Update:
to save your time reading all the comments... if you are having the same issue:
Most of the comments below basically just propose possible (but inconclusive, ineffective) explanations, and a couple guys report that they were unable to reproduce the issue. So far it seems no one knows the answer. I only see the issue when viewing the page on IE9/Win7 (w/any browser/document mode)... on my local server (page served by my local iMac 10.6.8, w/built in webserver).
But just because no one was able to rid my local server of this issue does not necessarily mean that the below suggestions will not answer the issue for you. Until we know the answer(s) I suppose it is not helpful to assume anything. So you probably do want to try everything listed below, if you also have <![endif]--> appearing on your page in IE, for seemingly no good reason.
Patrick gives a great workaround, but it does rely on jquery.
I debated whether to award the bounty (that I started, and which expired on 16 April 2012), or accept an answer, so that where acknowledgement was due it was awarded... and there was no clear action for me.. so I just decided to let the system auto-award half the bounty to Patrick for the great (albeit jquery) workaround. I did not want to give the whole bounty because the whole point of the bounty was to satisfy my curiosity as to why I am seeing the conditional comment in the first place. I also did not want to accept any answer (so far) because in this case I am not going to use any workaround since the issue only appears on my local network and so is irrelevant for the production code live to the world.
IE10 won't support conditional comments, so I suggest using a different method altogether.
Javascript works well for this.
Here is what I do that is A LOT easier to use, requires jquery
var userAgent, version;
if ($.browser.msie) {
version = "ie" + $.browser.version.substring(0, 1);
$("body").addClass("ie " + version);
} else if ($.browser.mozilla) {
$("body").addClass("mozilla");
if (navigator.userAgent.toLowerCase().indexOf('firefox') !== -1) {
userAgent = navigator.userAgent.toLowerCase();
userAgent = userAgent.substring(userAgent.indexOf('firefox/') + 8);
userAgent = userAgent.substring(userAgent.indexOf('firefox/'), userAgent.indexOf('.'));
version = "ff" + userAgent;
$("body").addClass(version);
}
} else if ($.browser.opera) {
$("body").addClass("opera");
} else if ($.browser.webkit) {
$("body").addClass("webkit");
}
Then you can write css like this:
span.something { width: 30px; }
.ie7 span.something {width: 25px;}
And, even better, use this in conjunction with modernizr and you can write rules based on feature support as well.. Note that those are global js variables, so you can even use those for different functionality based on browser. Like, if you need to write an ie7 hack or something.
EDIT: replaced code with less verbose version, same result
I'm dealing with a similar issue at work atm.
I would recommend testing it again with auto-detection of intranet off:
Plus all compatibility mode settings set to off
Plus with the addition of meta tag IE=edge
I think it may resolve the issue - IE is a strange beast!
It's because IE defaults to compatibility view when on a local network:
Many sites found on corporate intranets (read: the local network, like
http://myPortalSite) are Internet Explorer 7 capable today and expect
“IE” to act like IE7. In order to preserve compatibility with these
line-of-business websites and applications, IE8 defaults to
Compatibility View when displaying content in the ‘local intranet’
zone. An exception to this is ‘Localhost’ and the loopback address
(e.g. 127.0.0.1 + IPv6 equivalent). These addresses display in IE8
Standards Mode by default in order to meet the needs of web developers
and designers who often test pages meant for Internet consumption
(where IE8 Standards is the default) on local web servers.
Users can override the ‘local intranet’ setting by un-checking
‘Display intranet sites in Compatibility View’ at Tools ->
Compatibility View Settings.
http://blogs.msdn.com/b/ie/archive/2009/06/17/compatibility-view-and-smart-defaults.aspx
To clarify, you are seeing this because you are accessing the site using 192.168.x.x, whereas I'm willing to bet everyone else who isn't seeing this issue is using 127.0.0.1/localhost.
I've added <!--<![endif]--> instead of <![endif]--> and it disappears.
I was having a similar problem where the conditional statement was in my <head> and <![endif]--> was showing at the top of the page when I displayed it in any IE browser, even when I uploaded the code to the server.
Since it was the last line before </head> I decided to move my print css call (which I needed to do anyway) to be the last line before the </head> and "voila!" now the <![endif]--> no longer displays in IE -- even on my local server.
HTML
<span class ="clean"><!--[if lt IE]></span>
<span class="clean"><![endif]--></span>
CSS
.clean { display: none; }
the conditional comments are rendered by internet explorer alone,the internet explorer 9 and above should support most of the elements in css.the comments will work fine with all versions of IE(best to use with 5 and 6).
I had recently this same issue.
In my case the conflicting code was one of the elements that I had inside the conditional statement for IE that had the lowest z-index in the page.
After setting this in order so that it would not be the lowest z-indexed it was fixed.
I have just installed IE9 beta and on a specific site I created (HTML5) IE9 jumps to compatibility mode unless I manually tell it not to. I have tried removing several parts of the website but no change. Including removing all CSS includes. On some other website of me it goes just fine.
Also, don't set it manually because then IE9 remembers the user setting and you can't turn it back to automatic (or at least I haven't found how, not even via private browsing and emptying cache)
Anyway. The site where it jumps to compatibility mode: http://alliancesatwar.com/guide/
One where it renders correct: http://geuze.name/basement/ (I can't post more than 1 hyperlink)
Both use the same doctype and all. Those sites have a lot in common(apart from appearance) using the same basic template(encoding, meta tags, doctype and the same javascript)
It would be great if someone has an answer for me! An HTML5 website that renders in IE7-mode is pretty... lame.
Works in IE9 documentMode for me.
Without a X-UA-Compatible header/meta to set an explicit documentMode, you'll get a mode based on:
whether the user has clicked the ‘compatibility view’ button in that domain before;
perhaps also whether this has happened automatically due to some other content on the site causing IE8/9's renderer to crash and fall back to the old renderer;
whether the user has opted to put all sites in compatibility view by default;
whether IE thinks the site is on your intranet and so defaults to compatibility view;
whether the site in question is in Microsoft's own list of websites that require compatibility view.
You can change these settings from ‘Tools -> Compatibility view settings’ from the IE menu. Of course that menu is now sneakily hidden, so you won't see it until you press Alt.
As a site author, if you're confident that your site complies to standards (renders well in other browsers, and uses feature-sniffing to decide what browser workarounds to use), I suggest using:
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
or the HTTP header:
X-UA-Compatible: IE=Edge
to get the latest renderer whatever IE version is in use.
I put
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
first thing after
<head>
(I read it somewhere, I can't recall)
I could not believe it did work!!
To force IE to render in IE9 standards mode you should use
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Some conditions may cause IE9 to jump down into the compatibility modes. By default this can occur on intranet sites.
I've posted this comment on a seperate StackOverflow thread, but thought it was worth repeating here:
For our in-house ASP.Net app, adding the "X-UA-Compatible" tag on the web page, in the web.config or in the code-behind made absolutely no difference.
The only thing that worked for us was to manually turn off this setting in IE8:
(Sigh.)
This problem only seems to happen with IE8 & IE9 on intranet sites. External websites will work fine and use the correct version of IE8/9, but for internal websites, IE9 suddenly decides it's actually IE7, and doesn't have any HTML 5 support.
No, I don't quite understand this logic either.
My reluctant solution has been to test whether the browser has HTML 5 support (by creating a canvas, and testing if it's valid), and displaying this message to the user if it's not valid:
It's not particularly user-friendly, but getting the user to turn off this annoying setting
seems to be the only way to let them run in-house HTML 5 web apps properly.
Or get the users to use Chrome. ;-)
The site at http://www.HTML-5.com/index.html does have the X-UA-Compatible meta tag but still goes into Compatibility View as indicated by the "torn page" icon in the address bar. How do you get the menu option to force IE 9 (Final Version 9.0.8112.16421) to render a page in Standards Mode? I tried right clicking that torn page icon as well as the "Alt" key trick to display the additional menu options mentioned by Rene Geuze, but those didn't work.
As an aside on more modern websites, if you are using conditional statements on your html tag as per boilerplate, this will for some reason cause ie9 to default to compatibility mode. The fix here is to move your conditional statements off the html tag and add them to the body tag, in other words out of the head section. That way you can still use those classes in your style sheet to target older browsers.
Looks fine to me:
You're sure you didn't on the settings globally or something? This is a clean installation of the beta on Windows 7. The developer tools report that the page is defaulting to IE9 Standard Mode.
I recently had to resolve this issue and here's what I did :
First of all, this solution is around tuning Apache server.
Second main think is that there's a bug in the IE9 which means that the meta tag will not work, instead of this solution try this
find/open your httpd.conf
uncomment/or add the following line
LoadModule headers_module modules/mod_headers.so
add the following lines
<IfModule headers_module>
Header set X-UA-Compatible: IE=EmulateIE8
</IfModule>
save/restart your Apache server,
browse to your page with IE9, use tools like wireshark or fiddler or use IE developer tools to check the header is there