0

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;
}
3
Contributors
4
Replies
5
Views
7 Years
Discussion Span
Last Post by Member 784625
0

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

0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.