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]-->
Related
I currently have the following html prefix namespaces
<html lang="en" dir="ltr" prefix="content: http://purl.org/rss/1.0/modules/content/
dc: http://purl.org/dc/terms/ foaf: http://xmlns.com/foaf/0.1/
og: http://ogp.me/ns# rdfs: http://www.w3.org/2000/01/rdf-schema#
schema: http://schema.org/ sioc: http://rdfs.org/sioc/ns#
sioct: http://rdfs.org/sioc/types# skos: http://www.w3.org/2004/02/skos/core#
xsd: http://www.w3.org/2001/XMLSchema# ">
I was reading something and came across this:
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
Here are my questions:
1./ Does adding this to my html web page interfere/collide with the current prefix namespace I have?
2./ For the situation when it says if (gte IE 9) why is there a closed comment <!--> before the html declaration and <!-- after the declaration
3./ What can i do with this sort of declaration?
You can only have one <html> tag, but you could add the attributes from your first example to the <html> tag in the second. What are you trying to achieve?
Your second example contains conditional comments. They are only supported by older versions of Internet Explorer. Other browsers will treat them as normal HTML comments - i.e. they will ignore them. The last line of the example closes the comment before the HTML tag so that all non IE browsers will still see the <html lang="en"> tag. If it was instead written as
<!--[if (gte IE 9)|!(IE)]><html lang="en"><![endif]-->
the <html> tag would be inside the comment and would therefore be ignored by all browsers.
The purpose of the code you posted is to output an IE-version specific class to the <html> tag. It would allow you to write CSS declarations for targetting specific IE versions, e.g.:
body {
background-color: white;
}
.ie7 body {
background-color: red;
}
This would make the page background white for everyone except users of IE7, for whom it would be red.
In practice these sorts of solutions aren't used as commonly these days, unless you have a pressing need to support IE versions that Microsoft themselves no longer support.
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/
I'd like to exclude Internet Explorer from using a specific CSS class.
Is this possible?
Details:
I have a css class that looks like -
input[type="radio"]:checked, input[type="radio"]:hover
{
box-shadow: 0px 0px 10px #90BBD4;
}
Since Firefox's latest browser update removed the -moz-box-shadow property and I believe it now uses the default box-shadow instead, ... my Firefox is still working great, but Internet explorer now recognizes it and messes up the look.
How might I go about excluding IE from using this class or work around it somehow?
This will set a class of the IE version the client browser is using.
<!--[if lt IE 7 ]> <html class="ie6" lang="en" xml:lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" lang="en" xml:lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8" lang="en" xml:lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9" lang="en" xml:lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="" lang="en"> <!--<![endif]-->
Then using CSS you can target it to a specfic browser by using something like:
.ie7 #wrapper
{
display:none;
}
When people feel the need to make their website look different in different browsers (which is the complete opposite of what the Internet should be like...) they use this:
<!--[if IE]><html class="ie"><![endif]-->
<!--[if !IE]>--><html><!--<![endif]-->
Then in your CSS you can put html.ie to make IE-specific rules.
You can use IE conditional comments and set css rules in the css you include inside the comment.
For example:
<!--[if IE]><link rel="stylesheet" href="ie.css" /><![endif]-->
or:
<!--[if IE]><style>*ie style rules here*</style><![endif]-->
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!
How to show certain content to IE6 + earlier versions and different one to the others? Is it possible with a conditional comment?
Thanks
UPDATE
I can only edit a content within <body> tag...
There is a better option described on Paul Irish blog. (Link here)
The basic idea is to give class to your html tag like this.
<!--[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]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
Suppose there is a label in your page. For example,
<label class="foo">Your browser is IE6!</label>
And you wanna display that label only in IE6, do this
label.foo { display: none;}
.ie6 label.foo { display: block; }
This method sure has its pros and cons.
Please read all the other comments in the Paul Irish post for an in depth understanding of the scenario.
Indeed, the best part of a blog post often begins where the blog post ends.
Hope this helps.
You can use conditional comments to include content only for certain browsers
More info at:
http://www.quirksmode.org/css/condcom.html
use css hacks. Refer below links
http://www.webdevout.net/css-hacks
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
I'd recommend you to use ie-specific classes like HTML5 boilperplate do:
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
Then you can have corresponding css to show/hide content, e.g.:
.ie6-content: {visible: false;}
.ie6 .ie6-content: {visible: true;}
.content {visible: true;}
.ie6 .content {visible:false}
Thus sections with ie6-content will be visible for IE6 only, and section with content will not be visible in IE6.
Conditional comments (unfortunately) won't float your boat because they didn't exist until IE 5. Also, they weren't available on netscape. Rather, simply, you put an iframe at the end of your content that displays your actual page contents like so.
<title>Your websites title</title>
<body style="margin:0px;font-size:0px;width:100%;height:100%;overflow:hidden">
<h1>heading</h1>
<p>Body paragraph</p>
<!--[if gt IE 6]><!-->
<iframe frameborder="0" width="100%" height="100%" src="main.html" style="position:relative;width:100%;height:100%;background-color:white"></iframe>
<!--<![endif]-->
<style language="css" type="text/css">/*<!--*/
/* put your limited CSS here */
/*-->*/</style>
</body>
Then, put in a downlevel revealed conditional comment so that the iframe doesn't show up on IE 6 or IE 5. Then, so long as the iframe doesn't have any text contents, it will be invisible in even the first version of the first internet browser.
Then, because no sane person would want to put in enough time, energy, and effort to provide compatibility with IE5 for an ordinary website, you can just use down-level revealed conditional comments (supported before iframes were supported thankfully).
Then, you can add in a little super-basic CSS for browsers like the oldest version of Netscape. Super-basic CSS includes things like color and crop, and excludes things like just about everything cool and modern.
My source for this is, of course, the source code for the world's first website. The most complete bits can be found here: at cern. It is also the reason for putting the title outside of the head, and not including any head at all.
SO, this method will allow you to display a plain alternative to the webpage to all browsers older than IE 6. You may then ask what about Chrome, Firefox, Opera, and other browsers. Well, those browsers automatically update. So really, there is no real need to extend support to previous versions of them.
At any rate, the above layout is sketcky at best, but hey: it workz. And, that is good enough for me.