Difference between IE Standard, Compatible & Quirks - html

I have gone throught many Solutions in stackoverflow but was not able to get. please anyone explain me in simple words
1) what is basic difference between IE Standard, Compatible, Quirks mode and how does it matters?
2) I want to force Webpage to load in IE7 in IE9 Browser ... is my below code correct?
<meta http-equiv="X-UA-Compatible" content="IE=IE7" />
IE=IE7 > Standard Mode
IE=EmulateIE7 > Compatible Mode
how to run in Quirks Mode
3) Is this modes applicable to browsers other IE?
4) What is default mode of Browser and how do i determine it?

First, you really don't want to be doing this - preferably run IE9 as IE9, even better, use IE 10/11, even better use Chrome, MS Edge etc.
But, assuming you are forced into it, your Meta tag should say content="IE=7"
This should force IE7 Standards mode and at least make everything consistent between IE7 and IE9 (well, it should, but there may still be anomalies). If there are you may need to detect IE9 and use EmulateIE7, but, again, this may cause more problems than it solves.
And, these modes only apply to IE - all other browsers ignore them.
And, you really don't want me to explain the difference between Standard, Compatible, and Quirks mode, partly because it would take 57 hours and partly because I've forgotten.
Good luck ...

Related

Change IE9 Document Mode to IE9 Standards

How can I force my IE9 to have the Document Mode of IE9 Standards?
Now, I have this meta content, but it seems it's not working.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
Also, how can I know if my Document Mode already changed?
Thank you very much.
You state that the browser is defaulting to Quirks mode.
The correct solution to getting out of Quirks mode is to use a DOCTYPE.
Make sure that your HTML code starts with the following line:
<!DOCTYPE html>
This should be the first line of code, above the <html> tag.
The X-UA-Compatible flag is good thing to have, but isn't relevant to your problem in this case. It tells IE to switch between various compatibility modes, but Quirks mode is a whole separate thing, and is controlled by the existence or not of the doctype.
You should keep the X-UA-Compatible flag, although as I said in the comments, you would be better to set it to IE=edge rather than IE=9, otherwise you're going to have problems with IE10 and later.
Hope that helps.
[EDIT]
We have now established that the OP's site is running in a frame, inside another site that is in quirks mode.
This is a big problem because IE will render all frames in the same mode, so if the parent site is stuck in quirks mode then his site will also be stuck in quirks mode.
There is pretty much nothing that can be done about this, other than converting one or other site to be in the same mode as the other.
Converting the new code to run in quirks mode might be possible, but is very risky; I would strongly recommend against it. In any case, I would need to spend time studying the whole of your source code before I'd even be able to say whether it's possible or not, let alone how much work it is.
Converting the old code to run in standards mode is likely to be more achieveable. Again, it depends on how large the code base is, but the main point is that you don't need to worry about the conversion breaking due to unsupported features, because the site is already running in an old mode; moving to the newer mode might require some changes, but at least you can be fairly sure from the start that it is possible.
The only other option you have is to change your site so that instead of being in a frame, it pops out into its own separate window (or tab). This way, it can stay in standards mode and the old site can stay in quirks mode. This is the only option you have that doesn't involve a lot of work.
I guess the ultimate message from all of this is that quirks mode is a terrible thing. The world would be a much better place if all those old corporate systems out there running in quirks mode would be upgraded to use standards mode. It really is a lot less effort than people think, and will prevent nasty situations like this one.
use content="IE=edge" instead of IE=9 this will force your IE browser to stick to latest available

Messed layout only in IE 7

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.

is quirks mode legit?

