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
Related
I've created a form that is dynamically created with JavaScript and is added in another website using the <script> tag.
The doctype used by this other website is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> which uses the quirks mode.
I've built my form by taking this in consideration and everything is working as expected in Chrome, Firefox and IE 10. However, when I test it in IE 9 and earlier, the form is not displayed at all. When I open the developper tools, I can see that IE 10 uses the new quirks mode but IE 9 and earlier uses the IE5 Quirks mode.
I was wondering if the new quirks mode can be used to display this page when using IE 9 and earlier. If this is not possible, I would like to force standard mode but only when using IE 9 or earlier and keep using quirks for every other browser.
I can't use the html5 doctype since their website is built with quirks mode instead of standards and their design is all broken when I use this doctype.
You cannot change the mode once the page is loaded. And you cannot change it programmatically. The only way to force a page into quirks mode is to load it without a valid doctype or with serious bugs in the HTML.
If you have a doctype, but your page is still loading in quirks mode, then it means that you have serious bugs in your HTML. This will give you bigger problems than just being in quirks mode. You should definitely fix those bugs. If you really want to be in quirks mode, drop the doctype, but you should really try not to have HTML code that is so bad it triggers quirks mode even with a doctype!
You can validate your HTML to find those bugs by using the W3C validator.
In terms of switching your page at runtime between IE10's two different quirks modes, the simple answer is that you can't do that.
Sorry about that.
However, to be honest, it's probably for the best. Using quirks mode is be a complete disaster anyway. It doesn't just change the layout mode; it also switches off most of the browser's features (ie pretty much everything invented since 1998).
But now for the good news:
Luckily, switching away from Quirks mode is a lot easier than you think.
The main layout issue (the different box model) can be fixed by adding the following to the top of your CSS:
*{box-sizing:border-box;}
This is the standards-compliant way to set the box model to the quirks-mode style layout. Most of the broken layout problems cause by switching from quirks mode to standards mode can be resolved with this simple CSS style.
There are other quirks, but they're relatively minor and shouldn't be too hard to deal with once you've fixed the main issue. A lot of them are actually not quirks mode issues, but bugs in older IE versions that the original coder may have had to hack his way around. There's no guarantee that these will continue working the same in future versions anyway, even if you do stick to quirks mode, so you would be best off fixing them now anyway.
So, to summarise:
Fix your page so it loads in standards mode. Valid doctype and valid HTML.
Use box-sizing to mitigate the main layout gremlins caused by the switch.
Fix the remaining layout issues manually.
It's really a lot less work than it sounds. Honest.
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.
Is there a way to trigger standards mode in IE7 when using the HTML5 doctype?
My document starts like this:
<!DOCTYPE html>
<html>
<head>
...
F12 opens Developer Tools in IE 9. Alt+7, Alt+8, & Alt 9 will allow you to toggle between browser versions. There are also menus that allow you to change both document and standards modes.
A couple things:
If you are trying to view the DOM tree using the developer tools and switching between different versions in compatibility mode, you should know that you need to refresh each time you switch modes. Otherwise you won't be able to see the tree.
Also, these emulations are not exactly like the original browsers. It really is impossible to see "the way another browser would render" a page unless you are on that other browser.
I recommend using browsershots.org. It's free, and requires no download. If you want to get really sophisticated, there are other options. However I recommend browsershots. Just beware that it takes a few minutes to get a couple images back, and there is a maximum limit per day. You can raise that a bit by registering your account.
Use <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> in the head section.
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).
I'm working with a Web Application and it's currently rendering in Quirks Mode. My feeling is that we should change this to use Standards Mode.
If were make this change there will be some pain in the short term as I would expect some of the pages that currently render fine in Quirks mode will need tweaking to show properly in Standards mode. If I'm going to do persuade other people this work there will need to be some benefits too.
Whilst easier page layout would be nice I'm not sure it would be enough on its own - as most the design for the app is done - so I was wondering if Standards mode offers any other more immediate benefits. Do pages render quicker? Will the browser use less memory? Anything else?
For what it's worth this application is used almost exclusively on IE6/7/8 but I'd be interested to hear how this applies to other browsers too.
Here are the benefits to standards mode:
1) Correct and accurate code is easier to maintain among a group of developers.
2) Standards mode produces a more reliable rendering of the content, which is important for cross user-agent compliance with regard to assistive technologies.
3) Code that is uniform and valid is easier for accessibility concerns.
4) Your code will have a far longer lifespan without conflict to future changes in the specification.
To add to austin's comment, there's a pretty good read over here about the differing modes: CSS - Quirks mode and strict mode
Yes, some of your markup will probably no longer be valid once you transition to standards mode. Developing under quirks mode targets older browsers that were programmed before CSS was accepted by Netscape and IE.
Since most browsers today are capable of rendering the W3C standards, I'd recommend targeting that as your goto mode. Sure it will be slightly painful now, but in the long run it is well worth it.
I don't know about your user base, but allowing the use of non-IE browsers - that count for over 35% of the global market - will surely please some of your customers. Using quirks mode almost forces your users to stick to IE.
At some point (probably in the distant future, though) IE will drop quirks mode, then you'll have to recode anyway. Better to do it now before your code grows beyond repair. Switching to a strict doctype now will save you development time as soon as you fix the initial problems.
I'd suggest trying the strict doctype and seeing what happens, and how broken the design is. Remember, the HTML doesn't have to be valid for strict mode to work. Font tags and alignment elements/attributes work fine in strict mode, though you should gradually phase them out and replace with CSS.