I want to define a CSS rule for IE9 and below ONLY so I included this line on my style sheet:
<!--[if lte IE 9]>
.gradient {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#bbb69c, endColorstr=#ffffff)";
}
<![endif]-->
it didnt work. Internet Explorer 9 is not understanding it unless I take off the conditional tags.
Why is that?
Thank you.
Embedded the css in style tag.
<html class="ie9-fix">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<!--[if IE]>
<style>
.gradient {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#bbb69c, endColorstr=#ffffff)";
}
</style>
<![endif]-->
<body>
// body content goes here...
</body>
</html>
You can only add HTML code inside conditional comments. Your page structure should be like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie9.css">
<![endif]-->
<body>
// body content goes here...
</body>
</html>
And in ie9.css you can define your css
.gradient {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#bbb69c, endColorstr=#ffffff)";
}
Okay, I think I found the answer. This seems to work.
#media screen and (min-width:0\0) {
gradient {-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#bbb69c, endColorstr=#ffffff)";
}
Related
I need html5 scripts to be opened by IE7.
I did input a script to call html5shiv.js on <head> script in the HTML file.
Here's my HTML code:
<head>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/style_ie.css" />
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
</head>
and I trying to styling a button on tag <header> like this:
HTML:
<header>
<input type='submit' value='LOGIN'>
</header>
CSS:
header input[type=submit]{
background:url('../images/btn_login.png')repeat-x;
color:white;
}
and that's still not working, I don't know where the error is? are the error on the caller of html5shiv or in some of the syntax?
NOTE: no CSS class like .Something Allowed
Include html5shiv.js before style_ie.css:
<head>
<!--[if IE]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<link rel="stylesheet" type="text/css" href="css/style_ie.css" />
<![endif]-->
</head>
Use it as a class example
.btn
{
background:url('../images/btn_login.png')repeat-x;
color:white;
}
and use it in html as
<header>
<input type='submit' value='LOGIN' class='btn'>
</header>
The Internet Explorer 7 have a buggy support for the attribute selector. to prevent this issue it would be goo if you can make a class and then apply it on input tag. I hope it will work on IE7 or even IE6.
NEW SOLUTION
you have to call the html5shiv.js and CSS file separately like this way.
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script><![endif]
-->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/style_ie.css" />
<![endif]-->
OLDER SOLUTION
<input type='submit' value='LOGIN' class='myClass'>
CSS would be
.myClass{border:1px solid red;}
IE7 not supported this attribute of HTML file so you can not use header input[type=submit]{ }
i need create class for ie7 and check browser if it is less than IE8 then you call that class.
Why is this ie6.css file not loading on IE6?
The 'TEST 123' text does show.
(the css works if I remove the condition)
I'm testing this on a virtual box with xp and IE6 from http://modern.ie
(I know the _ and * css hacks, but I need a very different layout on IE6)
<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="~/Web/css/ie6.css" />
<![endif]-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CE Client</title>
</head>
<body>
<!--[if lt IE 7]>
<p>TEST 123</p>
<![endif]-->
</body>
</html>
You have to use the full url.
When using the syntax like that it won't work in your browser.
"http://yourwebsite.com/Web/css/ie6.css"
You should be able to use:
Target IE 7 and LOWER
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="~/Web/css/ie6.css" />
<![endif]-->
OR
Target IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="~/Web/css/ie6.css" />
<![endif]-->
Is there a way that I can create an IE only element in CSS?
I need for the margin to be different in IE compared with other browsers. How can I do this within the actual stylesheet?
According to this (As #GOD said, found it with Google in 220ms. Google is your friend.)
Target ALL VERSIONS of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Target everything EXCEPT IE
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
Target IE 7 ONLY
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
Target IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Target IE 5 ONLY
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
Target IE 5.5 ONLY
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->
Target IE 6 and LOWER
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
Target IE 7 and LOWER
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
Target IE 8 and LOWER
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
Target IE 6 and HIGHER
<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
Target IE 7 and HIGHER
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
Target IE 8 and HIGHER
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
Along with what #Adrien Lacroix said, this is what you need
.element{
background: gray; /* standard */
background: pink\9; /* IE 8 and below */
*background: green; /* IE 7 and below */
_background: blue; /* IE 6 */
}
There is also these if you need them
IE6 ONLY
* html #div {
height: 300px;
}
IE-7 ONLY
*+html #div {
height: 300px;
}
IE-8 ONLY
#div {
height: 300px\0/;
}
IE-7 & IE-8
#div {
height: 300px\9;
}
NON IE-7 ONLY:
#div {
_height: 300px;
}
Hide from IE 6 and LOWER:
#div {
height/**/: 300px;
}
OR
html > body #div {
height: 300px;
}
There are at least two ways to do it.
IE-only stylesheet
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css" type="text/css"/>
<![endif]-->
Javascript - check User Agent and apply necessary styles if IE found - best would be jQuery. Alternatively, you can try this.
I'm trying to use HTML5 Boilerplate + Normalize.css for my current project, and I faced the follow issue.
There seems to be a gap between my HTML tag and my BODY tag.
I've tried to figure out what's the cause of this, but failed after many tries.
I must have missed something here or there.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Ridanis | Web Design & Web Development</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<!-- Wrapper / Start -->
<div class="wrapper">
<h1>Hello World!</h1>
</div>
<!-- Wrapper / End -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/main.js"></script>
</body>
</html>
Here is a fiddle: http://jsfiddle.net/C7gbC/
Thanks in advance.
normalize.css inserts a default margin declaration on h1 elements based on browser defaults for consistency:
h1 {
font-size: 2em;
margin: 0.67em 0;
}
If you zero it out manually (either in your main stylesheet or by modifying normalize.css directly), the gap will disappear:
h1 {
margin: 0;
}
Found this to be my issue with the "h2" in my page header. Same for a "p" tag in both iE8 and Crome. Just setting the margin: 0; for my "h1" AND "p" tags to some structure styles I had set at the beginning of my main.css page. Solution seems to work
If I want to add padding based on the browser the user is viewing the page in, is there a way in CSS that I can do something like:
if IE do
padding:5px;
else if not IE do
padding 10px;
Here is a great reference: Quirksmode.org Conditional Comments.
Although the control structure is in the markup and not the CSS, it accomplishes your goal and is usually considered the best practice when serving browser-specific stylesheets.
The best-practice way is to have a single stylesheet for IE-only fixes, like so:
<link rel="stylesheet" href="styles.css" media="screen" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="ie-styles.css" media="screen" type="text/css" />
<![endif]-->
Then just override specific problem-causing styles in the ie-styles.css file.
Target ALL VERSIONS of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Target everything EXCEPT IE
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
Target IE 7 ONLY
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
Target IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Target IE 5 ONLY
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
Target IE 5.5 ONLY
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->
Target IE 6 and LOWER
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
Target IE 7 and LOWER
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
Target IE 8 and LOWER
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
Target IE 6 and HIGHER
<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
Target IE 7 and HIGHER
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
Target IE 8 and HIGHER
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
For complete reference on the topic, Chris Coyier: How To Create an IE-Only Stylesheet
Although the IE conditional can be used only in html and not in the CSS, you can use the following in your CSS files for your quick-and-short tests/hacks.
p {
/* all browsers */
background-color: red;
/* for IE7 and below - append a * before the property */
*background-color: blue;
/* for IE6 and below - append a _ before the property */
_background-color: green;
}
While you can use this for your quick and short requirements, I think, you should follow the suggestion by Mark Hurd given above for production-level heavy codes.
Here's a cleaner way to target IE 10+ in CSS only
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
(Source: Phil Newcomer)
If you don't mind ugliness in your code, you can use something like the Holly hack:
div { padding:5px; }
* html div { padding:10px; }
There's a neat CSS Zen Garden example that does this to present two distinct designs, but I don't recall its name.