IE 7 CSS Issues

Question

Okay, I'll be the first to admit that i'm quite terrible when it comes to css, but I try... :D 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.

Answer 1

If you're not aware of this already, there is a rather elegant way in CSS to create a rounded corner:

-moz-border-radius: 15px; /* where the 15px is the degree of rounding */
border-radius: 15px;

This is only supported in newer browsers (IE7, for example, will still have square borders).

Additionally, I noticed you said that this was for a rounded title bar. Wouldn't it be easier if you just used a photo-editing software like GIMP or PS to create a rounded image? This would solve the problem of cross-browser compatibility as well as the problem of obtrusive JavaScript not gracefully degrading (if JavaScript is disabled, the user does not get the image!)

Answer 2

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);
}