title: display:none not working in IE7
body: <p>Situation:-
  I have created a RadioButton group. When a User selects a radio button depending upon his choice the content gets displayed and the other content is removed.</p>
  
  <p>Problem:- 
  The page is working fine in all browsers except IE7. I need a solution that runs in IE7 also.</p>
  
  <p>Code:-</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;IE7 Bug display:none&lt;/title&gt;
      &lt;style&gt;
          #entireContent, #div1, #div2{
              display:block;
          }
      &lt;/style&gt;
      &lt;script type="text/javascript"&gt;
          function displayDiv1(){
              document.getElementById('div1').setAttribute('style','display:&amp;quot');
              document.getElementById('div2').setAttribute('style','display:none');
  
          }
          function displayDiv2(){
              document.getElementById('div1').setAttribute('style','display:none');
              document.getElementById('div2').setAttribute('style','display:&amp;quot');  
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="entireContent"&gt;
          &lt;input type="radio" name="group" value="t1" onclick="displayDiv1()"&gt;TEST 1&lt;br&gt;
          &lt;input type="radio" name="group" value="t2" onclick="displayDiv2()"&gt;TEST 2&lt;br&gt;
          &lt;div id="div1"&gt;TEST 1&lt;/div&gt;
          &lt;div id="div2"&gt;TEST 2&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Resources Referred:-
  <a href="http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm" rel="nofollow">http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm</a></p>
  
  <p>I tried the approach provided in the resource, it didn't work.</p>
  
  <p>Please help me to resolve this issue.
  Thanks in Advance.</p>