We've got this problem with beta3, I don't think we had it in beta2.

On page load the div which has PIE attached is shrunk, hover over it and it will expand to it's correct size.

example

Does anyone know how to fix this?

can anyone help with this one?

cheers

This might be related to the inline script block near the top of that section (which does a document.write of another script tag which loads an empty js file... ?) You might try removing that and see if it clears up the problem. If it does, please report back here so I can make sure and address that issue in the future.

Thanks for the reply. That js is some tracking code but it's not causing the problem, this page also has the same problem

http://tinyurl.com/5uok37n

Ok thanks for trying that at least.

This looks like a bug in IE where it's either reporting an incorrect height for the li, or reporting its height before its contents have finished rendering and then not firing the onresize event to let PIE know it has changed. Other users have seen problems like this but there doesn't seem to be a solid pattern to when or why it happens.

I have two things for you to try:

1) add zoom:1 to the styles for that pod element, this should force hasLayout on it from the start instead of letting PIE do it when it loads, and might make it track height changes better

2) the last resort: add a javascript function when the page finishes loading that makes a change to the element so PIE will recalculate its size. This has the same effect as mousing over the element which you've seen makes it correct itself. Using jQuery, something like:

thanks Jason, the latter worked

I wonder if this has something to do with Modrnizr? I ran into the disappearing header problem in IE7 only after I removed HTML5shiv and added Modrnizr. When I switched back, it stopped happening. I didn't change anything else.

The header has a -pie-background set. With Modrnizr, the header would only appear in IE7 after I moused over it (although the small part of the header above the first element contained in the header was always visible).

I've switched the scripts back and forth a few times and it seems to be consistent. Not sure if this is related to everyone else's problems with this, just thought I'd point it out in case it helps anyone. I fixed the problem for myself by using HTML5shiv.

EDIT

I saw the problem pop up with HTML5shiv too, so I can't say what was going on. I tested it again by switching the scripts and doing SHIFT+Refresh and it happened again the way I originally described it, so there might be some correlation. Anyway, I fixed it with the function provided, thanks Jason!

Hi,
I've got the exactl same problem but neither the zoom nor the js solved it.

I had a similar problem where a rounded <li> with box-shadow was offset vertically. For me, the "fix" was to set the border-width to 0px for IE. Using beta4.