so I have this css code:
.onetoone{
position: relative;
margin: 10px auto 5px;
padding: 20px;
width: 878px;
[if ! IE] height: 1241px;
[if IE] height: 241px;
border: 1px solid #AAAAAA;
behavior: url(PIE.htc);
}
However I don't see any different height on .onetoone in IE and Firefox, both are still have the same 214px height. It should has a 1232px height in firefox and 241px height in IE 8, right?
What did I miss?
Thanks for all your answers.
According the website, you have to write the css and compile it using its online tool and then you have include c-css.php to get it working.
@import "/media/css/c-css.php";
According to example from this website, this should fix the problem.
.onetoone{
position: relative;
margin: 10px auto 5px;
padding: 20px;
width: 878px;
border: 1px solid #AAAAAA;
behavior: url(PIE.htc);
}
[if !IE] .onetoone {
height: 1241px;
}
[if IE] .onetoone {
height: 241px;
}
After you compile it becomes a huge file like this one here and you include like the way I said above.
However, I would go with the good old fashioned way I knew. And it was to include different css with the conditional CSS comments
<!--[if IE]>
<style>
.onetoone {
height: 241px;
}
</style>
<![endif]-->
<!--[if !IE]>
<style>
.onetoone {
height: 1241px;
}
</style>
<![endif]-->
Should work either way.
Instead of loading different style like the one in my example load different file in the end after loading all the main css files in this way.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="fixforie.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="fixforie6.css" />
<![endif]-->
I know that this has been answered last year but I wanted to point out a method that doesn't seem to be used although the functionality has been written into the CSS2.1 specification. (See CSS Conditional Rules Module Level 3 for more specific details).
--
<!--[if IE]>
<link rel="stylesheet" href="styles/ie.css" type="text/css" media="screen" />
<![endif]-->
As described in the Conditional comments section of the wiki.
--
Another method mentioned on here is to use Conditional-CSS which seems popular but I've never heard of it and couldn't give an example of how to use it so a link will have to do! (Sry ppl).
--
By using Conditional Group Rules you can define conditions like;
@media print { #navigation { display: none; } }
(Example taken from the specification) This will hide the navigation bar when printed. Another Conditional Group Rule you can define is @SUPPORTS, for example;
@supports (box-shadow: 2px 2px 2px red)
{
box-shadow: 2px 2px 2px red;
}
and include "and", "or" and "not" operators like;
@supports ((box-shadow: 2px 2px 2px red) and (border-radius: 25px))
{
box-shadow: 2px 2px 2px red;
border-radius: 25px;
}
This means rather than testing the clients browser, you test the features available to css and style accordingly. Unfortunately, you're unable to nest other at-rules (like @import which could be used to import a browser specific style sheet based on the availability of a css feature).
Try it out!
You can load another CSS file in your HTML page for example:
<!--[if lt IE 8]>
<link rel="stylesheet" href="styles/ie8.css" type="text/css" media="screen" />
<![endif]-->
You can add conditional to the class:
[if IE] .ie-height{
height: 241px;
}
The best approach is to follow the HTML5 boilerplate method.
In your html add the following around your html tag:
<!--[if lt IE 7]> <html lang="en-us" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en-us" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en-us" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
So in your style you can easily specify the ie version with standard styles:
div.this_element { float:right; margin-top: 10px; }
lt-ie8 div.this_element { margin-top: 5px; }
