I have a containter div that uses rounded corners. For chrome, FF, and Safari, I simply use the CSS properites. But for IE, which doesn't support those, I have images that are absoutely positioned in each corner. The container div is resized by both js and by its child elements when the page loads. In IE8, the images reposition to the new corner positions. However in IE7, they stay in their original positions. Is there a way to have IE7 update the position of the corners after the div has been resized. Here's some of the code:
<div id="mainContent">
<!--[if IE]>
<img src="styles/backgrounds/corner_tl.jpg" width="21px" height="21px" alt="" class="corner t l"/>
<img src="styles/backgrounds/corner_bl.jpg" width="21px" height="21px" alt="" class="corner b l"/>
<img src="styles/backgrounds/corner_tr.jpg" width="21px" height="21px" alt="" class="corner t r"/>
<img src="styles/backgrounds/corner_br.jpg" width="21px" height="21px" alt="" class="corner b r"/>
<![endif]-->
<div id="content-left">
</div>
<div id="content-right">
</div>
</div>And the css for the corners:
.corner {
position: absolute;
}
.t {
top: -2px;
}
.b {
bottom: -2px;
}
.l {
left: -2px;
}
.r {
right: -2px;
}