CODEWITHSUNDEEP
htmlcss
Manu Shioyaki
Manu Shioyaki

Reputation: 51

conditional clause in css

<!--[if lte IE 8]>
.food_disp{
    background: url("../images/food.png") center bottom no-repeat;
    padding: 80px;

}
<![endif]-->
<!--[if !IE]>
.food_disp {
    background: url("../images/food.png") center bottom no-repeat;
    padding: 50px;
}

<![endif]-->

I have tried the above css to display an image as background with padding set as above. I would like to tell the translator/interpreter that if the client browser version is lower or equal to 8 then add a little more padding distance to the image block for display or if this is not IE at all, then use the already defined block. The image display is fine without the conditional clause added that is, only if 

 .food_disp {
        background: url("../images/food.png") center bottom no-repeat;
        padding: 50px;
    }

is used. but if the condition is added, then the image disappears.

Upvotes: 0

Views: 644

Answers (4)

Dipak
Dipak

Reputation: 12190

I would suggest you do this with HTML5Boilerplate

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> 

<html class="no-js" lang="en"> <!--<![endif]-->

CSS: 

.ie9 .food_disp{
  .......
}
.ie8 .food_disp{
  .......
}

Upvotes: 1

prezes
prezes

Reputation: 129

If you want to use inline stylesheets, use them like this:

<!--[if lte IE 8]>
<style>
    .food_disp {
        background: url("images/food.png") center bottom no-repeat;
        padding: 50px;
    }
</style>
<![endif]-->

Note the 'style' tags surrounding your definitions.

Regarding the '..' issue, those dots obviously point to parent directory of your html file. You need to remember to set the right relative path to the html file when using inline css. This may be different from the path used in the css file if it's used as a separate stylesheet file.

Upvotes: 0

user123444555621
user123444555621

Reputation: 152956

It doesn't work like that. You have two options:

  1. use conditional comments in HTML to include IE-specific stylesheets
  2. Apply CSS hacks (don't do that). Also see Ie8 CSS Hack - best method?

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32172

..........................................

Hi now used to this format i thing your images path is problume 

  <!--[if lte IE 8]>
        .food_disp {
            background: url("images/food.png") center bottom no-repeat;
            padding: 50px;
        }
    <![endif]-->



    <!--[if !IE]>
    .food_disp {
        background: url("images/food.png") center bottom no-repeat;
        padding: 50px;
    }

    <![endif]-->

more info

Upvotes: 0

Related Questions