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 CLICK
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?
This is HTML I'm using:
<div id="slide3" class="slide"> <h1>Wybierz swój lokal</h1> <div class="floor-nav"> <ul> <li><a href="#floor0" class="floor-active">0</a></li> <li><a href="#floor1" class="floor-inactive">+1</a></li> </ul> </div> <div id="floor-0" class="floor"> <img src="img/floor-0.png" /> <a href="#" target="_blank" id="flat-1" class="flat"> <span class="flat-desc">Lokal <span class="bold">45m²</span></span> </a> <a href="#" target="_blank" id="flat-2" class="flat"> <span class="flat-desc">Lokal <span class="bold">25m²</span></span> </a> </div> </div> And some css:
.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; } Do you have any ideas why is this happening?
