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(.gif) no-repeat scroll 0px 0px transparent; height: 26px; width: 171px; display: none;"></div>
<div id="dv2" style="background:url(.gif) no-repeat scroll 0 0 transparent;height:26px; width:142px; padding-left:18px;padding-right:11px;"/>
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./images/green.gif) no-repeat scroll 0px 0px transparent; height: 26px; width: 171px; display: none;"></div>
<div id="dv2" style="background:url(http://abc./images/red.gif) no-repeat scroll 0 0 transparent;height:26px; width:142px; padding-left:18px;padding-right:11px;"/>
- I have update the code by providing closing div tags. Please have a look. – Sukhminder Singh Commented Jul 4, 2013 at 5:09
-
You should learn basic HTML first. First you didn't close the
divtag, and after the edit you closed it likeimgtag? This is not the way you close adivtag. – Chankey Pathak Commented Jul 4, 2013 at 5:10 -
1
divs are not self-closing, please use literal</div>instead. – Teemu Commented Jul 4, 2013 at 5:10
4 Answers
Reset to default 3You forgot to put </div> for both divs.
I think you want something like below.
<div id="dv1" style="background: url(http://abc./images/green.gif) no-repeat scroll 0px 0px transparent; height: 26px; width: 171px; display: none;"></div>
<div id="dv2" style="background:url(http://abc./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.
If you want to hide both DIVs, your html markup should be like that, div2 must be inside div1
<div id="dv1" style="background: url(http://abc./images/green.gif) no-repeat scroll 0px 0px transparent; height: 26px; width: 171px; display: none;">
<!-- div1 content -->
<div id="dv2" style="background:url(http://abc./images/red.gif) no-repeat scroll 0 0 transparent;height:26px; width:142px; padding-left:18px;padding-right:11px;">
<!-- div2 content -->
</div>
</div>
Use CSS instead of inline styling
<html>
<head>
<style>
.dv1 {
background: url(http://abc./images/green.gif) no-repeat scroll 0px 0px transparent;
height: 26px;
width: 171px;
display: none;
}
.dv2 {
background:url(http://abc./images/red.gif) no-repeat scroll 0 0 transparent;
height:26px;
width:142px;
padding-left:18px;
padding-right:11px;
}
</style>
</head>
<body>
<div id="dv1"></div>
<div id="dv2"></div>
</body>
</html>