Hide a CSS element in IE

Question

I need to hide a background element in my css for IE.

This is the class in the css file

.navbar-header .nav #presentacion {
    background:url("../img/horiz-line.png") no-repeat scroll 108px 20px transparent;
    display: block;
    height: 20px;
    margin-top: 20px;
}

I want to use this method, inserting the CSS in the head section of the page hidding this part :

    <!--[if IE]>
          <style>
         .navbar-header .nav #presentacion {
         display: block;
         height: 20px;
         margin-top: 20px;
         background: none;}
    </style>
   <![endif]-->

It's not working , the background is still displayed in IE, what i am doing wrong?

Are you declaring your IE only styles before or after you link to your external CSS stylesheet? — Simon West, Aug 22 '12 at 09:54
note that you do not need to repeat the entire style block, just the background:none; should do. And indeed make sure it comes after the linked stylesheet, inside the head section of your html. — Pevara, Aug 22 '12 at 10:03

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

IE 10 + does not support conditionnal style. So you must use this for IE10+:

<style>
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ styles */
  .navbar-header .nav #presentacion {
         display: block;
         height: 20px;
         margin-top: 20px;
         background: none;}
}
</style>

More info here: How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?

score 3 · Answer 2 · edited Aug 22 '12 at 10:07

3

Use the reverse method. Apply !IE class to the class you want to display background image. this gets rendered only in non-IE browsers.

<!--[if !IE]> -->
    <style>
    .navbar-header .nav #presentacion {
    background:url("../img/horiz-line.png") no-repeat scroll 108px 20px transparent;
    display: block;
    height: 20px;
    margin-top: 20px;
    }
    </style>
<!-- <![endif]-->

edited Aug 22 '12 at 10:07

RDX RaN

307
4
20

answered Aug 22 '12 at 09:57

Nithin Emmanuel

937
1
8
18

great suggestion! more effective, but nowhere near as cool...figure out which version(s) of IE you are targeting, and target them directly. That said, great show of the NOT operator. Well played sir! – albert Aug 22 '12 at 10:25

score 0 · Answer 3 · answered Aug 22 '12 at 09:55

Maybe you declare it before your common stylesheet, and it was overwritten. Try this:

<!--[if IE]>
  <style>
    .navbar-header .nav #presentacion {
      display: block;
      height: 20px;
      margin-top: 20px;
      background: none !important;
    }
  </style>
<![endif]-->

score 0 · Answer 4 · answered Aug 22 '12 at 10:03

0

 <!--[if IE]>
          <style>
         .navbar-header .nav #presentacion {
         display: block;
         height: 20px;
         margin-top: 20px;
         background-image: none !important;}
    </style>
   <![endif]-->

answered Aug 22 '12 at 10:03

Prashobh

9,216
15
61
91

Hide a CSS element in IE

4 Answers4