July 4, 2013
Style display:none not working in IE8, IE9, IE10 Compatibility View
Sukhminder Singh’s Question:
I have two DIVs on my page. One of them is set to display:none based on some condition. It works well on IE10, Firefox and Chrome. But it does not work on IE8, IE9 and IE10 Compatibility View. As a result, it shows both of the DIVs. Can someone suggest what to do to fix this issue?
<div id="dv1" style="background: url(http://abc.com/images/green.gif) no-repeat scroll 0px 0px transparent; height: 26px; width: 171px; display: none;"></div>
<div id="dv2" style="background:url(http://abc.com/images/red.gif) no-repeat scroll 0 0 transparent;height:26px; width:142px; padding-left:18px;padding-right:11px;"/>
You forgot to put </div> for both divs.
I think you want something like below.
<div id="dv1" style="background: url(http://abc.com/images/green.gif) no-repeat scroll 0px 0px transparent; height: 26px; width: 171px; display: none;"></div>
<div id="dv2" style="background:url(http://abc.com/images/red.gif) no-repeat scroll 0 0 transparent;height:26px; width:142px; padding-left:18px;padding-right:11px;"></div>
Check the demo, it works fine in all browsers.
<div> is not a self closing tag. You cannot end this tag by writing it as <div .... /> at the end. They are container tag and they should contain some element for display: none to work.
For example:
<div style="display: none;">
What ever inside will never show
</div>
Make these changes and it will work as you want.
