2

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

Improve this question
0

5 Answers 5

Reset to default
7

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.

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

21 Comments

I'd add that there's no guarantee whatsoever that hacks target only the intended browser. It just happens to be that way which people figured out over time, but this may change with future browser development.
I tried using your statements but whatever i write inside those if conditions it shows as comment in my html
@Happy: They are HTML comments, so that's normal: it's what they look like. But they make a difference to IE.
Is it possible to show demo? I will really appreciate it. if possible can you modify this fiddle jsfiddle.net/84pQM/4
@Happy: Here's one, but of course you 'll need IE6 to see anything.
|
5

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;
}
Improve this answer

4 Comments

I have tried using line-height: 25px\9; but it gives syntax error
CSS validator will show error but will work while loading in IE9
I used but nothing changes
using the hack media screen and (-webkit-min-device-pixel-ratio:0) worked for me. I also used hack for IE 10 i.e media screen and (min-width:0\0) . Although it is not good solution but is currently working. I will try to see if i can implement solution give by . Many thanks Kishori
1

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.

Improve this answer

Comments

0

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.

Improve this answer

1 Comment

The link to dev.opera.com is broken. It's backed up at github.com/operasoftware/devopera-static-backup/blob/master/…
0 
#testdiv
{
height:300px;
width:100%;
line-height:50px;
line-height:100px\9;    
}

Demo Fiddle

Improve this answer

3 Comments

I have tried using line-height: 25px\9; but it gives syntax error
@Happy check the fiddle on IE
I modified your fiddle jsfiddle.net/84pQM/4 but i get same result. The fiddle i created is same as my actual code

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.