-1

I am trying to make my web page look better in IE7. It is very frustating.

One of the problems I have found is pictured below. When following a link to a page, the rendering sometimes breaks in weird ways - below, it seems like the margins are off, and colour is missing. However, if you refresh the page, this issue clears up. If you refresh the page lots and lots of times, it doesn't break again - rendering is only bad on the first view of the page, after clicking a link or typing the URL into the address bar.

Do you have any idea why this might be? I am using css3pie to do background gradients and rounded borders, so the issue might be from here. Alternatively, is this an IE bug I don't know about?

My site renders OK in IE8, which also has to use css3pie to do gradients + borders.

EDIT: If you zoom the page, this rendering problem fixes. Some stuff I have read seems to indicate that this is a known problem for some rendering in IE6/IE7, but I can't work out how to fix it.

Appearance before refreshing Appearance after refreshing

Oliver
  • 11,297
  • 18
  • 71
  • 121
  • Are you sure all of the resources (ie. images, css files, javascript) are being loaded correctly in that first page load? – cdeszaq Feb 08 '12 at 15:31
  • @cdeszq It's hard to be certain, but the page is loading correctly in all other browsers, so I assume so. How can I check? – Oliver Feb 08 '12 at 16:15
  • is it always when that page first loads or after you have made an adjustment? – PAULDAWG Feb 08 '12 at 16:32
  • @PAULDAWG Always when the page loads, even after clearing browser cache. – Oliver Feb 08 '12 at 16:52
  • That is odd. Maybe it's a race condition onload? is your menu loaded into some sort of variable or something that is loaded into a session variable of sorts? could be that the page loads before that operation is complete and then on refresh the resource is there. (wild guess i know, but its a wild problem) – PAULDAWG Feb 08 '12 at 16:58
  • check for some embeds with empty src attributes as this question seems similar http://stackoverflow.com/questions/1261186/page-doesnt-fully-load-in-ie7-or-ie8-but-works-in-other-browsers – PAULDAWG Feb 08 '12 at 17:01
  • @PAULDAWG There are none of these things are fixing it. I think it must be some kind of bug with the css: zooming in and out on the page (ctrl+ mousewheel) fixes the rendering. I tried putting `zoom:1;` for all elements on the page, but this doesn't fix it. – Oliver Feb 09 '12 at 11:10
  • Is there a live example of this problem to look at? – PAULDAWG Feb 09 '12 at 16:26
  • @PAULDAWG Thanks for your help, I think I've cracked it now. It's something to do with a hack css3pie uses to detect position changes ocassionally making top margins disappear: http://css3pie.com/documentation/known-issues/#hasLayout – Oliver Feb 09 '12 at 16:56

2 Answers2

0

I solved this problem by writing:

 <!--[if lte IE 7]>
<style type="text/css">
div {
    position:relative;
}
</style>
<![endif]-->

At the top of the page. I can't quite work out why this issue occurs - I think there is a bug in the rendering engine for IE7 that means that the css3 elements generated by css3pie are not given the correct margin. Another solution is to use padding instead of margin.

I can't work out why the issue would fix itself after refreshing.

Oliver
  • 11,297
  • 18
  • 71
  • 121
  • I wonder if `position:static` would fix it too since that is the default. Glad you found a fix to this! – PAULDAWG Feb 09 '12 at 17:40
0

Turn off the HTC file caching in Apache

LocationMatch ".*\.htc"
Header Set Cache-Control "no-cache"
/LocationMatch
Peter O.
  • 32,158
  • 14
  • 82
  • 96
Daan
  • 1