.sample{
height:15px;
width:15px;
margin:10px;
padding:10px;
float:left:
/* this one apply in ie only */
border:1px solid #fff;
/* this one apply in ie only */
}
I would recommend using an entirely separate IE-specific stylesheet, to isolate all of the nasty IE hacks you use. Then, in your HTML, you can use a conditional comment to load that stylesheet for IE only.
HTML
<html>
<head>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/ie-hacks.css">
<![endif]-->
</head>
<body>
<!-- ... --->
</body>
</html>
ie-hacks.css
.sample{
border:1px solid #fff;
}
Use a conditional comment in the head of your HTML document.
<!--[if IE 6]>
.sample {border:1px solid #fff;}
<![endif]-->
check out "conditional CSS comments"
http://www.quirksmode.org/css/condcom.html
You can add !ie after the style declaration, e.g. .sample {border:1px solid #fff !ie;}. This works on IE 6 and 7, but doesn't work in 8, unless you trick it into IE7 compatibility mode using <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > (just make sure this appears before the CSS).
The cleanest solution though, is to include am IE-specific CSS file.
If you need to make more changes, and to keep your pages clean, I would recommend using a separate stylesheet for IE.
<!--[if IE]>
//place link to IE stylesheet here.
<![endif]-->
Then make the change inside of the IE stylesheet.
you can simply do the following give some charcter like # or so before it. Firefox ,chrome and other browsers ignore that line but IE executes that.
Give that line at the end of your css so that it will take care. Most of the developers use this hack for margin, padding issues in IE browser
.sample{
height:15px;
width:15px;
margin:10px;
padding:10px;
float:left:
/* this one apply in ie only */
border:1px solid #fff;
# border:2px solid #fff;
/* this one apply in ie only */ for ie it treats as 2px.
}
Related
In my css code i have tose hack that i want to affect IE6/7
#topmenu li a.activa,
#topmenu li a.activa:hover{
*background: url(../nImg/comunHomeSprite.png) no-repeat;
*background-position: right -2169px;
*float:left;
*margin:0;
*padding:0;
*margin-left:10px;
}
Is there a simple way to convert them into IE8 also??
If you must use hacks, then read this: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/
But note that CSS hacks are considered evil.
Conditional comments are a good alternative. They are easy to use, and guaranteed to work properly.
You can't put conditional comments directly into a stylesheet, but what you can do is define a class in your <body> tag using conditional comments, which you can then reference in the CSS:
Write your HTML <body> tag like this:
<!--[if IE 6]> <body class="ie6 ltie7 ltie8 ltie9"> <![endif]-->
<!--[if IE 7]> <body class="ie7 ltie8 ltie9"> <![endif]-->
<!--[if IE 8]> <body class="ie8 ltie9"> <![endif]-->
<!--[if IE 9]> <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
Then in your CSS, you can reference the relevant IE class in your selectors, and you'll have completely valid CSS code:
#topmenu li a.activa:hover {
/*normal styles here*/
}
.ie8 #topmenu li a.activa:hover {
/*IE8-specific styles here*/
}
Hope that helps.
Found this
selector {
prop: value; /* real browsers */
_prop: value; /* ie6 */
*prop: value; /* ie6 ie7 */
prop: value\9; /* ie8 */
}
don't know if this addresses IE9
/* IE8 */ #media \0screen { #topmenu li a.activa, #media \0screen #topmenu li a.activa:hover {
background: url(../nImg/comunHomeSprite.png) no-repeat;
background-position: right -2169px;
float:left;
margin:0;
padding:0;
margin-left:10px;
} }
I prefer this way personally as the attributes are still standard CSS and you need only change them once instead of however many different hacks you have. It can get a bit unwieldy otherwise.
I used filter: progid:DXImageTransform.Microsoft.gradient to get gradients for IE <9.
Now, when combined with a shadow, or a different background underneath, I get box sticking out.
Is there a way to keep backwards-compatibility, without conditionals and external stylesheets?
See code:
.class {
float:left;
border:solid 1px #AAA;
position:absolute;
z-index:1;
text-align:left;
width:350px;
margin: 12px 0px 0px 0px;
background:#FFFFFF;
border-radius:5px;
box-shadow:5px 5px 5px #BBBBBB;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f5f5f5, endColorstr=#FFFFFF);
}
<div class="class">this</div>
I'd recommend (to everyone ever!) using Paul Irish's technique which looks like this:
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if gt IE 9]> <body> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->
in your HTML.
Then in your CSS you can write things like:
#someID {
color:lawngreen;
}
.ie6 #someID {
color:lightgoldenrodyellow;
}
.ie8 #someID, .ie9 #someID {
color:saddlebrown;
}
to target different IEs. It's an easy technique that solves a lot of problems (no extra HTTP requests, an negligible extra code for all browsers).
I lost my corners’ radius once I applied filter: progid:DXImageTransform Microsoft.gradient.... I suppose it’s a similar problem.
To solve it, I used an SVG background generated here
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
It’s simpler than it sounds. In CSS, it looks like
body.ie9 div.test {
border-radius:10px
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz...
and lo, round corners and gradient.
$2c,
*-pike
I find when IE is giving me issues with stuff pushing out of the round corners, I nest that inside another element...
So for example I would put the round corners and drop shadow on the outer element with the size I want and overflow: hidden; Then put the gradient on another element inside. 100% fit.
maybe not the perfect solution, but fairly simple.
In a CSS file, is there a way to give a specific height for a DIV that only applies to Internet Explorer ONLY, and at the same time, give that same DIV another height that applies to all browsers except for Internet Explorer?
You can create an IE-specific stylesheet and use IE Conditional statements.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
This way, you basically have two stylesheets; one for IE and other for rest of the standard-compliant browsers.
Hacks could have been used such as:
_height:500px;
*height:500px;
But that is not recommended.
See Also:
How To Create an IE-Only Stylesheet
I have used the following and it worked in IE8. Put the following code within tag.
You can watch the online version from here, http://nazmulweb.com/site5/demo/iecss/
<style type="text/css">
#tgtDiv
{
height: 300px;
width: 400px;
border: 1px solid green;
}
</style>
<!--[if IE]>
<style type="text/css">
#tgtDiv
{
height: 300px;
width: 400px;
border: 5px solid red;
}
</style>
<![endif]-->
try this
<style>
#mydiv { height:800px; }
</style>
<!--[if IE]>
<style>
#mydiv { height:500px; }
</style>
<![endif]-->
Create 2 css files, one for IE and one for the other browsers
Load the css file according to the browser like described here
I'm using .class1.class2 .class3 selector, where .class1.class is a combination selector and .class3 belongs to a descendant. works fine in FF, but on IE7, it doesn't work.
In the css below, the second style is always shown in IE. any solution?
<STYLE type="text/css">
.test1.test2 .test3{
width:90px;
height:100px;
}
.test4.test2 .test3{
width:900px;
height:100px;
}
</style>
<div class="test1 test2">
<button value="test" class="test3"/>
</div>
just for let you know, what you are using is called Multiple Classes method! IE7 need to use this form:
div.class1.class2 div.class3 {}
IE6 don't suppurt this you can hack it, read the solution
http://www.quirksmode.org/css/multipleclasses.html
hope this help!
That style should work perfectly on IE7+. As Pekka said in the comments there is a small problem with IE6. I'm guessing that you're not using the strict doctype perhaps?
In which case, you deserve everything you get :-o
Just add <!doctype html> to the start of the HTML file and everything should be fine.
Use Conditional Comments , this issue has been raised too many times here is an example :
<!--[if lte IE 9>
<style type="text/css">
.test1,.test2,.test3{
width:90px;
height:100px;
}
.test4,.test2,.test3{
width:900px;
height:100px;
}
</style>
<![endif]-->
This means all IE family browser less than version 9 are going to read in this style, or you can use style with # to be read by IE like this :
<STYLE type="text/css">
.test1,.test2,.test3{
#width:90px;
#height:100px;
}
.test4,.test2,.test3{
#width:900px;
#height:100px;
}
</style>
I know in order to include a browser specific css file you can do the following
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style.css" />
<!-->
But is there a way to do this in the actually stylesheet itself?
EDIT
Thanks for the replies, I am just going to build a new IE specific stylesheet and override what I need there. I think this is prob the best way to do things.
Check this post, scroll down to Hacks:
http://www.dezinerfolio.com/2009/02/20/css-standards-best-practices
Actually, yes there is.
It wont validate, but if you add _ before the property name so div {width: 200px;_width: 100px;} will be 200px wide in non-ie browsers and 100px in IE.
I have decided that building a separate stylesheet and then using the comment IF statement is the best solution. Keeps the stylesheets clean and it is more obvious to others as to what you are doing (overriding properties due to browser quirks).
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="StyleIE.css" />
<!-->
These work...
.foo{
border:1px solid #000;
*border:3px dotted #00f;/*IE6 & IE7 Only*/
_border:2px dashed #f00;/*IE6 Only*/
}
Thus the outcome is:
W3C Browsers (Firefox, Safari, Opera, etc.)
1px solid black border
IE7
3px dotted blue border
IE6
2px dashed red border
As a last resort (and not highly recommended) you can use the dynamic properties by using expression() then test for the browser version (if you care)
you can also use the !important flag to do this, but that may have unintended side effects.
Click Me I'm !important