I am building a separate stylesheet for IE. I am using this code between
<head>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/iestyle.css" />
![endif]-->
</head>
The problem is, this part is being printed to the screen on the page in IE:
![endif]-->
What am I doing wrong?
you need to start the closing tag. use this
<![endif]-->
Related
I have the following setting and only want to have this setting for IE only.
Is there the way to do so
.login-space {
padding-right: 30px;margin-right: 20px;
}
Thanks
K
One solution is create a style sheet for only IE and put that selector in it and add the style sheet in head section like this
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-style.css" />
<![endif]-->
More detail Here
i have tried a very simple code, dont know why it is not working , may be a small mistake but i gave up, so please help
my ie version is 8.
here is my code
<!DOCTYPE html>
<head>
<!--[if gte IE 8]>
<link type="text/css" rel="stylesheet" href="ie.css" />
<![endif]-->
</head>
<body>
<div class="u">
xyz
</div>
<style scoped>
.u{
background:red;
}
</style>
</body>
</html>
ie.css
.u{background:green;}
The issue here is that you are redeclaring your css.
In the above code, you are specifying:
For ie: set background green.
For all: set background red.
Place your ie css below the generic css for it to take precedence.
You should do it like this:
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
You might need to apply the !important attribute to your over-riding class definition like this:
.u{background:green!important;}
This will force it to take precedence over the normal version. A better solution might be to make it more specific too so that it is used when present (when being viewed in IE9+):
body div.u{background:green;}
i'm trying to create border radius for some divs and want them to work on IE too so i'm tryin to use CSS3 PIE. I want to target browsers less then IE9 but it's not working at all
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="../assets/css/ie.css"/>
<![endif]-->
<link rel="stylesheet" type="text/css" href="../assets/css/main.css"/>
the last one is the main stylesheet but when i open ie.css and save any style it doesn't work at all. The page loads without any stylesheet On IE as it's not attached to the html page
Any solution ?
You need to have the ie.css overwriting the main.css
try
<link rel="stylesheet" type="text/css" href="../assets/css/main.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="../assets/css/ie.css"/>
<![endif]-->
I'm trying to use conditional comments to hack IE7 into behaving like a real browser.
But the last few days, IE7 is ignoring conditionals referencing it, and responding only to conditionals targeting IE8.
My header has:
<!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">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
...
The conditionals are:
<!--[if IE 7]>
<link rel="stylesheet" href="/css/ieHacks.css" type="text/css" media="screen" />
<![endif]-->
Which is NOT recognized in either IE7 or 8. But if it's
<!--[if IE 8]>
<link rel="stylesheet" href="/css/ieHacks.css" type="text/css" media="screen" />
<![endif]-->
Then the stylesheet is rendered in both IE7 and IE8.
Any ideas? I'm stumped.
I've had problems with IE8 not reading the IE stylesheet, so now I prefer to add a class for IE on my main stylesheet. It is easier to maintain code with one stylesheet anyway. Paul Irish explains it better but basically you put this:
<!--[if IE]> <html class="ie"> <![endif]-->
where your conditional stylesheet link was and then in your css you add the ie class for every IE-specific change you need. So let's say your padding is normally 6px but for IE you need it to be 4px, your css for that div would look like:
.someClass {padding: 6px;}
.ie .someClass {padding: 4px;}
You could also use a CSS hack to target IE7 only from within your main stylesheet:
*:first-child+html { /* Apply IE7-only CSS here */ }
Why I am not able to apply an css that is for IE browser only,
I am trying to do it as below with in-page css block.
<style type="text/css">
<!--[if IE]>
body a {font-size:12px;text-decoration:none;}
<![endif]-->
<style>
Reference link
The way to do it is around a css file reference,
Example:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
You might be able to do this too:
<!--[if IE]>
<style type="text/css">
body a {font-size:12px;text-decoration:none;}
<style>
<![endif]-->
But it has to be in the html page and not in a css file.
because conditional comments can't be in the style tag. Everything within <style> must be css. Try to wrap the style tag with the conditional comment.
Your code: http://jsbin.com/otidal/edit#preview
Correct code: http://jsbin.com/otidal/2/edit#preview