CODEWITHSUNDEEP
cssinternet-explorer
None
None

Reputation: 9247

How to apply class only for IE?

I have this class in CSS and i need to change it when its IE. I want to remove padding-bottom. How can I do that?

I don't want to add another CSS file, I want to change only one property in one class.

.container-wrapp{
    float: left;
    position: relative;
    width: 100%;
    padding-bottom:100px;
    height: 100%;
}

I tried this but without success:

<!--[if IE]>
<style type="text/css">
.container-wrapp{
    float: left;
    position: relative;
    width: 100%;
    height: 100%;
}
</style>
<![endif]-->

Upvotes: 1

Views: 12657

Answers (4)

Amir Naeem
Amir Naeem

Reputation: 610

Checkout this link How to create an ie only stylesheet , You need to create a separate style sheet for IE.

Upvotes: 0

Deepak Biswal
Deepak Biswal

Reputation: 4320

I think for best practice you should write IE conditional statement inside the tag that inside has a link to your special ie specific style sheet. This HAS TO BE after your custom css link so it overrides the css property. Here is an example:

<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Hope this will helps you!

IE 10 and onward no longer support conditional comments. From the MS official website:

Support for conditional comments has been removed in Internet Explorer 10 standards and quirks modes for improved interoperability and compliance with HTML5.

Please see here for more details.

If you desperately need to target ie, you can use this jQuery code to add a ie class to and then use .ie class in your css to target ie browsers.

if ($.browser.msie) {
 $("html").addClass("ie");
}

Upvotes: 0

Danield
Danield

Reputation: 125651

For IE10+ you can do the following:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .container-wrapp{padding-bottom:0;}
}

Demo Fiddle (Note that the text is red only in IE 10+)

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
  .red {
    color: red
  }
}
<div class="red">text</div>

NB: Using hacks like these are generally frowned upon. Use with caution.

Upvotes: 15

ojovirtual
ojovirtual

Reputation: 3362

Create a stylesheet file ie.css and use if AFTER the global style definition this way:

<!--[if IE]>
<link rel='stylesheet' type='text/css' href='ie.css'/>
<![endif]-->

This should work.

Upvotes: 1

Related Questions