Question

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.

Answer 1

Have you read the usage file?

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.

---

Update

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]-->