Tony B 86

Lets say I want div#potato to not be shown/displayed/taking up any space in normal browsers but in any instance of IE I want div#potato to be visible and everything else which is contained in say div#toothpaste to be hidden/not-visible.

I am using conditional stylesheets which target either ALL versions of IE or everything except IE. Both stylesheets have styles for the same div just with different visibility settings. (In the CSS targeting all versions of IE the div#potato is visible, in all other browsers the visibility is hidden).

The problem is that this is not working at all; perhaps I am using the wrong CSS property and should try display:none; or something else? I am testing this using firefox, chrome, safari, and IE6,7,8.

3 answers

1
point
This was chosen as the best answer

The code Marko has shown you will hide div#toothpaste using CSS.

Showing div#potato on any instance of IE is in your html like this:

<!--[if IE]><div id="potato"> whatever </div><![endif]-->
Answered over 6 years ago by Bernard Chhun
3
points

Hey Tony - here's what you should do. The CSS doesn't have to be inline, it can be a reference to a css file instead.

<style type="text/css">
    div#potato {
        display:block;
    }
</style>

<!--[if IE]>
    <style type="text/css">
        div#potato {
            display:none;
        }
    </style>
<![endif]-->

If you find that doesn't work, try using !important on the property. Example

display: none !important;

HTH

Marko

Answered over 6 years ago by Marko Ivanovski
0
points

Tony - There is, as you suspected, a difference between visibility: hidden, which will hide the object but keep the "box" visible, so to speak, and display: none, which effectively removes the element from the page. In this case you want display: none.

<soapbox> Somewhat tangential: !important is a hack, just as bad as inline styles. You should never need it if you've designed your site properly. </soapbox>

Answered over 6 years ago by Christian Mann
  • I know !important is a hack - unfortunately we don't ALWAYS have control of markup and order of CSS files. When I've had to override a property, !important is about the only thing that works without resorting to Javascript. Marko Ivanovski over 6 years ago