internet explorer - z-index in IE not working -
i have simple illustration here: http://jsfiddle.net/v97tf/1/ . need absolutely position links on image reason z-index isnt working in ie :( can please help?
thanks in advance!
code:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <style> #map { float:left; position:relative; } #map img { position:relative; z-index:9; } #map .links { position:absolute; width:100%; height:100%; z-index:10; top:0; left:0; } #map .links li { width:60px; height:25px; position:absolute; } #map .links { display:block; height:100%; width:100%; } .karlovy-vary { left:41px; top:87px; } .plzen { left:60px; top:143px; } .usti-nad-labem { left:110px; top:42px; } .ceske-budejovice { left:130px; top:226px; } .liberec { left:193px; top:34px; } .hradec-kralove { left:243px; top:88px; } .pardubice { left:244px; top:132px; } .jihlava { left:241px; top:183px; } .brno { left:314px; top:210px; } .olomouc { left:353px; top:156px; } .zlin { left:397px; top:204px; } .ostrava { left:400px; top:134px; } </style> </head> <body> <div id="map"> <img src="http://placekitten.com/501/291"> <ul class="links map1"> <li class="karlovy-vary"><a href="#"></a></li> <li class="plzen"><a href="#"></a></li> <li class="usti-nad-labem"><a href="#"></a></li> <li class="ceske-budejovice"><a href="#"></a></li> <li class="liberec"><a href="#"></a></li> <li class="hradec-kralove"><a href="#"></a></li> <li class="pardubice"><a href="#"></a></li> <li class="jihlava"><a href="#"></a></li> <li class="brno"><a href="#"></a></li> <li class="olomouc"><a href="#"></a></li> <li class="zlin"><a href="#"></a></li> <li class="ostrava"><a href="#"></a></li> </ul> </div> </body> </html>
i able working in net explorer 8 background-image hack (see answers this question). transparent background images didn't seem work in particular case. liked mdmullinax's solution:
background-color: #fff; filter: alpha(opacity=0); but if need content of anchors visible, can utilize 1 of dio f's solutions:
background-image: url("about:blank"); but aware if utilize solution, dio f said gives mime-type warning in chrome due wrong mime-type of about:blank document.
i should putting border on both #map .links li , #map .links a reveals link not in exact same position list item, @ to the lowest degree in net explorer 8. can fixed adding position: absolute; #map .links a.
internet-explorer z-index
No comments:
Post a Comment