ml-tsai / curved-corner

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

Rounded Corner does not get rendered if top level div has background image. #42

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago
What steps will reproduce the problem?
1. The parent div has a background image.
2. As soon as the filter loads the background color vanishes.

What is the expected output? What do you see instead?
The rounded corner box should come above the image. Only the inner text is 
visible and not the background color with the rounded corners

What version of the product are you using? On what operating system?
I am using the latest version of the product and i am using Windows XP with IE8

Please provide any additional information below.
For a demo you can navigate to C:\Documents and 
Settings\SWF\Desktop\coupon-html\index.html, it works well in all other major 
browsers.

Original issue reported on code.google.com by linuxdom...@gmail.com on 23 Jun 2010 at 6:38

Attachments:

GoogleCodeExporter commented 8 years ago
It's a shame about that local demo...

Anwyay, I was able to fix this:
on line 66, there's the following if clause:

    if (isNaN(el_zindex)) { el_zindex = 0; }

For some reason in IE8 (but not in 7 or 9) the parent element's z-index: is 
undefined. There are two ways to fix this:

1. Explicitly set the parent's z-index (making sure to specify the parent's 
position: as well)
2. Modify this line of the .htc to have a higher base z-index:

The later is very hackish, but it worked for me.

Original comment by gavin.an...@gmail.com on 26 Oct 2010 at 2:11

GoogleCodeExporter commented 8 years ago
You can fix this by adding the following css to the div with the background 
image: 
z-index: -1;
position: relative;

Original comment by kimtur...@gmail.com on 11 Apr 2011 at 4:37

GoogleCodeExporter commented 8 years ago
Thanks for your tip.
i was having a similar problem: my menu was 'disappearing' and i couldnt figure 
out why. 
In the end i did #wrapper {position:relative; z-index:1;} 
And on the #menu {position:relative;z-index-1;}

Original comment by jcwebb...@gmail.com on 14 Apr 2011 at 11:45