Home/ Questions/Q 1046297
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T16:07:29+00:00

Okay, I’ll be the first to admit that i’m quite terrible when it comes

  • 0

Okay, I’ll be the first to admit that i’m quite terrible when it comes to css, but I try… 😀
I have this JS Function which I use to create rounded corners using images, instead of the standard div in div in div way. I know there are better ways, but this is how i’ve done it:

function applyHorizontalImageCornersSpecific(div, left, middle, right, leftWidth, rightWidth, height, type) {
    var title = div.html();
    div.html("");
    div.append('<div>' + title + '</div>');
    div.css("position", "relative");
    div.css("z-index", "2");
    div.prepend('<img src="' + left + '" style=" position:absolute; width:' + leftWidth + ';z-index:-1;"/>');
    div.prepend('<img src="' + middle + '" style=" position:absolute;z-index:-2; width:100%; height:' + height + '; "/>');
    //div.prepend('<div style="position:relative; margin-left:' + leftWidth + ';margin-right:' + rightWidth + ';"><img src="' + middle + '" style="position:absolute;z-index:-2; width:100%; height:' + height + '; "/></div>');
    div.prepend('<img src="' + right + '" style=" position:absolute; width:' + rightWidth + '; right:0px;z-index:-1;"/>');
    div.css("height", height);
}

div is the div object being passed to the function $(“#divid”) for example.
left, middle and right are the image locations.
leftwidth, rightwidth and height are pretty self explanitory.

Now the problem – Using IE 8, the div(which is a rounded title bar) draws perfectly when using the commented out line 

div.prepend('<div style="position:relative; margin-left:' + leftWidth + ';margin-right:' + rightWidth + ';"><img src="' + middle + '" style="position:absolute;z-index:-2; width:100%; height:' + height + '; "/></div>');

and the active line 

div.prepend('<img src="' + middle + '" style=" position:absolute;z-index:-2; width:100%; height:' + height + '; "/>');

But IE 7 only works with the active line.

The left and middle images are drawn in IE 7 but not the right image and the div content(title).

The active line for both IE 7 and IE 8 renders the left and right images usless as they both(left and right) sit over the center image, so any transparency only shows the center image and not the body background.

Any and All help is, as usual, really appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    While i’m sure this won’t help anyone – for completeness my solution was to set the z-index on the appended div instead of the passed div:

    function applyHorizontalImageCornersSpecific(div, left, middle, right, leftWidth, rightWidth, height, type) {
    var title = div.html();
    div.html("");
    div.append('<div style="z-index:5">' + title + '</div>');
    div.css("position", "relative");
    div.prepend('<img src="' + left + '" style=" position:absolute; width:' + leftWidth + ';z-index:-1;"/>');
    div.prepend('<div style="position:relative; margin-left:' + leftWidth + ';margin-right:' + rightWidth + ';z-index:-2;"><img src="' + middle + '" style="position:absolute; width:100%; height:' + height + '; "/></div>');
    div.prepend('<img src="' + right + '" style=" position:absolute; width:' + rightWidth + '; right:0px;z-index:-1;"/>');
    div.css("height", height);
}
    • 0