I am trying to get my website showing properly on ie6 and ie7 and they say that you must put use this statement:
<!--[if IE 6]> <link href="ie6.css" rel="stylesheet" type="text/css"> <![endif]-->
Now where do I put this statement in my HTML page?
EDIT:
So I've added this just after the doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--[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 gt IE 8]><!--><html lang="en"><!--<![endif]-->
<head>
In my style sheet ie6.css I've got this:
.ie6 #magazine_style_left {
position:relative;
float:left;
width:150px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
color:#999999;
font-style:italic;
line-height:18px;
}
.ie6 #magazine_style_right {
position:relative;
float:right;
width:519px;
border-left: 1px solid #F2F2F2;
}
and I've added the css on the same page and it still isn't working. Its like its not picking up / using the ie6 css
inside the head tag
<head>
<!--[if IE 6]> <link href="ie6.css" rel="stylesheet" type="text/css"> <![endif]-->
</head>
It might help clarify things to mention this:
IE conditional comments, such as <!--[if IE 6]><![endif]--> can go pretty much* anywhere in the document. In the <head>, in the <body>, in an <li> element or <form>, etc. The content inside it (which can be anything*) will be rendered (or not) according to the rule used.
* There may be exceptions, but I'm not aware of any specific ones.
Knowing this, the question really boils down to "Where do I put a <link> tag", which is of course in the <head> as mentioned by the other answers.
There's another way to target IE, outlined here:
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
For sometime now, the standards community has rallied around
conditional stylesheets as a solution to the validation problem.
There are a few problems with it though:
Conditional stylesheets mean 1 or 2 additional HTTP requests to download
As they are in the the , the rendering of the page waits until they're totally loaded.
Also – Yahoo's internal coding best practices do not recommend conditional stylesheets
It can separate a single CSS rule into multiple files. I've spent a lot of time wondering "Where the eff is that rule coming from!?"
when it turned out to be tucked away in a conditional stylesheet.
Here's my proposed solution:
<!--[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]-->
Using the same conditional comments, we're just conditionally adding
an extra class onto the html tag. This allows us to keep our
browser-specific css in the same file:
div.foo { color: inherit;}
.ie6 div.foo { color: #ff8000; }
Plus it totally validates and works in all browsers.
I highly suggest this technique for attacking IE, definitely worth checking out.
Into the <head> next to your other CSS includes. That means of course that you have an ie6.css file that fixes IE6 specific problems.
You should put it inside the head tag, probably right after your other css includes, because where definitions clash, includes further down the head tag will override earlier definitions.
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.
I have a simple div with a 2px thick border and absolute positioning thats hidden until its parent element is hovered over. Due to IEs box model, the position of said div is somewhat off in IE, but not any other browser. I don't want to add an entirely seperate style sheet for IE, I just want to modify the class itself if the browsing person is using IE.
So how does one modify or add a specific class for IE only?
You need to use something called conditional comments. These only work in IE (other browsers will see them as comments) so they are a great way to target IE only.
Example - if you want something to be done in IE6 use the following:
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]--
To find out more, visit the official MSDN source regarding conditional comments.
You can just add following conditional snippets at your html (or whatever) file. After that you can define new class attributes in your ie_stylesheet.css
<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="ie_stylesheet.css"/>
<![endif]-->
I think there are enough explanations here.
You can try and avoid the IE stylesheet by adding a CSS reset to the beginning of your stylesheet. Please take a look at the following: http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
The reset should help making elements behave the same in all browsers.
I've found this usage of conditional comments to be a pretty elegant way of tagging your <html> tag with classes that you can work with in your CSS and JS:
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
As a contrived example, if you want to target IE6 to make all links red, you would use specificity like this:
.lt-ie7 a {
color: red;
}
No need for a separate style sheet.
Source: 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.
I don't think modernizr likes me, can someone please tell me what i'm doing wrong. I can't seem to get modernizr to work on firefox, ie etc... I'm only using elements like header, footer and nav...
This is my code:
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 lte9 lte8 lte7 no-js"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 lte9 lte8 lte7 no-js"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 lte9 lte8 no-js"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 lte9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="notie no-js"> <!--<![endif]-->
<head>
<title></title>
<meta name="description" content="" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="modernizr-2.0.6.min.js"></script>
<script type="text/javascript" src="http://use.typekit.com/kmy1sfb.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
Checking firebug it outputs fine, I get all of the elements i'm supposed to but none of the elements are working...
For example if I click header in firebug and edit the CSS height to 5000px it doesn't move, also the alignment etc isn't correct.
You probably are forgetting to style the new HTML5 elements as block-level elements. By default, browsers treat any unknown element as an inline element (display:inline) which makes it difficult to do much with them.
Newer browsers are slowly treating the new HTML5 elements as stable, meaning they start giving them default styling like display:block for the header element, for instance. But, most browsers on the market today don’t have those default styles for HTML5 elements, so you’ll need to provide them.
Here’s a quick sample bit of CSS to do that:
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
Adding that CSS to your main.css should fix your styling issue.
I had the same issue when I was trying to use a CDN and it wasn't working (I might have had the wrong link). The test I found was to put
.borderradius body {
background: #c00;
}
in your main.css and see if the background turns red. If it is modernizr, is working.
EDIT: I've also found that the script must be inserted at the top of the HTML document. Putting it at the bottom, as suggested for better loading speed of pages, doesn't work.
hi a i am triyng to using conditional css like this in my style sheet
div.box {
width: 400px;
[if IE 6] width: 600px;
padding: 0 100px;
}
i want to set a different width to my div in ie6 , so i am trying this code and not working , how can i set a different width in ie6
also i tried this in my style sheet
[if IE]
div.box {
width: 600px;
padding: 0 100px;
}
[endif]
Conditional comments are for use inside HTML documents, not inside CSS files. IE's HTML parser will interpret the rule inside the comment - as far as I know, there's no equivalent logic in its CSS parser.
The following code will work:
<!--[if IE 6]>
<style type="text/css">
div.box {
width: 600px;
padding: 0 100px;
}
</style>
<![endif]-->
In most cases, it's better to use the conditional comment to include an external stylesheet, rather than just wrapping a block of inline styles, like so:
<!--[if IE 6]>
<link rel="stylesheet" href="/css/IEpatches.css" type="text/css" media="screen" charset="utf-8"/>
<![endif]-->
Edited to specify IE6 only as requested in the question.
The best way to do conditionals for ie6 is to add a conditional include in the head of the html page like this:
<!--[if IE 6]>
<link rel="stylesheet" href="[something like style/ie6.css goes here]" type="text/css">
<![endif]-->
and then just add your new widths as exceptions to elements in the ie6.css style sheet.
Have you tried?
<!--[if IE]>
// Your conditional CSS
<![endif]-->
I think that your formatting is wrong for your conditional statement.
Conditional Comments
Have you read the Conditional-CSS documentation? Specifically, do you run your CSS through the Conditional-CSS compiler? Because if you don't, you'll just send the CSS to the browser unchanged - there is no way Conditional-CSS can do its magic then.
As you probably have learned by now, conditional comments are parsed in the HTML output, not within the CSS file itself, unless you are using third party software.
Another way you can target IE within your CSS files without hacks:
<!--[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]-->
It's become common to use variations of this technique for IE, I believe it was made popular by HTML5 Boilerplate. You are basically using conditional comments to add a class to the <html> tag (or body tag if you wish) so you can target elements in your CSS files like so:
.ie6 #header {
/* some ie6 only styles here */
}
To me, this is more maintainable than using separate stylesheets, but suffers the very mild setback of other browsers reading (but not applying) the IE styles.