title: Hover not working in Internet Explorer
body: <p>I'm trying to make a website compatibile to >IE8 (including IE). It turns out that hover effect is not working in any of IE versions. Here's my website <a href="http://jimmyweb.pl/projekty/dentmedica/" rel="nofollow">CLICK</a></p>
  
  <p>When you navigate to page "Plan" there's a map of a flat. When you hover on one of two rooms it displays blue boxes on it (in every browser but not in IE). What is the problem?</p>
  
  <p>This is HTML I'm using:</p>
  
  <pre><code>&lt;div id="slide3" class="slide"&gt;
      &lt;h1&gt;Wybierz swój lokal&lt;/h1&gt;
      &lt;div class="floor-nav"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#floor0" class="floor-active"&gt;0&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#floor1" class="floor-inactive"&gt;+1&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="floor-0" class="floor"&gt;
          &lt;img src="img/floor-0.png" /&gt;
          &lt;a href="#" target="_blank" id="flat-1" class="flat"&gt;
              &lt;span class="flat-desc"&gt;Lokal &lt;span class="bold"&gt;45m²&lt;/span&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;a href="#" target="_blank" id="flat-2" class="flat"&gt;
              &lt;span class="flat-desc"&gt;Lokal &lt;span class="bold"&gt;25m²&lt;/span&gt;&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And some css:</p>
  
  <pre><code>.flat{
      background:none;
      position:absolute;
      display:block;
      color:#ffffff;
      text-align:center;
      font-size:30px;
      text-decoration:none;
      z-index:900;
  }
  
  .flat .flat-desc{
      display:none;
      padding-left:38px;
      background:url(../img/plus-sign-white.png) left top no-repeat;
      line-height:20px;
  }
  
  .flat:hover{
      background:url(../img/flat-hover-bg.png);
  }
  
  .flat:hover .flat-desc{
      display:inline;
  }
  </code></pre>
  
  <p>Do you have any ideas why is this happening? </p>