Greetings all,
I thought this problem was solved, but a customer just informed me that it has reared its ugly head again.
I checked my site with Internet Explorer on a Windows 7 box at work and found that the large image is off-screen to the upper left. It used to be off-screen to the lower right, so I guess gginorio’s original solution breaks on Windows 7. It appears to be overcompensating!
Does anyone know a way to fix this for IE on XP and Windows 7 both??
For that matter, the entire website looked terrible on IE…all the images were huge, and everything was soft and fuzzy. Looks great in Firefox on PC or Mac. Is there anything I should be doing to fix that?
Thanks in advance…
sounds like you have a problem with your CSS. It is highly unlikely that it is related to the version of the OS where the browser is running.
What does firebug tell you in FF where the images are positioned? Then, what does an IE debugger tell you about the images in IE?
My bet is that you have something goofy in your styles.ie.css file.
Oh, I am sure you’re right about something goofy in the CSS 
I did not realize there was a separate stylesheet just for IE. The previous fix was a quick CSS hack that I never got around to resolving properly, so no surprise that the problem is back. I have a feeling that different versions of IE are interpreting the hack in different ways, hence the differing results. GIGO!
I’ll see what I can do about a debugger on IE (that Windows 7 box is at work, so I am limited as to what I can install/download there.) I do have an old PC in my own office though, so will test on that if I need to.
Stay tuned!
OK, here is what I have found so far.
The customer who complained said she was using “aol”. Someone else took the call and they did not get any further information regarding her exact browser or setup. It’s a fair assumption she is using a PC, as our stats tell me only a very small percentage of customers browse the site with a non-PC system.
I did some testing and downloaded/installed AOL Desktop 9.6 and Internet Explorer 8. Already had IE7 and reviewed the site in there as well. Results are:
• Display is perfect in AOL Desktop, FF, and IE7.
•It breaks in IE8. (I can’t test IE9 tonight, it requires Vista/Win7 and I only have an XP box here to test on.) I did see the issue at at work where I have Win7 and presumably IE9, so I am provisionally confident that it breaks in IE9 also.
Now, the styles.base.css looks like this (around line1635):
[COLOR="Blue"]#previewer_window {
position: fixed;
z-index: 35;
display: none;
top: 50%;
@top: 15%;
left: 50%;
@left: 15%;
background-color: #ffffff;
}[/COLOR]
Apparently, when displaying the larger image, IE7 would misunderstand [COLOR=“Blue”]top: 50%;[/COLOR] and [COLOR=“Blue”]left: 50%;[/COLOR] but [COLOR=“Blue”]@top: 15%;[/COLOR] and [COLOR=“Blue”]@left: 15%;[/COLOR] hack it back where it belongs. IE8 developer tools tells me the position of the large image is [COLOR=“Blue”]top: 15%[/COLOR] and [COLOR=“Blue”]left: 15%[/COLOR] – so it uses the hack, but then displays the box in a different place than IE7!
Can you suggest a CSS solution that will get all the browsers playing nicely with my large images? My head is exploding right now :shock:
Thanks once again to Struck, and this thread here.
I applied the meta.tpl mod and it didn’t seem to work, then realized that this solution was fighting with the original Hacky McSnappy code tweak that gginorio gave me for styles.base.css. Returned the css to normal and hooray! Problem solved!
We just checked stats and 67% of our customers hit the site with some version of IE, so this was pretty important to fix.
Thanks again everyone!