CSS3 PIE Forums
http://css3pie.com/forum/

IE7 problem
http://css3pie.com/forum/viewtopic.php?f=3&t=369
Page 1 of 1

Author:  Dave77 [ Thu Jan 13, 2011 9:35 am ]
Post subject:  IE7 problem

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?

Author:  Dave77 [ Tue Jan 18, 2011 11:05 am ]
Post subject:  Re: IE7 problem

can anyone help with this one?

cheers

Author:  jason [ Wed Jan 19, 2011 10:47 am ]
Post subject:  Re: IE7 problem

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.

Author:  Dave77 [ Fri Jan 21, 2011 4:58 am ]
Post subject:  Re: IE7 problem

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

Author:  jason [ Fri Jan 21, 2011 1:02 pm ]
Post subject:  Re: IE7 problem

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:
Code:
$(function() {
    $('div.pod').addClass('iesux');
})

Author:  Dave77 [ Mon Jan 24, 2011 8:38 am ]
Post subject:  Re: IE7 problem

thanks Jason, the latter worked

Author:  kelly [ Tue Feb 01, 2011 10:05 pm ]
Post subject:  Re: IE7 problem

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!

Author:  koskoz [ Thu Feb 03, 2011 11:57 am ]
Post subject:  Re: IE7 problem

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

Author:  MaKo [ Thu Jun 23, 2011 6:26 am ]
Post subject:  Re: IE7 problem

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.
Code:
/* General CSS */
#infobox li {
    width: 146px;
    height: 136px;
    margin-bottom: 15px;
    padding: 2px;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 1px 10px 10px 10px;
    -moz-border-radius: 1px 10px 10px 10px;
    box-shadow: 2px 2px 4px rgba(100, 100, 100, 0.5);
    -moz-box-shadow: 2px 2px 4px rgba(100, 100, 100, 0.5);
    -webkit-box-shadow: 2px 2px 4px rgba(100, 100, 100, 0.5);
}

/* CSS for IE7 */
#infoboxes li {
    border-width: 0px;
    behavior: url(css/PIE.htc);
}

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/