Ie 7-9 not displaying position:absolute correctly
I have a div with z-index:1-100(changes with javascript) and position:absolute. inside that i have an a href with z-index:101 and position:absolute.
All webbbrowsers renders this as the one with 101 is displayed on top (correctly) but in ie 7-8-9 it doesnt... why is that? Could really use some help here!!
CODE:
<div id="bannerad">
<a target="_blank" style="position:absolute;z-index:101;width:680px;height:120px;" class="mcdFade" href="http://www.mcdonalds.se"></a>
<div id="fadea" style="position:absolute;visibility:hidden;"><img src="Images/Ads/McDHstad/1.jpg" width="800" height="120" alt="Fade"/></div>
<div id="fadeb" style="position:absolute;visibility:hidden;"><img src="Images/Ads/McDHstad/2.jpg" width="800" height="120" alt="Fade"/></div>
<div id="fadec" style="position:absolute;visibility:hidden;"><img src="Images/Ads/McDHstad/3.jpg" width="800" height="120" alt="Fade"/></div>
</div>
EDIT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
generated by visual studio
EDIT 2 Added jsfiddle http://jsfiddle.net/Pesmd/18/ but cant get it to work, you only see the image slightly, it works in my browser though
Edit 3 This seems to be a major problem in IE, i have tried the solutions i found without result. Is there no1 here that can help me with this problem?
What i know, the z-index property resets when you have a parent with a posi开发者_运维知识库tion other then default set to them, but i still cant get it to work.
set anchor to display:block see if that works. Then add a big 3px green border on the element when your testing so you can see it better.
Why not just wrap your link around the divs?
<div id="bannerad">
<a target="_blank" style="position:absolute;z-index:101;width:680px;height:120px;" class="mcdFade" href="http://www.mcdonalds.se">
<div id="fadea" style="position:absolute;visibility:hidden;"><img src="Images/Ads/McDHstad/1.jpg" width="800" height="120" alt="Fade"/></div>
<div id="fadeb" style="position:absolute;visibility:hidden;"><img src="Images/Ads/McDHstad/2.jpg" width="800" height="120" alt="Fade"/></div>
<div id="fadec" style="position:absolute;visibility:hidden;"><img src="Images/Ads/McDHstad/3.jpg" width="800" height="120" alt="Fade"/></div>
</a>
</div>
Edit: I looked at your fiddle and made it work. It's a different design than you were going for, but it's simple and gets the job done without having to worry about z-index: http://jsfiddle.net/kCsvG/3/
加载中,请稍侯......
精彩评论