ie7 absolute positioning issue

[cloud09]

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">
			&nbsp;
		</div>
                <div id="content-right">
			&nbsp;
		</div>
        </div>

And the css for the corners:

.corner {
	position: absolute;
}
.t {
	top: -2px;
}
.b {
	bottom: -2px;
}
.l {
	left: -2px;
}
.r {
	right: -2px;
}

[colweb]

Did a search with Google and it looks like IE7 is doing the right thing. On a lot of sites there are complains about absolute positioning in IE8. Seems it is not working the way it should.
While searching found this site: http://msdn.microsoft.com/en-us/library/ms533005%28VS.85%29.aspx. Maybe it will help you solve the problem.

[cloud09]

This site really didn't tell my anything I already didn't know...

[colweb]

Don't know if you already solved it but if you take a look here http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/ bugs 84 and 89 seems related to your problem. Unfortunate they don't give a ready to implement solution.
So it seems to me, your code is correct but the browser can't handle it.

[Member 784625]

Older thread but maybe can help future searchers.

You must trigger the haslayout property in ie7 so that it will redraw after the page changes.

you can trigger the haslayout by adding overflow:hidden; to the containing div that you already have relatively positioned.