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:

Error with IE 8 z-index

its working fine in ie8 as well can you please attach snapshot ? what is your exact problem — supersaiyan, Aug 28 '12 at 14:11
hey dude.just change the doctype .your browser mode is ie8 and document mode is quirks. if you will change the document mode quirk to ie8 your design will be fine — supersaiyan, Aug 29 '12 at 03:35
`z-index` doesn't affect elements with `position:static` which is the **default position**. In your CSS you didn't modify the position of `.previewImgBox` so it's still static, thus it isn't affected by z-index. (I am not sure if this would fix your problem, as I don't access to any Internet Explorer version to test this which is why I didn't put this as an answer) — Dan, Aug 29 '12 at 11:24
@SACHIN Thanks, I don't know if the doctype is in the rar (I've modified it so it doesnt have the header), but the original, in the image I attached, has this: ** ** — JorgeeFG, Aug 29 '12 at 13:04
you having the right doctype . did you try this on browser by change doctype is it working fine after document mode change ? — supersaiyan, Aug 29 '12 at 13:06
@Dan I have positioned the element: **.docBox .largerPreviewBox { width: 300px; height: 350px; position: absolute;...** — JorgeeFG, Aug 29 '12 at 13:12
@SACHIN I already have that doctype, in firefox it works OK, the problem is IE. Thanks for trying to help, you need anything from me? Like the original HTML or something. I've removed the doctype just to get on quirks mode and still same behaviour. — JorgeeFG, Aug 29 '12 at 13:12
@SACHIN I emailed you, forgotten to re-add the doctype. Thanks! — JorgeeFG, Aug 29 '12 at 13:18

supersaiyan · Accepted Answer · 2012-08-29T13:56:36.860

2

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 :-)

edited Aug 29 '12 at 13:56

answered Aug 29 '12 at 13:22

supersaiyan

1,670
5
16
36

Thanks for the help, Indeed it was being opened as IE 8 Compatibility Mode (I seen it by pressing F12, I don't have the icon don't know why), so Document mode was IE 7. Seems that it's being opened that way by default. If you could tell me why is this? Or how to solve? THanks! – JorgeeFG Aug 29 '12 at 14:00
i think you should reinstall your ie and remove cache because your code is totally fine.I tried – supersaiyan Aug 29 '12 at 14:07
I've found the solution. Compatibility Mode in IE 8 was activated for Intranet Sites by default, so my Y:\websites\demo was being opened as Intranet Site, ergo in Compatibility Mode (IE 8) and displayed as IE 7 Document. Your help is much appreciated, thanks to you I've solved my problem so the bounty goes for you. – JorgeeFG Aug 29 '12 at 14:08

JeanValjean · Answer 2 · 2012-08-27T18:01:27.833

1

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....
}

edited Aug 27 '12 at 18:01

answered Aug 27 '12 at 17:53

JeanValjean

17,172
23
113
157

Thanks, I used another Div because I want to add some things later there... like a toolbar or something. Can I make :hover over a div? – JorgeeFG Aug 28 '12 at 18:18
@Jorge Yes you can! See this [JSFiddle](http://jsfiddle.net/ShFWz/) to get a couple of examples... Notice that I only provided an example with my solution, because it is important that you get the point, not a working solution for the case at hand! If you change the page content, layout and so on you must be confident with the concepts. I hope it helped! – JeanValjean Aug 28 '12 at 19:35

z-index IE8 not working, while in FF it is

2 Answers2