Author |
Message |
Dave77
Joined: Wed Oct 06, 2010 2:38 am Posts: 10
|
 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. exampleDoes anyone know how to fix this?
|
Thu Jan 13, 2011 9:35 am |
|
 |
Dave77
Joined: Wed Oct 06, 2010 2:38 am Posts: 10
|
 Re: IE7 problem
can anyone help with this one?
cheers
|
Tue Jan 18, 2011 11:05 am |
|
 |
jason
Joined: Wed Jul 14, 2010 11:46 am Posts: 1452
|
 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.
|
Wed Jan 19, 2011 10:47 am |
|
 |
Dave77
Joined: Wed Oct 06, 2010 2:38 am Posts: 10
|
 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
|
Fri Jan 21, 2011 4:58 am |
|
 |
jason
Joined: Wed Jul 14, 2010 11:46 am Posts: 1452
|
 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'); })
|
Fri Jan 21, 2011 1:02 pm |
|
 |
Dave77
Joined: Wed Oct 06, 2010 2:38 am Posts: 10
|
 Re: IE7 problem
thanks Jason, the latter worked
|
Mon Jan 24, 2011 8:38 am |
|
 |
kelly
Joined: Tue Feb 01, 2011 9:51 pm Posts: 1
|
 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!
|
Tue Feb 01, 2011 10:05 pm |
|
 |
koskoz
Joined: Thu Feb 03, 2011 11:55 am Posts: 1
|
 Re: IE7 problem
Hi, I've got the exactl same problem but neither the zoom nor the js solved it.
|
Thu Feb 03, 2011 11:57 am |
|
 |
MaKo
Joined: Thu Jun 23, 2011 6:15 am Posts: 2
|
 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); }
|
Thu Jun 23, 2011 6:26 am |
|
|