robwob209 / curved-corner

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

Background disappears #59

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
What steps will reproduce the problem?
1. Using the border-radius.htc file

What is the expected output? What do you see instead?
Expected: div with rounded corners with the color of yellow
Instead: when the script run, the background change to white, don't know if 
there is any rounded corners

What version of the product are you using? On what operating system?
border-radius.htc v3 and IE8

Please provide any additional information below.
have no clue what the problem could be, any help is appreciated!!! (works great 
in IE and Chrome)

Original issue reported on code.google.com by hent...@gmail.com on 23 Sep 2010 at 11:28

GoogleCodeExporter commented 9 years ago
hentoft,

This is probably a bit late, but I just downloaded it and ran into a similar 
problem. In my case, I found that the image I was adding the rounded corners 
to, fell behind the the background.  At the moment I'm trying to play around 
with z-index, but no luck yet.

Original comment by uglymu...@gmail.com on 20 Dec 2010 at 6:40

GoogleCodeExporter commented 9 years ago
ok, so for anyone who has a problem where the image with the desired rounded 
corners falls behind any ancestor, the fix is to give the ancestor a position 
relative (fixes in IE7).  For IE8, set the ancestor z-index to -1.

See here for an explanation of the problem:
http://css3pie.com/documentation/known-issues/#z-index

Original comment by uglymu...@gmail.com on 20 Dec 2010 at 7:09

GoogleCodeExporter commented 9 years ago
This quick hack solved the issue for me. It changes the script so the VML is 
always inserted into the BODY element, instead of a child of the target element.

Change line 60 from:

while ((typeof(el) != 'unknown') && (el.currentStyle.position != 'relative') && 
(el.tagName != 'BODY')) {

to:

while ((typeof(el) != 'unknown') && (el.tagName != 'BODY')) {

Might screw up your layout or not work at all in cases, but it did the trick 
for me on several (nested) elements with position:relative.

Original comment by hong...@gmail.com on 7 Feb 2011 at 12:15