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!).
Related
I'm trying to use conditional comments to load webcomponents polymer polyfill on ie11 and webcomponente-lite polyfill on ohter browser so I have:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/roboto-condensed/css/roboto-condensed.css">
<!--[if IE]>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<![endif]-->
<!--[if !IE]><!-->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<!--<![endif]-->
The issue is that webcomponents-lite.min.js is always loaded, event in IE11
Any suggestion?
IE 11 does not support conditional comments.
Conditional comments are no longer supported
Impact Applies to Internet Explorer 10 and later. Affects IE10
Standards mode and later, including interoperable quirks mode. Support
for conditional comments has been removed in Internet Explorer 10
standards and quirks modes for improved interoperability and
compliance with HTML5. This means that Conditional Comments are now
treated as regular comments, just like in other browsers. This change
can impact pages written exclusively for Windows Internet Explorer or
pages that use browser sniffing to alter their behavior in Internet
Explorer.
You'll need to try another way to target IE11 specifically.
Searching around SO brought me to this answer, which uses feature detection to determine whether or not to load Polymer's polyfills.
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.
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...}
Just made a site using great standards compliant semantic HTML and CSS. It looks great in Gecko, Web Kit, but IE7 mangles it (of course). Any progress yet on this front, or do I have to go through a tonne of hacks as is standard with IE.
Try this
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE8.js"></script>
<![endif]-->
Or you could write a separate css file for IE7
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css" type="text/css" />
<![endif]-->
There are several well-known hacks for hiding IE-specific demangling rules from comformant browsers. Most of them depend on IE mis-parsing certain things, e.g. "* html ... { }" which other browsers will ignore. A simple google search will show any number of these.
My rule is first to make the page work in FF (or similar), and then break it so it works in IE.
I find that developing a site first for IE, then adapting it to other browsers is less time consuming than the other way around. But, it's a little late for that!
I would suggest that you have a separate CSS file for IE (just copy and paste and rename current CSS) then have a browser sniffer and script that requests the IE CSS for IE users. Then rewrite just the IE CSS. Does that make sense? At least that way, the site is still up for the other browsers and you're just working on IE.