z-index IE8 not working, while in FF it is
Question
i'm stuck with a problem related to z-index in IE8.
Here's the fiddle:
http://fiddle.jshell.net/uFPBz/show/
The first problem is that the issue I want to show you is working in the fiddle, there's something I can't see that is fixing it.
However, if I save that entire fiddle page and open in IE8, the problem comes back. So, i'm like WTF?
When you mouseover the preview image, a bigger one shows up. But the bottom of this LARGER PREVIEW hides behind the SMALL IMAGE of the BOX that is below the mouseover'd Box.
This only happens in IE8, the largerPreviewBox has z-index of 3, while the ImgThumbBox has z-index of 2.
Reading this: http://caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/ and this IE 6 & IE 7 Z-Index Problem I see it these z-index properties are irrelevant because they are in other levels. But I don't know how to fix it.
Will be better if you download the HTML and see it by yourself:
http://www.filefactory.com/file/417sp9zi1lhp/n/HTML_Error_tar_gz
Thanks a lot!
Edit:
Image of the problem:
2 answers
solution1
2 ACCPTED 2012-08-29 13:22:15
update the doctype
it will work fine.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
i tested on ie8
else you can press f12 and check your browser mode and document mode :-)
solution2
1 2012-08-27 17:53:53
You can accomplish your task only with CSS and with less HTML lines. See the JSFiddle .
In your case the HTML is:
<div class="container">
<img src="imagenes/thumb.jpg" alt="Miniatura">
</div>
and you can use this CSS:
div.container{
position:relative;
display:inline-block;
float:left;
width: 122px;
height: 160px; }
div.container > img {
position:relative;
width: 122px;
height: 160px;
display:block;}
div.container > img:hover {
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -175px;
width: 300px;
height: 350px;
border:1px solid black;
//use other styles....
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.