Question

There is structure. ad is positioned relative. And the all other divs in div.ad positioned absolute.

top-left, bottom-left, top-right, bottom-right styles looking as it should. But “inside”, “left”, “right”, “top”, and “bottom” styles not working.
left, right dont have specific heights and top, bottom dont have specific widths and inside dont have both bec div.ad’s height and width expandable.

Its working on IE 7,8,9 Opera 10.50+, Chrome and Firefox

Modern browser screenshot http://i56.tinypic.com/2ia8tj5.png
IE6 Screenshot http://i54.tinypic.com/2yozvar.png

<div class="ad">
    <div class="bottom"></div>
    <div class="top-left"></div>
    <div class="left"></div>
    <div class="bottom-left"></div>
    <div class="top"></div>
    <div class="inside"></div>
    <div class="top-right"></div>
    <div class="right"></div>
    <div class="bottom-right"></div>
</div>

.ad {
    color: #606060;
    position: relative;
    padding: 12px;
    min-height: 55px;
    min-width: 246px;
    margin: 0 0 10px 0;
}
/*Side Start*/
.top {
    top: 0;
    left: 11px;
    right: 10px;
    position: absolute;
    height: 11px;
}
.right {
    top: 11px;
    right: 0;
    bottom: 9px;
    position: absolute;
    width: 10px;
}
.bottom {
    bottom: 0;
    left: 11px;
    right: 10px;
    position: absolute;
    height: 9px;
}
.left {
    left: 0;
    top: 11px;
    bottom: 9px;
    position: absolute;
    width: 11px;
}
/*Side End*/
.inside {
    position: absolute;
    background-color: #f7f6f6;
    top: 11px;
    right: 10px;
    bottom: 9px;
    left: 11px;
}
/*Corners Start*/
.top-left {
    top: 0;
    left: 0;
    position: absolute;
    background-image: url('/images/DiseaseAds/border-top-left.png');
    background-repeat: no-repeat;
    width: 11px;
    height: 11px;
}
.top-right {
    right: 0;
    top: 0;
    position: absolute;
    width: 10px;
    height: 11px;
}
.bottom-left {
    bottom: 0;
    left: 0;
    position: absolute;
    width: 11px;
    height: 9px;
}
.bottom-right {
    bottom: 0;
    right: 0;
    position: absolute;
    width: 10px;
    height: 9px;
}
/*Corners End*/

Answer 1

IE6 doesn’t support both left and right on an element, or both top and bottom. You can achieve the same result using a CSS expression, but it is slow and requires scripting to be enabled:

left: 11px;
width: expression((this.parentNode.offsetWidth - 11 - 10) + 'px');

You can use a “sliding doors” technique to get an image-based top or bottom border without as many elements and without script; in short the left hand-corner and top are the background of the main div and the right-hand side is the background of a small absolutely positioned div.