Member Avatar for 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;
}
  • 3 Contributors
  • 4 Replies
  • 106 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by Member 784625

Dani AI

Generated

This is a classic IE7 redraw/layout quirk: the absolutely positioned corner images inside a positioned container can fail to move when the container is resized by script or by dynamic content. correctly pointed to IE docs/bug lists and flagged that IE7 needs an explicit redraw/layout trigger. Two practical paths follow: force a repaint programmatically right after your resize, or remove the need for separate corner images altogether.

A small, reliable quick fix is to force a reflow/repaint immediately after your resize routine finishes. Toggling display or toggling zoom is non-destructive and works in IE7. Example (call this after any JS that resizes or inserts content):

function forceRedraw(el) {
  el.style.display = 'none';
  // force a reflow
  void el.offsetWidth;
  el.style.display = '';
}

An alternative that sometimes behaves better when you must preserve layout flicker is toggling zoom:

function forceRedrawZoom(el) {
  el.style.zoom = (el.style.zoom === '1') ? '' : '1';
}

Either function should be invoked on the container (e.g., the element with id "mainContent") immediately after the DOM changes or resize code runs.

For a longer-term fix, eliminate the extra corner images and let a robust polyfill handle rounded corners in old IE. CSS3 PIE can emulate border-radius in IE6–8, removing the need for conditional-image hacks and the redraw headaches that come with them (CSS3 PIE). Finally, verify that your corner elements are actual children of the container and that your resize code runs to completion before forcing a redraw; attach the redraw call after animations, AJAX inserts, or any code that changes layout.

Recommended Answers

All 4 Replies

Member Avatar for 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.

Member Avatar for cloud09

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

Member Avatar for 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.

Edited by colweb because: n/a
Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.