CSS Issues in IE7

Greetings, all, one of my customers just reported that the large images are displaying halfway off her screen, on the lower right. She has a 21" monitor and Internet Explorer. Currently using a slightly-modified version of Solitude (just color tweaks mostly, no radical alterations.)



Just reproduced this on IE7 on an old PC and noticed that the horizontal menu is displaying vertically also. I expect these to be issues of CSS interpretation on Internet Explorer… has anyone else encountered this and most importantly, any suggestions where to begin troubleshooting?

No one else has had this issue??



Can anyone at least tell me where to find the controls for that pop-up image? I just need to make sure it lands in the center of the screen; two-thirds of my users are on IE and now I know why my unique-item sales are down :mad:

IE7 on Windows XP has more problems than that. Almost all the popup boxes are messed up. This might require some CSS hacks or worse, some javascript hacks because the size of the browser frame isn’t read properly.



Could you upload a screen shot so we can get a good idea of what you’re seeing.



Thanks.

OK, here’s a screenshot. You can see that the large pop-up image just skates off the side of the screen.



The CSS code in question seems to be this, from styles.base.css:

[HTML]#previewer_window {

position: fixed;

z-index: 35;

display: none;

top: 50%;

left: 50%;

background-color: #ffffff;

}[/HTML]



Apparently Firefox interprets this to mean “place the center of the pop-up 50% from the top and 50% from the left side” – in other words, center the box.



IE seems to place the top left corner at the 50/50 point, leaving much of the image off the screen entirely. I already tried changing the top/left values and can’t find anything that allows the whole image to show in both browsers. I can live with it not being centered, but the whole thing needs to show, including the X to get rid of it.



Also looked up some basic IE fixes common in CSS; none of those worked either.



This is mission-critical for me as I sell expensive, one-of-a-kind items. People don’t want to pay $50 and up for a unique item if they can’t get a good look at it first! :smiley:



So, does that help? Any ideas?

IE Error.JPG

Well … there’s always the “@” symbol method or the IE only if’s for adding IE only code.



top: 50%;

@top: 25%;

left: 50%;

@left: 25%;



This is a hacky McSnappy way of doing it, but it’ll offer a quick fix until a more permanant solution is found.

gginorio, you and Hacky McSnappy are totally my new best friends. That works a treat!!



Now the majority my customer base can see what they’re buying until I can find a more elegant solution. Always a good thing.



Many, many thanks for your help. :smiley: