layer problems with z-index or something like that

TheIceman5

i have a script i got from http://mondaybynoon.com/2007/01/22/crop-resize-with-javascript-php-and-imagemagick/
and its the best script ive found so far for what i need.
i have a problem with it when i use it in layers, "advanced layer popup" to be exact. http://www.dmxzone.com/ShowDetail.asp?NewsId=12769

when the crop script is put in the layer popup and run from there, when you go and crop the image in internet explorer 6 or 7 the crop area i like an xray and puts a hole through the layers to the page underneath. anyone give me any advice on how to correct this problem?
the demo above works fine, just when you combine the cropper and popup layer is where the problem starts with the xray.

bpat1434

Do you have an example (screenshots or working) of exactly this issue we can look at?

Are you using absolutely positioned elements? If not, then it's not a z-index issue as only positioned elements (non-relative) can have z-index. Otherwise, you have to fix the layering within the HTML itself.

TheIceman5

see attached image, there isnt a demo to show anyone online as yet so ive done a photoshop demo of it as if the cropper were in this forum.
you see the cropping area how its like an xray. when the cropper is not in the dhtml popup window its fine, you can see the image you are trying to crop within the cropper without the xray.
i have found some z-index values and adjusted these from 0 to 55000 with no luck, they had no effect either way.

bpat1434

z-index is from 0 - 99.....

I'm not sure, but it would seem like the image and the "crop" div is on the same layer and the crop div doesn't have a background giving the "cut-out" effect. Try adding a background-color to the crop, something like #ffffff with an opacity of like 50%. See if it still cuts it out, or if it shows the image below it.

TheIceman5

bpat1434 wrote:
z-index is from 0 - 99.....

I'm not sure, but it would seem like the image and the "crop" div is on the same layer and the crop div doesn't have a background giving the "cut-out" effect. Try adding a background-color to the crop, something like #ffffff with an opacity of like 50%. See if it still cuts it out, or if it shows the image below it.

oh yeah, forgot to mention that, that is how it is originally set up, background of white and its made transparent 50% or something. when its in the popup layer the transparency doesnt seem to work and its solid white so instead of an xray you get a white square. the transparency is either 100% or 0% and not inbetween for some reason. take the back colour away and your left with the xray in the image above, leave it there and its solid white.

bpat1434

Right.... what does the CSS for the transparency look like? It should be something like:

#crop {
  z-index: 99;
  background-color: #fff;

  opacity: .50;
  -moz-opacity: .50;
  filter: alpha(opacity=50);
}

TheIceman5

no this is the part that controls the crop area that is the problem of xray. for some reason, change the #FFF to #FFFFF and the crop area is not longer dragabble, its fixed solid. remove the width and the height and same thing, nor draggable except from the borders. its a funny script.

.imgCrop_clickArea { width:100%; height:100%; background-color:#FFF; opacity:0.01; filter:alpha(opacity=01); }

other parts are

/* fix for IE displaying all boxes at line-height by default, 
although they are still 1 pixel high until we combine them with 
the pointless span */
.imgCrop_wrap, .imgCrop_wrap * { font-size:0; }
.imgCrop_overlay { background-color:#000; opacity:0.5; filter:alpha(opacity=50); position:absolute; width:100%;	height:100%; }
.imgCrop_selArea { position:absolute; cursor:move; z-index:2; }

/* clickArea is all a fix for IE 5.5 & 6 to allow the user to click on the given area */
.imgCrop_clickArea { width:100%; height:100%; background-color:#FFF; opacity:0.01; filter:alpha(opacity=01); }
.imgCrop_marqueeHoriz { position:absolute; width:100%; height:1px; background:transparent url(../images/marqueeHoriz.gif) repeat-x 0 0; z-index:3; }
.imgCrop_marqueeVert { position:absolute; height:100%; width:1px; background:transparent url(../images/marqueeVert.gif) repeat-y 0 0; z-index:3; }

bpat1434

i honestly have no idea. Have you taken this to the creators of it?

TheIceman5

ive taken it to one with no reply, i will try another.

Ichiro

It's a "design feature" of IE. You get a similar effect if you try to position an absolute positioned element over an "input" element such as a select element.

One thing that you can do that is cheap and dirty is that for IE only, open up an iFrame exactly the same size as the pop-in but lower in the z-index.

VERY dirty and not actually so cheap but it is effective and nothing else I know of will fix it.