Conditional CSS

Posted on 2011-02-24
Medium Priority
Last Modified: 2012-05-11

I have the following code:



            <style type="text/css">

                   [if IE] background-color : blue;
                   [if Gecko] background-color : red;




            <form name="form1">




It is not working as expected in IE 6.0. Can you please FIX this ?

Question by:milani_lucie
  • 2

Expert Comment

ID: 34974336
I don't know if IE6 supports that kind of styling... it seems that you need to install something for have that styles working

try this, calling different styles in head section

<!--[if !IE]><!-->  
  <style type="text/css">@import '/media/css/c-css.php?b=nonIE';</style>  
<!--[if IE 6]>  
  <style type="text/css">@import '/media/css/ic-css.php?b=IE&v=6';</style>  
<!--[if gte IE 7]>  
  <style type="text/css">@import '/media/css/c-css.php?b=IE&v=7';</style>  

Open in new window

Keep in mind that you can make everything in a common css file, then include different "patch" css files for different browsers.

Accepted Solution

LAMASE earned 2000 total points
ID: 34974360
Sorry, I pasted the wrong example
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />

Open in new window

LVL 84

Expert Comment

by:Dave Baldwin
ID: 34974436
@LAMASE's examples are correct.  The conditional statements are in the HTML file and can control loading of additional CSS files but the conditional statements do Not work inside the CSS declarations or files.  In addition, only IE will recognize them.  Using [if Gecko] has no effect, Mozilla and Webkit browsers do not recognize such things.

Featured Post

7 new features that'll make your work life better

It’s our mission to create a product that solves the huge challenges you face at work every day. In case you missed it, here are 7 delightful things we've added recently to monday to make it even more awesome.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

597 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question