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.
Related
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
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 using the dropdown menu from http://www.wappler.eu/swdropdownmenu/ and it works fine in all browsers except IE.. the demo on the website works in IE, and the only thing i've changed is the styling.. mine is at http://www.futureworkinstitute.com/2010/ - at first i thought it might have been a conflict between scriptaculous/prototype/jquery, but even after removing other JS, it still doesnt work.
The problem is that you have not included a doctype on your website.
With few exceptions, the first line of every new page you create should be this, the HTML5 doctype:
<!DOCTYPE html>
Because you haven't included a doctype, your page is rendering in Quirks mode in IE8:
Quirks mode is a rendering mode used
by some web browsers for the sake of
maintaining backward compatibility
with web pages designed for older
browsers or coded without standards
conformance.
If you add in that magical doctype line, your drop down works in IE8 and IE7.
I did not notice any significant unpleasant side effects by adding in the doctype, but after adding it, you should test your entire site in every browser you care about to make sure your site still works properly.
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.
Does IE8 run in quirks mode like IE6/7?
I have a webpage that has some truly bizarre code. The content is centered with padding and negative margins.
It works correctly in IE6/7 and other browsers but in IE8 the content area is half as wide and not centered (flag for quirks mode).
The source code has three blank lines before the DOCTYPE. I know that will throw IE6 into quirks mode. Will it also affect IE8?
I don't have access to the source so I cannot remove those lines to test it.
Changing the doctype to HTML 5 should fix some problems. I had an issue with min-width in IE8 using Strict doctype.
So changed this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
To this: <!DOCTYPE html>
See here: http://davidnaylor.org/blog/2008/09/ie8-and-max-width.html
Running a few quick tests that can be found here seem to indicate that blank lines shouldn't throw IE8 into Quirks Mode (which is different to Compatability Mode that everyone seems to be confusing it with).
I wrote a breakdown on how incredibly confusing the different modes of IE8/7 here and I didn't even include Quirks Mode in the breakdown. A detailed description of Quirks mode can be found here (not for the original question, but others might find it interesting.)
Today, I changed our DOCTYPE from XHTML v1.0 (Strict) to HTML5. I read somewhere that even though the IE's don't recognize the DOCTYPE yet, they will render the page in standards-compliant mode.
When I checked in IE8, the whole page looked whack (we have quite a bit of CSS and other styling). It took a while before I realized that there wasn't anything "wrong" with the CSS, or even IE8 for that matter. However, it WAS rendering in quirks mode.
Inadvertently, I found the answer in the question posted here, specifically this comment: "The source code has three blank lines before the DOCTYPE. I know that will throw IE6 into quirks mode. Will it also affect IE8?"
I don't know about blank lines, but when I made the change, I had used a javascript comment to "hang on to" my old DOCTYPE statement (which was ABOVE the new HTML5 DOCTYPE). Once I removed those lines (which may have included a blank line or two), my sweating stopped and IE8 rendered in standards-compliant mode.
Yes it does. Internet Explorer's quirks mode is IE5.5. IE6/7/8 switch back to 5.5 when quirks mode is present. So since it was working fine in IE6/7 it's not the quirks mode. There's a "Compatibility View" button in IE8 to address this issue. It's not a good solution to me though. You'll have to check your CSS code.
IE8 has a compatibility mode which should treat the page the way IE7 would. Have you tried viewing the page in compatibility mode?
Can you post a link to the page or some of the HTML itself? You could try adding the meta tag to force compatibility mode?
http://www.ditii.com/2008/08/28/ie8-standards-mode-and-ie7-compatibility-mode/
or for more info:
http://blogs.msdn.com/ie/archive/2008/08/27/introducing-compatibility-view.aspx