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
– Simon West, Commented Aug 22, 2012 at 9: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
– Pevara, Commented Aug 22, 2012 at 10:03

Community · Accepted Answer · 2017-05-23 11:47:19Z

10

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?

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered May 17, 2017 at 15:00

nxplace

4214 silver badges5 bronze badges

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

Comments

RDX RaN · Accepted Answer · 2012-08-22 10:07:08Z

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, 2012 at 10:07

RDX RaN

3054 silver badges20 bronze badges

answered Aug 22, 2012 at 9:57

Nithin Emmanuel

9771 gold badge8 silver badges18 bronze badges

1 Comment

albert Over a year ago

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!

Danil Speransky · Accepted Answer · 2012-08-22 09:55:07Z

0

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]-->

answered Aug 22, 2012 at 9:55

Danil Speransky

30.5k6 gold badges70 silver badges78 bronze badges

Comments

Prashobh · Accepted Answer · 2012-08-22 10:03:42Z

0

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

answered Aug 22, 2012 at 10:03

Prashobh

9,58415 gold badges66 silver badges92 bronze badges

Collectives™ on Stack Overflow

Hide a CSS element in IE

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related