I am coding a site in IE 9. The layout looks perfect in IE 9 and IE 8 as well as IE 6 BUT it's completely messed up in IE 7. Also, the issue is when I press the compatibility button in IE 9 - the layout is messed up beyond comprehension..My question is - how can you make the layout ok when one presses compatibilty button in IE 9. Thank you , regards !
It is quite easy to do. Put this code directly after your opening <head> tag:
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
What this does is forces the browser to use the highest standards it has available to it.
All versions of Internet Explorer have different sets of rendering bugs, and the older the browser, the more bugs there are.
If you are developing a site so that it looks good in IE, you have most likely taken advantage of some of the rendering bugs. This means that it will look different in another version of IE, and it will look completely warped in any browser that better follows the web standards.
You should not take advantage of the rendering bugs, but instead avoid things that works differently in IE compared to other browsers. That way it's possible to build sites that both work in different IE versions and also in other browsers.
You should have another browser to test in also, like Firefox, Chrome or Opera. Also verifying the HTML and verifying the CSS are also good tools for finding problems with the code.
You should not bother about the compatibility button. That is for pages that can't cope with standards compliance mode. If your page renders correctly in standards compliance mode, then you can add the meta tag that disables the compatibility button.
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'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.
Good day! I have got a question about the Internet Explorer 9. Can anyone tell me if its document and browser mode (I mean rendering as Internet Explorer 8 and 7 when chosen) is appropriate to test HTML and CSS in different versions of the browser?
I used to use something like Multiple IE on my virtual Windows machine, but my colleague use the Internet Explorer 9 to test HTML and CSS "directly". So none of us has a sense of correctness of the chosen solution.
So, that's the question.
In my subjective experience, IE9's 8/7 "Browser Modes" have always been an accurate reflection of the actual browsers - at least for pure HTML/CSS.
However, there are subtle differences when it comes to JavaScript, see the "Differences between IE8 Compatibility View and IE7" section here:
http://blogs.msdn.com/b/ie/archive/2009/03/12/site-compatibility-and-ie8.aspx
I usually test with IE9's older "Browser Modes", but if I'm feeling paranoid or I want to be absolutely sure, I use my virtual machines.
IMHO the answer to your question is yes - go with the browser modes.
Here is a good article for you
http://blogs.msdn.com/b/ie/archive/2010/10/19/testing-sites-with-browser-mode-vs-doc-mode.aspx
Few differences that I have seen in IE9 Doc Mode vs real IE8 or IE7:
1) If a PNG image is given opacity (via Proprietary CSS filter), 'Real IE8/IE7' shows black linings.
2) JavaScript performance in 'Real IE8/IE7' is obviously not as fast as IE9.
3) Fonts also tend to have some display issue in various modes: http://blog.typekit.com/2013/03/14/the-dangers-of-cross-browser-testing-with-ie9s-browser-modes/ and font smoothing is an issue in windows XP.
4) Embedded YouTube videos have z-index issues overlapping other elements (fixed by wmode).
5) Proprietary CSS filters work properly in 'Real IE8' but are not shown if applied to an HTML5 element in IE9 doc mode. (Faced this once)
Summary: If the site you are making is JavaScript intense or the client is very much concerned about users on IE7/8, have a check on Real IE 7/8 and get the issues ironed out.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
This is a very cool piece of code that forces Chromeframe or latest rendering engine. It can even be sent throught the http headers if you want the html to validate. But with this comes a doubt for me. I use IE8 in compatibility mode to test my websites for IE7 (either clicking the "sheet-of-paper" icon next to the URL box, or by activating "browsing mode" in developer tools). So my question is:
Does compatibility mode still renders webpages as IE7, or does the X-UA instruction blocks my intention?
Im worrying that I think ive checked my pages in IE7 and it turns out what im seeing it's not really what a native IE7 would show....
Thanks for your comments.
Anything you do in developer tools overrides the headers and meta tags. Here's a flowchart which explains it all:
If IE7 compatibility is really important to you, don't use IE7 mode in IE8/9/10 to test it. Use a virtual machine with a native IE7. IE7 mode in IE8/9/10 doesn't behaves exactly the same as a native IE7. What you worry about is true even if Chrome frame isn't installed.
I'm making a site for European client and he said Firefox 3 and IE 7 and 8 has more user than others browser for desktop in Europe http://gs.statcounter.com/#browser_version-eu-monthly-200812-201001-bar
I've only IE 7 and Firefox 3.5.7 installed in my PC.
Should I download portable Firefox 3.0 and test in it too even if I'm not using any new css property/selector which only has support in Firefox 3.5 or testing in 3.5.7 would be enough?
And for IE testing in IE 7 would be enough or should i check my site in IE8 (downloading VPC image of IE8 and testing in VM) even if I'm not using any new css property/selector which only has support in IE8?
Or is it necessary to use <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> in <head> ?
But what will happen when user will switch compatibility mode to IE 8 default rendering mode?
Can we make site compatible in IE 7 and 8 both without using <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />? If yes, then what special we need to do.care/consider in css to make site identical in both?
It's worth testing the site in all browser to ensure that it is working correctly. Another way to test is to use the browser sandbox here: http://spoon.net/browsers/
IE8 is alot more standards compliant then previous versions of IE so if you are designing for FF 3.5 then you shouldn't have too many problems with IE8. It's worth using conditional comments as Dough mentioned to target IE7 or IE6 - http://www.quirksmode.org/css/condcom.html
Consider using this website checklist - http://www.xs4all.nl/~sbpoley/webmatters/checklist.html as once you have validated your html and css and gone through most of the other points then you will be well on your way to having the site display properly across all browsers
You don't necessarily need to download all the copies, but yes, there is a larger possibility of a difference between IE7 and IE8, though they should be minimized if not eliminated by your meta tag. I highly recommend you don't use that meta tag and just check for differences that might be able to be easily fixed. Since IE8 has come out, I have never had to use the meta tag to fix any problems or differences. I still use IE conditional comments to add rules for fixing differences in IE6 + IE7.
There is much less of a concern between Firefox 3 and 3.5 if you are not using CSS3 or -moz specific selectors.
Either download IETester (IE only) or used Adobe Browser Labs (both) to check IE8 and Firefox 3 as a precaution before launch.
I do dev testing using IEtester, been using it for about a year and it's been 100% correct in rendering CSS when compared to the stand alone versions of IE6,7,8. It's also very good for tweaking CSS and quickly seeing the impact.
From a general perspective I normally have alot more issues between IE6 and other browsers, while IE7 and IE8 are very similar in most regards.