CODEWITHSUNDEEP
htmlcssinternet-explorer
Koala7
Koala7

Reputation: 1404

Hide a CSS element in IE

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?

Upvotes: 6

Views: 10693

Answers (4)

nxplace
nxplace

Reputation: 421

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?

Upvotes: 10

Nithin Emmanuel
Nithin Emmanuel

Reputation: 977

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

Upvotes: 3

Prashobh
Prashobh

Reputation: 9542

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

Upvotes: 0

Danil Speransky
Danil Speransky

Reputation: 30453

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

Upvotes: 0

Related Questions