miyakosama / curved-corner

Automatically exported from code.google.com/p/curved-corner
0 stars 0 forks source link

z-index fails in IE8 #32

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago
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.

Original issue reported on code.google.com by k...@infinitends.net on 12 Mar 2010 at 1:28

GoogleCodeExporter commented 8 years ago
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

Original comment by alex.fai...@gmail.com on 8 May 2010 at 7:09

GoogleCodeExporter commented 8 years ago
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.

Original comment by staeu...@gmail.com on 5 Mar 2012 at 5:32