I'm working on website that is quirks mode and can't use <!DOCTYPE html>.
In my project CSS3 translate image doesn't work in IE10 and 11 but it does work in IE9 for the reasons mentioned above.
Is there a solution to this problem except add <!DOCTYPE html>?
Just to be clear: The whole point of quirks mode is to emulate the way IE5 worked.
This includes disabling most of the HTML, CSS and JavaScript features that have been added to the browser since then.
If you are in quirks mode then you do not have those features. There is no work around or solution to this; that is how it is, and that's how quirks mode is intended to work.
If you have to use quirks mode then you also have to accept that your browser's capabilities will be from the 1990's.
Your only options are to work out how to upgrade your software so you can use it in a more modern browser environment, or else ditch the idea of using modern CSS and use whatever techniques where available back in the '90s. Probably a custom ActiveX control or a Flash animation. Pretty ugly, whichever option you go for.
I will also add the obvious point you really need to start thinking about how you're going to upgrade away from quirks mode. The default browser (Edge) that comes with Windows 10 doesn't support quirks mode at all. There will come a point in time when you simply can't avoid upgrading your desktop computers, and at that point, you may find that you simply won't be able to run your quirks mode site. It will be a lot easier if you start working toward dealing with that now than if you leave it and find it hits you in the face later on.
Related
I have an intranet site built using ASP.NET that when rendered always displays in standards mode. When using the Developer Toolbar, my site works perfectly using 'IE8 - Quirks Mode'. When using Standards mode it does not appear properly.
I have seen a dozen posts about setting the app into Standards mode (like this one: Override intranet compatibility mode IE8) but these techniques make the browser go to Standards mode.
Does that mean Quirks is the default? If that's the case, my site is not rendering by default in Quirks but rather in Standards.
I also tried this as well and it to makes it in Standards mode:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
What meta tag can I assign or other technice to ensure my site is always rendered in IE 8 - Quirks Mode?
content="IE=8" will make it use IE 8 Standards. To use quirks as far as I'm aware change the doctype as such:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">"
Or leave it out entirely
Firstly, the best thing you can do is try to drop the requirement for Quirks mode. It doesn't just change the page layout, it also switches off all of the modern browser features.
This will give you problems if you want to use any of these modern features. (note that quirks mode is an IE5-compatibility mode, so "modern features" means pretty much anything invented since IE5!). For this reason, I strongly recommend if at all possible that you consider switching the site so it works in Standards mode.
The main reason for using standards mode is to future-proof your code. IE's bad reputation is due to old versions and features like quirks mode, and in recent versions of IE, Microsoft are trying to move away from the past. I would not be surprised to see quirks mode disappear from the browser at some point in the future.
In addition, using standards mode will allow your site to work properly in all other browsers. In Quirks mode, your site will only ever work properly in IE.
The good news is that switching a site from quirks mode to standards mode is often a lot less work than it sounds. The main thing you need to know about is a CSS feature box-sixing. This allows you to use the quirks mode layout model while still keeping the site in standards mode.
Add the following to your CSS:
* {box-sizing:border-box;}
This shuold hopefully fix the majority of the layout issues that you're getting switching from quirks mode to standards mode, and should allow you to stay in standards mode.
The remainder of the layout issues are likely to be caused by bugs in IE5 that have been fixed in subsequent IE versions but left in quirks mode for compatibility reasons. You will probably need to fix these manually. But hopefully there won't be too many of them.
Okay, so if you're still reading, I'm going to assume that the above isn't good enough for you, and you really do want to stick to quirks mode.
Putting a site in quirks mode is fairly easy in IE: Just drop the DOCTYPE declaration.
When IE sees a site that doesn't have a doctype, it automatically assumes that it should render it in quirks mode.
As I say, I strongly recommend not doing this, but if you absolutely have to, that's how to do it.
I am having quite a horrible time. We have a massive site that has no <DOCTYPE> and when I run it with IE10 it goes into quirks mode and after some CSS changes looks ok. As soon as I add echo "<!DOCTYPE HTML>";
The complete site looks terrible and the CSS is not looking as it suppose to. It turns the browser mode to IE10 and docmode to standard. Is there a way to keep HTML 5 functionality but use IE5 Quirks mode or just Quirks mode so the CSS will look correct?
No. The whole point of quirks mode is that it's a compatibility mode for IE5. This means that in addition to changing the layout mode, it also switches off most of the browser features that have been invented since IE5.
Therefore the blunt answer is no, you cannot mix Quirks mode and HTML5. It just can't happen.
However there is some good news for you: switching from quirks mode to standards mode is actually easier than it looks at first glance.
You don't have to go through your whole site changing all the CSS to suit the different box model, because standards mode does have a CSS feature that allows you to use the quirks mode box model while still remaining in standards mode.
Simply add the following to the top of your CSS code:
* {box-sizing:border-box;}
This will change all your elements to use the quirks mode box model, but your page will still be in standards mode.
This should sort out most (if not all) of the layout issues you've been having.
Hope that helps.
No, there isn't. The modern engine that includes the new features and the engine for emulating ancient, buggier browsers are separate entities and you can't mix and match parts of them.
As far as browsers other than IE are considered, you can add tags and attributes introduced in HTML5, without using any <!DOCTYPE>. The page will not conform to HTML5 then, but this is just a formality as such. Browsers do what they do, interpreting tags and attributes as they have been programmed to. There is no “HTML5 mode” in browsers that you would need to trigger with a <!DOCTYPE> or otherwise. Just try it. Throw in some HTML5 novelties like <input type=email> or <details>, and you will see that they work if the browser supports them in the first place, no matter whether there is a <!DOCTYPE> or not.
You would then have difficulties when using a markup validator, but that’s a different issue.
Quirks Mode is a real mess, with dozens of undocumented and poorly documented phenomena. If a page works in Quirks Mode and you then make browsers render it in Standards Mode, literally anything may happen, ranging from no effect to total disaster. So such a change is usually pointlessly risky. Keep using Quirks Mode for old pages developed to use it, and create new pages to work in Standards Mode (and possibly to be HTML5 conformant).
Quirks Mode affects styling and to some extent scripting. It marginally affects the interpretation of some old HTML attributes. But in most browsers, not the way new HTML5 features work.
However, IE is particularly quirky. On IE 10, the above seems to apply. On IE 11 Preview, deviations have been reported. And on IE 9, some of HTML5 novelties that it would otherwise support are not supported in Quirks Mode, such as the canvas element. So if you intend to add substantial use of new HTML5 features to an old page that now works in Quirks Mode, you may need to consider changing the page to Standards Mode first. Depending on the impact of Quirks features, this might be best done by rewriting the page, or it might be “only” a matter of redesigning the use of CSS to conform to CSS specifications.
[Answer corrected Oct 15, 2013.]
I am working on a WebKit based browser, but things don't render properly on a IE - only site. Does anyone know of a stylesheet I can inject into these pages to make WebKit render like IE6? Kind of like an anti ie7-js.
I know the proper solution is to make the site standards compliant, but it's not under my control.
Thanks
A good start would be to implement IE's Quirks Mode if no !DOCTYPE is specified. Aside from that you can also support the X-UA-Compatible header to see if the site is designed for a particular version of IE.
Aside from that, there isn't much you can do. It's up to the website owners to decide "hey, we actually want users to be able to use our site" and actually make it standards-compliant.
There are three main things that make IE6 render so differently:
Bugs
Missing features
Quirks mode
You will never be able to (nor should you want to) try to replicate IE6's bugs in newer browsers. IE6's bugs are legendary. You probably have hacks and work-arounds to deal with them anyway, but be glad that you're moving on and away from them.
IE's missing features shouldn't be a problem for you, because your code just won't be using them. Nothing to worry about. Obviously, it would be a problem the other way if you'd written a site for a newer browser, but not for you.
The main point of those three you want to worry about is the third one: Quirks mode is the one that really mangles page rendering in older versions of IE compared with other browsers.
The correct solution to this is to use a valid <!DOCTYPE> at the top of your page. IE will go into standards mode, and will render the same as all other browsers. If your page is designed for quirks mode, then you may have to fix it, but this is probably the right thing to do anyway, and at least the rendering mode will then be consistent between all browsers.
A good doctype to use is !<DOCTYPE html>.
If you don't specify a doctype, then you will have a lot of compatibility problems going forward.
There is one quick way out: There's a CSS feature called box-sizing: border-box. If you set this CSS property in your site, then Webkit and other browsers will switch to rendering the boxes the same as IE's quirks mode.
This sounds like an ideal solution and a direct answer to your question, so what's the catch? As always, the catch is IE. Trying to use box-sizing CSS without fixing the <!DOCTYPE> issue will still leave you with areas of incompatibility, and if you do fix the <!DOCTYPE>, then IE6 won't render in quirks mode at all. It ought to be the solution, but in fact, box-sizing will still leave you with problems to fix.
So I'll say again that the correct solution is to add a <!DOCTYPE>, fix your site and move forward, not try to pull other browsers backward.
Similar to disabling JavaScript in browsers, is there a way to disable support for various CSS3 properties in Firefox or Chrome to quickly confirm a page is rendering OK if support for certain properties isn't there? I know it's only a presentation layer, but I'm just hoping there's a more efficient way to test against this without using old browsers, especially if Modernizr is being utilised.
A project called deCSS3 manages to disable a large majority of CSS3 properties through the use of a bookmarklet that overrides and neutralises their usage with !important rules.
A recent addition to the project is "Modernizr class toggling" for an added level of testing when Modernizr is utilised.
Even if there were a way to do so, would it help? Each browser has its own quirks, so there is no guarantee that e.g.:
Firefox - CSS3 = Older Browser
CSS3 isn't a set of additions to CSS2, it replaces CSS2. The backgrounds and borders module in CSS3 includes border and background as well as border-radius and box-shadow. If you 'turn off' CSS3 you turn off all CSS, and even if you could disable the new stuff Tom's answer is correct - that wouldn't leave you testing anything that actually exists in the real world.
If you need a way to "turn off CSS3" then I don't think you're thinking about/implementing progressive enhancement/graceful degradation properly. You should be starting with non-CSS3 stuff, then enhancing your site with it. When you build the non-CSS3 foundation and test it in your target browsers, then adding CSS3 shouldn't change anything (browsers ignore styles they don't recognize). If you sandbox your CSS3 in its own stylesheet, then you can tell old versions of IE to completely ignore it (or, if you're using stuff that's only partially supported in IE9, can tell all versions of IE to ignore it) to save a download.
That said, CSS is handled by the core rendering engine, so in order to view a page without CSS3, you have to view it in a browser that doesn't support CSS3. It sucks, it means you have to have several browsers, and even virtual machines (or physical machines) to test very well, but such is the state of web development, unfortunately. Theoretically, you should be testing in several browsers, anyway, and already know that IE6-8 have their own quirks that don't even relate to CSS3, and should already be set up to test them (so, therefore, if you need to test old versions of other browsers, you can install them in your IE test environment).
There's a useful add-on for Firefox called "User Agent Switcher" which allows you to bump your browser rendering down to an older version of IE (the iPhone rendering is also pretty useful). That should help you double check.
Firefox's Latest version
IE7
IE6
IE 8
Which browser we should use to see HTML css rendering for always and why?
Edit:
My question is not on which browsers should i test site before go live. i will try to test on all possible.
My question is which browser should i choose during layout development process and why?
because while development it's not possible to see every step in all browser it will waste time. after making a layout we can test in all but during development one browser would be better.
Uhh... every one of them?
I personally develop with Firefox 3.6 for convenience and the availability of Firebug, header sniffers and other tools. I try to test in all the browsers you mention before anything goes out for anybody to see (a client for example). But I don't think there is a real "best" choice here because in the end, you will need to test for every browser you need to support anyway.
Use the most up-to-date css compliant browser with a good debugging tool e.g. Firefox 3.6 and the Firebug plug-in.
Then check in the other browsers you want to support for your users and backwards correct any errors.
Do not attempt to make the site look EXACTLY the same in all browsers, you will be wasting your time.
As long as the effect is similar in older/other browsers (for example you could use border-radius for Firefox/WebKit browsers and this will degrade nicely for browsers that don't support border-radius) and the site is usable and fulfills it's purpose, then your ok
DONT WASTE TONS OF TIME ON IE6. Use a conditional commented stylesheet and just get it usable...
In the head of the document
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="IE6.css"/>
<![endif]-->
It all depends on your target user group.
If you're working for customer that uses IE6, you will have to test for it. Sad, I know.
If you're designing a site for general public, then test for current versions of major browsers. Firefox, IE, Opera, Safari and Chrome(?).
Also: develop according to standards then fix whatever does not work in one browser or another. Not that you develop for IE, then trying to fix everything that suddenly falls apart on all other browsers.
During developing NOT testing I use this combo :
firefox
firebug extension
webdeveloper extension
live http headers extension
Give it a try, you won't regret it, you can make changes to your css IN BROWSER and then change your code (No more refresh needed for that one annoying one pixel offset), check to see where is the fault interface or code logic and plenty more.(Page Speed & YSlow to analize your page speed etc.)
I whole-heartedly agree with Pekka.
I develop everything within Firefox and use the excellent addons available during development (Firebug / Web Developer Toolbar / etc).
A suggestion would be to test often in other browsers as well....I would recommend every time you go to take a little break check it out in the other browsers to see if there are any issues, and then make a note to fix them and allow your website to be rendered properly in all browsers.
You really don't want to exclude any user based on his/her browser preference, so make sure
it works across the board!
edit
Also a good point from one of the other users...IE6 is in the process of being phased out, however if you are looking to have any users in a corporate environment you don't want to exclude testing this either!
You need to test your css in all the major browsers, that includes IE (6, 7 and 8), Firefox, Chrome and even Safari and Opera.
You can probably get away with just using the latest versions of Firefox, Chrome etc. as they auto-update and so users are less likely to be using older version (though it's not unknown).
IE is a problem because so many users - particularly corporate users - are running older versions.
Choose one, it doesn't really matter which as long as it has good development tool support, to develop in and get the site looking good in that. Then test in the others. Which order you do this and how much effort you want to expend will depend totally on your target audience. From my experience Firefox with Firebug and even (dare I say it) IE8 with it's built in developer tools are good choices. The advantage here is that you'll cover the majority of users with these. However as the browser market is getting more fragmented you will need to test in others.
This is an interesting question, I'm going to assume that you have a process that means that first you develop your page and then you do cross browser testing to make sure it works everywhere - so the question then becomes which one is going to get you to the best starting point for getting to working "everywhere" (definition of which will depend somewhat on your target audience).
This used to be easy - according to my (then) staff Firefox had good standards support and the best tools - so get it right in firefox first then adapt to cope with everything else, now its a lot less clear as IE8 has a very decent set of dev tools (and is better behaved than its predecessors) and Chrome is now getting into the act - again with a good set of tools and extensions.
My gut feeling is probably Firefox, Chrome, IE8 in that order - but I'm not doing anywhere near enough CSS work to assert that that's right.
You develop in Firefox (you have firebug to adjust things), you test in safari/chrome & opera (all of them is ok with standards so you have low chances to have bugs in those) and you debug in IE. Because is impossible to have a fully functional in ALL browser from one try :D
I use my main browser (Chrome) for basic progress, and frequently check all other browsers for bugs and layout problems.
I think If we choose firefox and IE 6.0 both for website design, the site will be look almost same for all browsers, because rest of IE 6 & 7 all browsers' HTML rendering pattern is almost same. So If we make css from start considering firefox and IE 6.0, bugs would be in less numbers and In this way we can make all browser compatible website.
Please give me feedback
I do it in ie6, the most primitive browser which is still in use.
I think any thing that will work on ie6 will work on any browser.