Other than javascript, is there another way to use a different style-sheet for a web app in IE10 and IE11?
Per MSDN:
Important As of Internet Explorer 10, conditional comments are no longer supported by standards mode. Use feature detection to provide effective fallback strategies for website features that aren't supported by the browser.
#yglodt you can not differentiate between 10 and 11 as 10 -- dropped support.
Looked over fallback strategy, not very impressed - you will test for feature availability.
You can use any language (JavaScript, PHP, Python, etc) to check agent and take action. Not the best, but works in desperate mode.
sorry for breaking your constraint, but this would be the only solution:
with this you can ad a IE10 class when the browser is indeed IE10:
<!doctype html>
<!--[if IE 7 ]><html lang="en" class="ie7"><![endif]-->
<!--[if IE 8 ]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9"><![endif]-->
<!--[if !IE]><!-->
<script>if(/*#cc_on!#*/false){document.documentElement.className+=' ie10';}</script>
<!--<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
This works because of #datamafia's answer.
Now you can target .ie10 in your CSS and have different style for IE10 then for IE11 (IE11 is getting the rest of CSS)
You can do it with conditional comments in html. Read about it here: http://msdn.microsoft.com/en-us/library/ms537512.ASPX
Edit:
Some people mentioned that IE11 dropped support for conditional comments... which is sad.
Otoh you can still do it old-school by serving different stylesheets for the IE user-agent, with server-side browser sniffing.
Related
I recently started developing pages in HMTL 5 and everything works perfectly well in all other browsers except IE. What could be the problem?
Thank you in advance!
IE does not understand the new HTML5 element, you need to include a script that enables those element for IE.
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
More info: html5 shiv
I always use modernizr, it does the same job for you:
Thats because Internet Explorer interprets CSS And the new HTML5 tags differently than other browsers.
See: css-differences-in-internet-explorer-6-7-and-8 on smashingmagazine.com
There is a HTML5 boilerplate available which eliminates some of the crossbrowser differences, but not all: html5boilerplate.com.
Also, in conjunction with the library modernizr you are able to minimize the difference. But while you develop a website, you always do have to check the rendering in all the browsers on which they will appear, because different browsers don't render the same.
Try
<!--[if lt IE 9]>
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<![endif]-->
If you are building responsive website you should use
<!--[if lt IE 9]>
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<![endif]-->
File you can download from http://www.initializr.com/
I created my website using a mac. As you know I can't test it out using Internet Explorer, I left it for the last but expecting layout disasters. The website looks perfect in Chrome, Firefox and Safari. As expected, IE shows it differently. How should I move on from here?
Create a style sheet just for IE?
Update my existing style sheet to display the website as expected in all the browsers I mentioned earlier?
To me, (1) seems to be the easiest choice so that I can tailor my CSS to display properly in IE without worrying about Chrome, Firefox and Safari. Do you think this is ok?
Thanks!
You can target specifically your stylesheet for IE only. You will need to put condition code on heading section of the page. See below for examples.
For all IE
<!--[if IE]>
For all IE
<![endif]-->
If you just want to target to specific version of IE then
<!--[if IE 7]>
For only IE 7
<![endif]-->
There are a couple things you can do.
Conditional Comments
Example of a conditional comment to target all versions of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
You can find more conditional comments http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Validate Your Css fixing some obvious markdown mistakes may improve your code immensely.
Which version of IE are you targeting? Most of the major pains with IE CSS2 bugs are in IE6, and to a lesser extent, IE7 - however IE8 and IE9 are much better and I haven't experienced any bugs that would require them to have separate stylesheets.
If you are targeting IE6/7 then you have my sympathy, but I don't see why you should bother as IE6 usage is negligible nowadays. However, if you must, then conditional comments are the least painful way of managing the problem. Simply do this in your <head> element:
<!--[if IE 6]>
<link rel="stylesheet" href="ie6patch.css" />
<![endif]-->
Read more here: http://www.quirksmode.org/css/condcom.html
Also, don't forget to add <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to your page force IE8 and IE9 to use Standards mode.
In the future you can use a css reset to minimize differences between browsers. I have used this one in the past: http://developer.yahoo.com/yui/reset/
Also consider using a template like http://www.99lime.com or similar.
Check out conditional comments.
I'm a university student, and just built my first website for an internship. We are approaching the launch of the site, however during my debugging process I've found that of all places, it doesn't work on my boss's machine and browser combination. She uses a Vista OS and internet explorer 7 for a browser. I know IE7 is outdated, but according to broswershots.org IE7 will still render the site mostly correct on an XP operating system.
The main page of the site is accessible here
Here are screenshots of what happens with the Vista/IE7 combo:
Please let me know what you think, as any ideas would be extremely helpful. Thanks!
In your boss's browser, go to Tools, Internet Options, Accessiblity.
She may have checkboxes checked that override font settings.
"IE7 will still render the site mostly correct"
Sadly, no. IE has a long history of being crap and ignoring web standards. IE6 was notorious for this. IE7 a pain. IE8 a bummer and IE9 is mostly now just a small annoyance.
Bottom line is that you likely have IE7 bugs appearing. It's not necessarily indicative to bad markup or CSS, but rather just problems with IE7.
The typical solution is to use IE conditional comments to render a unique class name to the BODY tag. You can then over-ride the standard CSS just for a particular version of IE7 to bend it into submission:
<!--[if !IE]> -->
<body>
<!--<![endif]-->
<!--[if gt IE 8]>
<body id="IE9">
<![endif]-->
<!--[if IE 8]>
<body id="IE8">
<![endif]-->
<!--[if IE 7]>
<body id="IE7">
<![endif]-->
<!--[if lt IE 7]>
<body id="IE6">
<![endif]-->
And then in your css you can do this:
.myClass {...standard styles...}
#IE7 .myClass {...ugly hack just for IE7...}
#IE6 .myClass {...ugly hack just for IE6...}
I have seen a couple of answers that relate to my questions but can't seem to get the problem solved.
I am trying to use the conditional comments to target IE as per Paul Irish Boilerplate i.e.
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if gt IE 9]> <body> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->
Doctype is 'transitional'.
I am testing a site on a local server and looking at the developer toolbar in IE8, the class that is placed on the body is 'ie7'
After a looking into to it I am using the following to try and render in IE8 standards mode hoping that the class put on the body would be 'ie8'
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
It doesn't work. I also used the JS here to tell my what mode IE8 is in. Its says IE8 standards mode.
Any idea how I can get the class on the body of IE8 to read 'ie8'? Or at least, not 'ie7' like it currently does.
Or is it just not possible to do this testing on a local server meaning I have to put it on a live server before I can make the changes I want? Which seems a bit crazy...
Thanks
If you are using a local server you are probably in IE8 compatibility mode. This is the default for local sites.
To check hit F12 and the developer toolbar should load. It will show you what browser mode and document mode you are using. IE8 should display for both.
You can disable the default behaviour by clicking "Tools" > "Compatibility View Settings" and change the setting "Display intranet sites in compatibility mode".
According to this page: "Note that IE8 claims to be 7 in Compatibility View"
If the excellent people at JQuery can't seem to sort that out, then I think the answer is probably no. :/
If IE8 is in IE7 mode then the browser is correct to report itself as IE7; after all, the intention of IE7 mode is to render the page exactly the way IE7 would have done, so if you're doing browser detection, you would want to be told it's IE7 because it's the IE7 behaviour you would have to deal with (the fact that there are bugs with IE8's IE7 mode, and that it isn't quite the same as a real IE7 is another topic altogether).
What you seem to be wanting is IE8 to actually be in IE8 mode. This is a reasonable thing to want!
You said you're using:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
have you tried this instead:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
'edge' tells IE to use the most up-to-date rendering engine it has, which should force IE8 to go into normal IE8 mode. Maybe that would work better than telling IE8 to emulate itself?
By the way, if you're having trouble on machines in your local network with IE8 falling back to IE7 mode when you're not expecting it, be aware that there is a config setting in IE8 which specifies to "always use IE7 mode for intranet sites". This feature was put there by Microsoft to help with backward compatibility of custom-written intranet sites which didn't upgrade nicely to IE8, but frankly it causes more hassles than it saves. If this is the problem and you can't solve it any other way, you may find the easiest answer is simply to go to all the machines on your network and change the config setting (depending on the size of your network, of course!).
<!--[if IE 6]>
I am using IE6
<![endif]-->
That works.
How do I do "or" IE7?
If you, for whatever reason, what to only test for IE6 or IE7, and maybe have some other conditions for IE5 elsewhere, there is also support for other operators:
<!--[if (IE 6)|(IE 7)]>
This is IE 6 or IE 7!
<![endif]-->
Check out the wikipedia article which has better documentation than Quirksmode on this.
you can do
<!--[if lte IE 7]>
I am using IE less than or equal to version 7
<![endif]-->
Have a look at http://www.quirksmode.org/css/condcom.html#link3 for detailed options..
same exact format. just change the ie version. Refer to here.
http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx