0

i build an hover-effect using CSS only. It works fine in all browsers except IE7.

Visit the page or view a screenshot.

As i read, it's because:

In Internet Explorer versions 6 and 7, the stacking order of z-indexed elements is essentially “reset” for any elements that are contained by a positioned element, regardless of wether or not the container (or parent) has a z-index value set. In other words, an element with a z-index value of 100 will appear underneath an element with a z-index value of 1 if the former element is contained by a positioned parent, and the latter is not. This is an incorrrect implementation of the z-index property that has evidently been corrected in IE8.

But how can i fix this IE7-bug?

Kara
  • 6,115
  • 16
  • 50
  • 57
Katzenfresser
  • 83
  • 1
  • 6
  • Deleted the experiment fixing the bug with jQuery! There must be a solution only based on CSS, because i rebuilt the whole markup in JSFiddle and in works in all browsers: http://jsfiddle.net/WK93H/2/ Therefore we have to search the bug within the CSS. – Katzenfresser Feb 24 '11 at 20:33

2 Answers2

0

I think you may want "z-index" instead of "zIndex." I've never seen or used the "zIndex" string. However, I am not sure if this will fix your problem.

icfantv
  • 4,523
  • 7
  • 36
  • 53
  • The jQuery code seems to work. When using my debugger i can see the correct CSS put into the HTML code with jQuery ([Watch the screenshot](http://p8472.typo3server.info/stackoverflow/z-index-ie7/jQuery-ok.png)). – Katzenfresser Feb 24 '11 at 19:56
0

Try adding position:relative; to your style. z-index bug for ie7 is pretty popular. Here is a link that explains more about it.

Community
  • 1
  • 1
Amir Raminfar
  • 33,777
  • 7
  • 93
  • 123
  • All my elements unsing the `z-index` are already set so a specific `position` ([watch the css](http://www.tanz-scherg-pfaffenhofen.de/fileadmin/css/screen.css)): `.tanzlehrer-wrap { position: relative; }` and `.tanzlehrer-wrap .tanzlehrer { position: absolute; }` – Katzenfresser Feb 24 '11 at 19:44
  • Amir, my problem i a bit more complex than explained in your link. When using two nested elements both using `z-index` and `position`, IE7 displays the inner element wrong. – Katzenfresser Feb 24 '11 at 20:29