I am using HTML5-Reset in my pages in a ColdFusion application. The head tag looks like this:
<head id="swipeapp" data-template-set="html5-reset">
There is also a <cfform> in the page. Browsers ignore data-template-set and id and print the content on the browser itself. I figured out that this is because of <cfforms> and found that adding <cfcontent type="text/html; charset=utf-8"> solves this problem.
With that change, the page works on Chrome and Firefox, but the html5-reset also gets removed. The alignment and styles go for a toss in IE 7 and 8.
Is there any work around to keep the html5-reset and use cfforms?
Related
My webpage is developed in HTML5, CSS, Bootstrap and JavaScript. Now I need to view my webpage in some embedded browser like embedded IE and Mozilla. The problem is my webpage is not loading properly. Do I need to include any HTML tags in order to make my webpage compatible with embedded browsers? Help me out.
I suggest you should post any sample code to reproduce the issue. It can give an exact idea about the issue.
I assume that you are using the IE 11 browser and bootstrap 4. I suggest you add the below meta tag in the head section of the web page.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
If <!DOCTYPE HTML> is not added in the page then try to add it at the top of the page.
If you are using the older version of the IE browser then you can refer to the information below.
If the issue still persists and something specific is not working then I suggest you add a sample code here and provide the detailed information about it. We will try to provide further suggestions.
Some of my CSS wont work in IE8 but will work in chrome,firefox,IE11.
I first made the website on chrome and then realized it didnt work in ie11 so I put code into the html like the code below...
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
After putting this, my website works on ie11. Later to find out, that it does not work on ie8.
I am making this website for my company and all around the company ALL the staff use different browsers, so I need to make sure it works on all.
Do I have any hope? or do I have to give up on this one? I have researched all over google about everyone different code inserts they put in for it to work on ie8 but it doesnt work.
In my CSS im using stuff such as border-radius and box-shadow and many many more.
Is there an alternative... to say, "if you are using ie8 to display this website, display this piece of code differently to suit the browser."
Thanks
What you are basically looking for is "graceful degradation". Check out some articles about that here:
https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement
http://searchnetworking.techtarget.com/definition/graceful-degradation
In any case, keep in mind that making a modern page work on IE8 is a tedious task, and most likely unnecessary. The global market share for IE8 is currently around 1%, so you really have to consider if you do that extra work.
I have two questions:
How can I force IE10 to render in IE9 document mode? Currently it's rendering my page in Standard document mode.
In IE10's developer toolbar, I am not able to see the option of document mode of IE10. Is it not implemented, or is my browser version is out of date?
Thanks for all your help.
Edit: thanks everyone for the solutions provided. Earlier I was using a meta tag
<meta http-equiv="x-ua-compatible" content="IE=edge" >
just to make sure that IE will render the page in highest document mode, but I was facing some issues with IE10 standard mode, so I changed the meta tag to render the page in IE9 mode:
<meta http-equiv="x-ua-compatible" content="IE=9" >.
You should be able to do it using the X-UA meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
However, if you find yourself having to do this, you're probably doing something wrong and should take a look at what you're doing and see if you can do it a different/better way.
Do you mean you want to tell your copy of IE 10 to render the pages it views in IE 9 mode?
Or do you mean you want your website to force IE 10 to render it in IE 9 mode?
For the former:
To force a webpage you are viewing in Internet Explorer 10 into a particular document compatibility mode, first open F12 Tools by pressing the F12 key. Then, on the Browser Mode menu, click Internet Explorer 10, and on the Document Mode menu, click Standards.
http://msdn.microsoft.com/en-gb/library/ie/hh920756(v=vs.85).aspx
For the latter, the other answers are correct, but I wouldn't advise doing that. IE 10 is more standards-compliant (i.e. more similar to other browsers) than IE 9.
You can tweak the Registry if you want to make changes only to your own system. If you have IE10 and lots of web sites you visit don't render properly in IE10, then you can tweak your registry to force IE to open in IE9 mode.
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
Create a DWORD as iexplore.exe and give value 9999. Restart your IE and it will open in IE9 mode :)
Thanks to my colleague Sreejith D :)
I haven't seen this done before, but this is how it was done for emulating IE 8/7 when using IE 9:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
If not, then try this one:
<meta http-equiv="X-UA-Compatible" content="IE=9">
Add those to your header with the other meta tags. This should force IE10 to render as IE9.
Another option you could do (assuming you are using PHP) is add this to your .htaccess file:
Header set X-UA-Compatible "IE=9"
This will perform the action universally, rather than having to worry about adding the meta tag to all of your headers.
By what this says, IE10 (the article is referred to a preview release, anyway) it's able to use X-UA-Compatible only if the document is in quirks mode (no DOCTYPE), otherwise IE10 won't react to the request.
Here's an excerpt:
Thus, to make IE10 react to the X-UA-Compatible directive, one must either create a page that triggers quirks-mode per the rules of HTML5 (that is: an a page with no doctype). One can also send the directive as a HTTP header, however: A HTTP sent directive appears to have no effect if you use it to downgrade the rendering — it can only be used to upgrade the rendering
So, you've to do it manually with Dvelopers Tools, or with quirks mode (but I suggest to stay in IE10 mode which is for the first time aligned to the other browers' standard)
EDIT: The follows are some useful link to read:
http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx
http://blogs.msdn.com/b/ie/archive/2011/12/14/interoperable-html5-quirks-mode-in-ie10.aspx
You can force IE10 to render in IE9 mode by adding:
<meta http-equiv="X-UA-Compatible" content="IE=9">
in your <head> tag.
See MSDN for more information...
there are many ways can do this:
add X-UA-Compatible
tag to head
http response header
using IE tools F12
change windows Registry
The hack is recursive. It is like IE itself uses the component that is used by many other processes which want "web component". Hence in registry we add IEXPLORE.exe. In effect it is a recursive hack.
I found this post while I was looking for a solution to my DNN6 website.
The error was
SCRIPT5007: Unable to get property 'documentElement' of undefined or
null reference
But I needed the same solution: force compability mode to IE9. So let me share with you what I did to solve this.
So, for DotNetNuke 6 users try the StyleHelper SkinObject
Worked great for me!
I've read a bunch of blog posts, like this one, and also some other questions here on SO, like this one.
These all say that if you want to popup a message advising the visitor that the Desktop mode of IE 10 is required to view the site, then 'all you have to do' is add this meta tag:
<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true" />
Or you can set an HTTP header instead:
<add name="X-UA-Compatible" value="requiresActiveX=true" />
I've tried both of these techniques and neither of them seem to work! The Modern UI version of IE just does nothing at all. No popup, no message, nothing.
I'm running my site locally at the moment through IIS 8. I've added the URL to my trusted sites list. If I use another browser, like Chrome, I can see that the response header is definitely being set. The page runs in IE10 Modern, it just doesn't tell me to switch to Desktop mode...
I've tried strategically positioning the <meta tag in different places in the <head etc but this has not helped either
Can anyone offer any advice? Even mentioning a site that implements it would help...
Edit
I've tried adding this to a 'live' web page on my own site and still I am not prompted to switch to desktop when using IE10 Modern...
Not sure this will address it for you but it did for me. I had to combine multiple Compat tags into a single entry. Lke this:
<meta http-equiv="X-UA-Compatible" content="IE=7, requiresActiveX=true"/>
HTML5Boiler plate suggests we put this one in our HTML page if we favour Chrome over IE
(which is my case)
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
We all understand how it works.
If the user is using IE but it has also installed the Chrome Frame the chrome frame will be used to run the page (which is probably much faster when it comes to execute my js)
The question: is there any 'bad' side effect ?
any particular reason why I should not add that snippet ?
Thanks
The only downside I know about this snippet is that validators don't accpet yet the content value of this meta (even if they should), so if it seems annoying to you, just remember you can also specify it inside an .htaccess (as suggested also on html5 boilerplate site)
See https://gist.github.com/1292092 for an example of htaccess inclusion
See also this thread about meta validation
This does not have any downsides.
This will force the browser to render as properly as it can, ignoring those awful IE Compatibility modes.
This will not break the browser, just peacfully explain to it, that this page doesn't wish to be experimented with, and just to be shown properly.
There are in fact downsides to this meta tag (along with conditional comments) which is why we recommend you reference it from the server. See this issue for details.