title: Styled Anchor tags( <a> ) disappear after being clicked on IE 8 and lower
body: <p>Good day, to stackoverflow community. I have run into a bug with regard to html, css and Internet Explorer. </p>
  
  <p>Styled  tags are used as a filter of sorts. They look and act like buttons, the functionality works fine on Chrome and Mozilla but graphical errors appear once these  tags are clicked on IE. </p>
  
  <p>On IE9 the background div leaks into the images of the styled tags (after much testing I found that this was caused by the Layout values offset changing once the item has been clicked.)</p>
  
  <p>On IE8 and IE7 the tags simply disappear completely once clicked, It will run the onclick process and finnish running it (we change the class="" attribute to change appearance on click and hover according to the css) but after that completes it simply removes the visual element completely on the front end (according to layout the width and height are both changed to 0 and the margin values are changed to auto). P.S. only the clicked element is affected.</p>
  
  <p>2  tag examples of the affected elements.</p>
  
  <pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
   &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
   &lt;head&gt;
   &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
   &lt;link href="styles/screen.css" rel="stylesheet" type="text/css" /&gt;
   &lt;/head&gt;   
      &lt;body&gt;
         &lt;a id="virginActiveTag" class="vaOff" href="#"     onclick="tagClick('virginActiveTag')"&gt;&lt;/a&gt;
         &lt;a id="laFitnessTag" class="lafOn" href="#"     onclick="tagClick('laFitnessTag')"&gt;&lt;/a&gt;  
      &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>Example of styling for one of the elements.</p>
  
  <pre><code> a.vaOn:link {margin:0 10px 10px 0px;display:inline-block;width:200px;height:95px;background:#fff url(../images/logos_va_on.gif) no-repeat 0 -8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-moz-box-shadow: 0 0 5px 5px #5c822a;-webkit-box-shadow: 0 0 5px 5px#5c822a;box-shadow: 0 0 5px 5px #5c822a;}
   a.vaOff:link {margin:0 10px 10px 0px;display:inline-block;width:200px;height:95px;background:#fff url(../images/logos_va_on.gif) no-repeat 0 -110px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
   a.vaOff:hover {background:#fffffe url(../images/logos_va_on.gif) no-repeat 0 -8px;}
  </code></pre>
  
  <p>Link to finalized site: <a href="http://pru-partnerfinder.appspot.com/" rel="nofollow">http://pru-partnerfinder.appspot.com/</a></p>
  
  <p>I believe that it has something to do with the hasLayout property that IE allocates to certain elements. But am not completely sure. I have tried to physically hard code the elements back to their original sizes in the onclick event but it does not accept the new values and only the margin in ie8 gets set properly. </p>
  
  <p>Thanks for any help beforehand. I'm simply at stumped, could anyone assist?</p>