title: Div class displays in chrome & firefox but not IE
body: <p>Can someone help me take a look at this please, I found this similar question <a href="https://stackoverflow.com/questions/10353655/div-displays-in-firefox-safari-chrome-etc-but-not-in-internet-explorer">here</a></p>
  
  <p>but I do not understand how it works and what does poly-fill.</p>
  
  <p>Here is the link to my website:</p>
  
  <p><a href="http://mojogobbles.com.sg/cupcake-menu/" rel="nofollow noreferrer">http://mojogobbles.com.sg/cupcake-menu/</a></p>
  
  <p>Here is my css coding for the div class and also the html/php</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#f1{
   width: 100px;
   height: 50px;
   left: 370px;
   top: 450px;
   background:black;
   position: absolute;
   opacity:0;
   filter: alpha(opacity=0);
   float: left;
   -webkit-transition: 1s all;
   -moz-transition: 1s all;
   transition: 1s all;
   }
  #f1:hover {
   background:url(images/flavours/f1.jpg);
   width: 320px;
   height: 320px;
   opacity:100;
   filter: alpha(opacity=100);
   float: left;
   position: absolute;
   }
  </code></pre>
  
  <p><strong>HTML/PHP</strong></p>
  
  <pre><code>&lt;div id="f1"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The div class is not appearing in IE, please help!</p>
  
  <p>Many thanks in advance!</p>