I'm having a strange issue.
I am using Internet explorer 9 and just changing the browser mode to IE 7 or IE 8 etc ...
My problem is that I've added:
<!--[if lt IE 7]>
<link type=\"text/css\" rel=\"stylesheet\" href=\"/styles/ie7.css\" />
<![endif]-->
but it's not changing to the conditional css file when in IE9 's IE7 browser mode...
Is this normal?
if lt IE 7 will match IE6 (or lower).
To match IE7, use lte (less than or equal)
#SLaks is right about the error you are receiving.
I would like to add to that by showing you a better way to target IE:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]><html class="ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9 ]><html class="ie9" lang="en"><![endif]-->
<!--[if IE 10 ]><html class="ie10" lang="en"><![endif]-->
<!--[if !IE ]><!--><html class="non-ie" lang="en"><!--<![endif]-->
The benefit of doing it this way is that you get to keep the best practice of only using 1 stylesheet. You simply preface your target with the corresponding IE class you want to hack.
For example: .ie6 #target-id
For a more in depth explanation, check out Paul Irish's article:
Conditional stylesheets vs CSS hacks? Answer: Neither!
Related
I am trying to understand that what kind of CSS inside the html class="ie.".
Is there any CSS file for these statements, if they are then what are the CSS
elements being used in these style sheets.
<!--[if lt IE 7 ]> <html class="ie6"><![endif]-->
<!--[if IE 7 ]> <html class="ie7"><![endif]-->
<!--[if IE 8 ]> <html class="ie8"><![endif]-->
<!--[if IE 9 ]> <html class="ie9"><![endif]-->
What you are looking at are conditional comments. They are a Microsoft standard they baked into older versions of IE since the rendering "quirks" could vary so much from version to version. Any non Internet Explorer browser will render those as comments and go about their merry way. However, older versions of IE will so those comments and render them as content if the version matches. For instance, IE6 would see your markup and render like this:
<html class="ie6">
<!--[if IE 7 ]> <html class="ie7"><![endif]-->
<!--[if IE 8 ]> <html class="ie8"><![endif]-->
<!--[if IE 9 ]> <html class="ie9"><![endif]-->
What this allows you to do now is write CSS that targets Internet Explorer 6 specifically -- any selector that is prefixed with .ie6 will only be applied to the IE6 browser. Sad that it is necessary, but useful to have.
Please note that in IE10 MS felt that there browsers were now sufficiently quirk-free and standards compliant to no longer necessitate supporting any conditional comments, so they won't work IE9+.
Remember that conditional comments will not work within your stylesheets. Instead, you can use conditional comments inside your HTML. First I would apply different CSS classes / ID's to elements so you can then target with CSS.
<!--[if IE]>
<div id="ie_wrapper" class="ie">
<![endif]-->
<!--[if !IE]>
<div id="ie_wrapper">
<![endif]-->
I want to use display A for IE great than 7 or other browsers, and display B for IE 7 and lower.
One way is
<!--[if !IE]>
A
<![endif]-->
<!--[if gte IE 8]>
A
<![endif]-->
<!--[if lt IE 8]>
B
<![endif]-->
But I don't want to write A twice in a page since A is very long and it seems unwise to duplicate it.
How can I achieve this by HTML only?
Can I use if lt IE9 in conjunction with if IE 8, in this manner:
<!--[if lt IE 9]><script src="html5shiv.js"></script><![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
I'm asking since the second condition is contained in the first one, maybe this could cause some glitch in one of the browsers?
Yes it should work fine, and the order doesn't matter, ie will parse all the rules and execute any that matches
I have seen the following:
quirksmode
But this does not really show how I can detect for IE8 or IE9. Can someone tell me how I can do this with conditional comments?
The link you posted is correct. Those comments are what you need.
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if (IE 8)|(IE 9)]>
According to the conditional comment this is IE 8 or 9<br />
<![endif]-->
Conditional Comments (for your reference):
http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
Between the square brackets are your conditions, you can do equals, not equals, less than, less than or equal to, greater than, greater than or equal to.
You can use conditional comments in Internet Explorer to add a CSS class to your HTML node. This is how html5boilerplate works to add browser specific CSS:
https://github.com/h5bp/html5-boilerplate/blob/master/index.html
For each browser you can use different kind of "conditional comments"
here is one of very good article by Chris Coyier over this issue.
http://css-tricks.com/new-poll-conditional-tags-for-all-browsers/
it is my personal experience it was good to use conditional comments.
yes you can detect ie8 and 9 also. Try this
<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
<![if !IE]><p>You are not using Internet Explorer.</p><![endif]>
<!--[if IE 8]><p>Welcome to Internet Explorer 8!</p><![endif]-->
<!--[if !(IE 9)]><p>You are not using version 9.</p><![endif]-->
<!--[if gte IE 8]><p>You are using IE 8 or greater.</p><![endif]-->
<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->
<!--[if true]>You are using an <em>uplevel</em> browser.<![endif]-->
<![if false]>You are using a <em>downlevel</em> browser.<![endif]>
<!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![endif]-->
In the if condition expresions lte denotes less than or equal to and gte denoted greater than or equal to and lt denotes less than.
Hi all : How can i fix the problem of css in ie 7 and ie6 : my divs change possition in those two : www.justcode/housetostay: I will be very glad if i get any help
You can use conditionals to do this.
In your add this code.
<!--[if lt IE 8]>
// Add your IE only stylesheet here
<![endif]-->
This means that if the browser is Less Than IE8 load the stylesheet in the comments.
You can be more specific if you need to.
<!--[if IE ]> - Targets all IE versions from 5.5 up to 9
<!--[if gt IE6 ]> - Targets all IE versions Greater Than IE6
<!--[if IE7 ]> - Targets only IE7
Without using hacks I would suggest using this technique
<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
Then you can add css:
.ie6 .my-div {
}
.ie7 .my-div {
}
Using separate stylesheets for each version of IE is pretty outdated/poor IMO when you can target all versions in your regular single stylesheet
you can read more here: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/