Conditional CSS in CSS not working

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.

That's not how conditional code works. See here for examples. — Mr Lister
– Mr Lister, Commented Mar 7, 2012 at 12:48
Or you can see conditional-css.com/demo/advanced.css for more detail — Dave
– Dave, Commented Mar 7, 2012 at 12:54
Sorry, I couldn't tell that was what you meant. In that case, Starx' and andriy's answers are correct. — Mr Lister
– Mr Lister, Commented Mar 7, 2012 at 12:56
@MrLister, I dont think its needed to know about this script. It is really not my type. Check my answer to see what i mean. — Starx
– Starx, Commented Mar 7, 2012 at 13:10

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 7, 2012 at 12:49

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dave Over a year ago

If I go with the gool old fashioned way, I should put those css comments after the main css is called right?

Starx Over a year ago

@Dave, Yes. Better include a css file, which contains all the patches of a IE or specific IE Version.

Dave Over a year ago

Starx, thank you so much. It works! Good old fashioned way rocks many times.

BlakcRece · Accepted Answer · 2013-01-24 10:00:11Z

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).

--

The IE method was to do something like the following;

<!--[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).

--

THE NEW METHOD SINCE DEC 2012:

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!

Oritm · Accepted Answer · 2012-03-07 12:47:41Z

0

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

answered Mar 7, 2012 at 12:47

Oritm

2,1202 gold badges25 silver badges41 bronze badges

Comments

Andriy Budzinskyy · Accepted Answer · 2012-03-07 12:50:59Z

0

You can add conditional to the class:

[if IE] .ie-height{  
    height: 241px;
}

answered Mar 7, 2012 at 12:50

Andriy Budzinskyy

2,00125 silver badges30 bronze badges

1 Comment

highvolt Over a year ago

It is important to note that inline conditional CSS is not a CSS standard. As Starx mentioned above, it will only work with the conditional css server-side compiler. This will have the performance drawback of not including a static file.

j.davies · Accepted Answer · 2012-03-07 12:55:49Z

0

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; }

answered Mar 7, 2012 at 12:55

j.davies

2,3311 gold badge19 silver badges24 bronze badges

Collectives™ on Stack Overflow

Conditional CSS in CSS not working

5 Answers 5

Have you read the usage file?

Update

3 Comments

The IE method was to do something like the following;

THE NEW METHOD SINCE DEC 2012:

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Have you read the usage file?

Update

3 Comments

The IE method was to do something like the following;

THE NEW METHOD SINCE DEC 2012:

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related