Conditional style inside an html tag

Question

Is it possible to use conditional style inside tag as shown below?

<body>
    <div id="InScreenAlertContainer"
    <!--[if IE]>
    <style>width=100%</style>
    <![endif]-->
    >
    ...
    </div>
...
</body>

You should only use conditionals to include styles or other scripts. I don't believe you can use it like that. You ought to test it using IE if you're curious. — djthoms, Jan 07 '13 at 05:01
"There's no bigger teacher than curiosity" - Try that if you want to know. — Deepak Kamat, Jan 07 '13 at 05:08

score 1 · Answer 1 · edited May 23 '17 at 12:10

1

Use a conditional style sheet depending on which browser is used

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

Source: http://www.thesitewizard.com/css/excludecss.shtml

The JQuery .css method lets you specify a style that takes effect after an event

//On Button Click - applies a style on click.
$('#change').click(function()
{
    $('body').css('background-color',$('#color').val()); 
});

Source: Change CSS rule at runtime

edited May 23 '17 at 12:10

Community

1
1

answered Jan 07 '13 at 04:54

Eric Leschinski

146,994
96
417
335

I want to override width property only for IE. So I don't want to use two different style sheet to just change one property. – Jan 07 '13 at 04:59

score 1 · Answer 2 · edited May 23 '17 at 10:24

You can try this :

  #div{
        padding: 10px; /* standard */
        padding: 17px\9; /* IE 8 and below */
        *padding: 15px\9; /* IE 7 and below */
        _padding: 16px\9; /* IE 6 */
    }

OR

<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
<![if !IE]><p>You are not using Internet Explorer.</p><![endif]>

<!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->
<!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->

<!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->

<!--[if true]>You are using an <em>uplevel</em> browser.<![endif]-->
<![if false]>You are using a <em>downlevel</em> browser.<![endif]>

<!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![endif]-->

Reference :

reference link 1

reference link 2

refernce link microsoft

score 0 · Answer 3 · answered Jan 07 '13 at 05:05

0

Maybe you could try something like this, but i haven't tested it.

 <!--[if IE 6]>
    <style>
       .mywidht{
           width:100px;
        }
    </style>
    <![endif]-->

answered Jan 07 '13 at 05:05

intelis

7,829
14
58
102

Conditional style inside an html tag

3 Answers3