I was on vacation without access to my good friend Internet Explorer, and I threw together a pretty complete web app. When I got home, I was surprised and encouraged to see that my site was working in IE... until I threw in any sort of valid doctype. I know it isn't best practice to throw browsers into quirks mode, or it wouldn't be called quirks mode, but I guess my question is... what are the practical ramifications of having a 'quirks mode' site? Is it necessary or even worth it to painstakingly slave away to correct the issues of which I am yet unaware, or can I leave it as is, functioning cross browser? Thanks.
If your site renders wrong in standards mode, but correct in quirks mode, chances are it's errornous. Some current browsers may fix your mistakes even in standard mode, but you have no idea about what future browsers will do with it. With standards mode, you can be absolutely sure that a valid site that looks fine in modern browsers will show up correctly.
Browsers are more interoperable, i.e., have the same behavior as each other, in the no-quirks mode compared to the quirks mode. The no-quirks mode is what most Web standards people and browser developers care about and consider and test. So it's more likely that you run into differences between browsers in quirks mode.
For example, in quirks mode, the body fills the viewport in WebKit/Blink, but does not in Gecko (I'm not sure about Edge). In no-quirks mode, body height works the same in all browsers.
(There's one counter-example, though, where browsers agree in quirks mode but not in no-quirks mode: body being the "viewport scrolling element" for scrollTop etc.)
Some versions of IE (8 and 9?) deliberately had less features in their quirks modes (e.g. the canvas element). So if you care about IE and want to be able to use the features IE actually supports, just not in quirks mode, then that would be another reason to not use quirks mode.
Finally, and maybe obviously, you're likely to run into more "weird" behavior that is the quirks themselves, like color and some other stuff not inheriting into table elements, that top and bottom margins collapse more, IDs and classes being case-insensitive, and so on.
Declaring a proper doctype is technically required for HTML validation by W3; however, lots of people leave their code un-doctyped for browsers to use Quirks mode instead. I've done this many times and it usually works out fine; however, you run the risk of browsers not interpreting your code correctly.
In other words, the cross-browser functionality you speak of could very easily break down into cross-browser hell without valid doctype declarations.
A.k.a., it's up to you as to how robust your site needs to be.
Quirks mode typically is the browsers attempt at fixing your errors in order to render correctly, however it's important to remember that if your site renders in standards compliant mode it will likely render ok with future browsers (at least for the time being).

Site not displaying correctly in IE

Can somebody explain me why my site is not displaying correctly in internet explorer:
http://shortener3.info/web/
The choice of Doctype (Transitional with no URL) triggers Quirks mode, which causes browsers to emulate bugs that appeared in earlier browsers in order to cope with legacy code.
IE emulates a lot of features of IE 5.5, which was very very broken.
Use a Doctype that triggers Standards (AKA Strict) mode.
That might not solve all the problems, but it should be the first step in trying to resolve them.

Should I use almost standards mode for all browsers?

I am working on a project which requires IE6 compatibility. Unfortunately, IE6 and IE7 do not support standards mode. Because of this, I am tempted target almost standards in for all browsers and just ignore standards mode completely, so that I am only targeting browsers running in the same standards mode. I figure that because XHTML transitional is so popular, almost standards most is guaranteed to be supported for a long time to come. Is this a good idea?
No, this is not a good idea.
Its not a good idea because eventually IE6 will be obsolete (sooner rather than later) and you will have a messed up site where you have to jump through hoops to get it to look halfway decent.
A better solution is to use progressive enhancement, in a nutshell support the minimum you need for IE6 and give the modern standards following browsers the goodies.
With progressive enhancement you still get your support for IE6 but you're left with a standards based website that is easier to maintain and develop further.
Using "almost standards" mode is dumbing down other browsers for the sake of IE. IE6/7 doesn't support a standards mode because it's incompetent. You should never write markup aiming at incompetence. Write modern markup with a strict doctype and use "conditional comments" to hack and beat IE into the best compliance you can get out of that thing or you will be doomed to a world of darkness and hurt.
Roughly 40% of the user base of my company's software uses IE6 (down from ~60% a couple years ago).
Our master pages have the XHTML 1.1 doctype set. I do all my design work using the latest version of Firefox and then once I have it all working how I want, I test in IE6 using the App Compatibility VMs for Virtual PC that MS releases, and make any necessary changes to my CSS that IE6 requires.
Most of the time I can just use slightly different CSS and don't have to resort to hacks, although sometimes I still do. But the hacks don't affect other browsers, since they're IE6 specific. I haven't gone to the length of using browser-specific CSS files yet, cause the extent of my IE6 hacks are something on the order of 10 lines out of ~1500 lines of CSS. My modified CSS to "support" IE6 still renders fully standards-compliant in Firefox.
EDIT: thanks to Rob's comment I'll be changing my doctype to "HTML 4.01 Strict with system identifier" (provided testing shows that it doesn't break anything). That Quirks Mode chart on Wikipedia shows my current doctype (XHTML 1.1 with system identifier and without XML declaration) results in the same render modes.
Everything I said above still applies, though. I code for standards-compliance in the latest version of Firefox (the Web Developer add-on is my friend) and then "make IE work" without breaking standards-compliance in Firefox.