CODEWITHSUNDEEP
cssinternet-explorer
James
James

Reputation: 1945

Put browser specific condition in CSS selector

I have following css selector

 body
 {
   margin: 0;
   font-family: "Arial" ;
   font-size: 18px;
   line-height: 25px;

  }

I want to write condition that if the browser is IE then change the line-height to 10px

I searched one similar question here but when i add the condition like mentioned in the question it throws syntax error Missing property name before colon(:). I followed question and modified code like

    .bodyClass
    {
      margin: 0;
     font-family: "Arial";
     font-size: 18px;
     line-height: 25px;

     <!--[if IE 6]>
       line-height: 10px;     
     <![endif]-->

   }

How to write the conditional statement inside css selector? I dont want to create different style sheets for IE and rest of browsers

Upvotes: 2

Views: 9793

Answers (5)

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

#testdiv
{
height:300px;
width:100%;
line-height:50px;
line-height:100px\9;    
}

Demo Fiddle

Upvotes: 0

Lt_Shade
Lt_Shade

Reputation: 588

Try <!--[if lte IE 6]>

Or you could try the opposite and add the line height as 10 then use

<!--[if !IE]>--> do something; IE will ignore this, other browsers parse it <!--<![endif]-->

to set the line height for other browsers.

Below is a link to Supporting IE with CSS

http://dev.opera.com/articles/view/supporting-ie-with-conditional-comments/

Another Useful site is http://css3please.com/ which shows you the different CSS for IE, Chrome and Firefox. It also allows you to edit the site in real time.

Upvotes: 0

Jon
Jon

Reputation: 437336

If you don't want to create separate stylesheets then you have two alternatives.

IE conditional comments

Use conditional comments to give classes to the <html> tag, for example:

<!--[if lt IE 7]>  <html class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]>     <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]>     <html class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]>     <html class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]>  <html> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->

This way you can then use nice self-describing selectors like this in your CSS:

html.ie6 .bodyClass { line-height: 10px}

CSS hacks

Another option is to use appropriate CSS hacks to target the browsers you are interested in. The advantage of this approach is that it can be done without touching the HTML/DOM at all. One specific hack that targets only IE 6 while still being syntactically valid CSS is:

.bodyClass { _line-height: 10px; /* hack targeting IE 6 only */ }

If you do decide to use CSS hacks, please make sure to accompany them with comments that describe what they do to help future maintainers.

Upvotes: 7

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

You can write them inside headers and there join a stylesheet such as

<!--[if IE 6]>
    <link href="~/folder/file.css" rel="stylesheet" type="text/css" />
 <![endif]-->

Else if you can use a serverside such as ASP.NET and by Using Request.Browser check whether if its IE and change the style.

Upvotes: 1

Kishori
Kishori

Reputation: 1095

Try this out:

*line-height:10px;  //* is hack for IE7
line-height:10px\0/;  //\0/ is hack for IE8
line-height:10px\9; //\9 is hack for IE9
//below is the hack for chrome and safari browsers 
@media screen and (-webkit-min-device-pixel-ratio:0)
{
    line-height:10px;
}

Upvotes: 5

Related Questions