Export to GitHub

curved-corner - issue #32

z-index fails in IE8


Posted on Mar 12, 2010 by Massive Monkey

What steps will reproduce the problem? 1. In example border-radius.html, add a background color to the .rel CSS declaration.

What is the expected output? The rounded-corner elements as displayed in the unaltered border- radius.html.

What do you see instead? .box1 - no borders, no background color .box2 - not visible (text content is visible with contrasting background color for the parent element) .box3 - no background color

What version of the product are you using? Current.

On what operating system? Windows XP Pro SP3; Windows Vista Ultimate SP1; Windows 7 Professional; Windows Server 2003 R2

Please provide any additional information below. Modify the CSS declarations for the border-radius.html included in the examples zip to add a background-color to the .rel element. No other changes are needed to duplicate this problem.

The .htc calculates the z-index of the rounded-corner element to (X)-1, making it lower than that of the parent element (the .rel <div> in this case) and placing it behind the parent element when the page renders.

Also reproduced in other mark-up pages, but since it is easily reproduced in the included demo mark-up, just use it.

Comment #1

Posted on May 8, 2010 by Happy Kangaroo

I have found a workaround for this, that worked in my project, hopefully it can help others.

Make the problem containing element itself rounded, and all is well. to further the above example, add

border-radius: 15px; behavior: url(border-radius.htc);

to the .rel class, and the elements show normally

Comment #2

Posted on Mar 5, 2012 by Swift Dog

had the same problem, so i opend the script and changend Line 65-66 from:

var el_zindex = parseInt(el.currentStyle.zIndex); if (isNaN(el_zindex)) { el_zindex = 0; }

to: //var el_zindex = parseInt(el.currentStyle.zIndex); var el_zindex = 1000; if (isNaN(el_zindex)) { el_zindex = 0; }

Maybe Ie7-8 don't deliver the correct z-index level. With this i pushed it in front of all. but sadly it seems not to be possible to put anything else in front. Not even the Text contained in the original Element. Yes i tried lowering the z-index value. I'll comment again if i find a solution for this.

Status: New

Labels:
Type-Defect Priority-Medium