What did I do wrong?

[harmeet]

Hi all

I downloaded the Zen Cart 1.3 and applied two mods -

Dual Pricing Mod, and
Froogle Feed Generator

I also made some changes to the css files -

classic/css/stylesheet_original.css, and
classic/css/stylesheet_new.css

All along I was using Firefox. There was no problem. Now I am testing with IE for those who prefer IE. But the main page text does not show up on load. If you select or scroll, it shows up. So, it needs a refresh.

Any ideas what I may have done wrong?

By the way, my site is - www.mobile4u.ca

Thanks

Harmeet

[harmeet]

I just downloaded IE 7.0 and it looks great in IE 7.0! Anybody experienced similar problem? If yes, how did you resolve it?

Please help me if you can. It will save me a lot of time.

Thanks

[kuroi]

Congratulations. This is easily the most difficult CSS question that I have seen asked on these pages. I spent a very frustrating day tracking down a solution myself three weeks ago, and thought at the time that sooner or later this would drive somebody else crazy.

What did I do wrong

You did nothing wrong (at least nothing relevant to this problem which I believe to be a variant of the IE6 Peekaboo bug (note: the example at the end of this link only works properly(!) if you visit using IE).

In summary, it is believed that under certain circumstances involving touching divs one of which contains plain text, the background color of the div containing the text can erroneously move to the forground. So the text is still there and if you scroll off the page and back, or drag your cursor over it, it will re-appear.

The link given above offers an array of possible workarounds, many with side effects. However, I found many of them already implemented in the 1.3 stylesheet or ineffective, but happily I think my relatively simple solution should work for you too.

In essense, since this appears to be a problem with the background color moving to the foreground, I'd remove the background color from the class centerColumn and any other classes or IDs inside the indexDefault div. I'd then make these areas appear white again by changing the background-color of mainWrapper (which is currently a pale blue that is obscured by the divs sitting inside it) to white.

Fingers crossed, please let me know how you get on.

[harmeet]

Thanks a lot Kuroi! You saved me!

[hareslade]

I had similar, the category text kept peek-a-booing in IE6.

If the background of the main page area is white, one can just remove the 'background' line altogether in the centercolumn entry in the template css file -- then the text area gets a white background, without having to specify it at all in centercolumn..

Its definately just the local 'div' background colour layer that jumps on top of the text that is inside the div's area.

[tehbulats]

oh god.. after a long time reading i found this thread.. i have the same problem here.. but i need my "centerColumn" to fit my design.. any ideas guys?

Thanks for the IE6 Peekaboo bug links.. this is very useful.

[kuroi]

oh god.. after a long time reading i found this thread.. i have the same problem here.. but i need my "centerColumn" to fit my design.. any ideas guys?

Thanks for the IE6 Peekaboo bug links.. this is very useful.

Glad the Peekaboo reference helped. You may find it helpful to note that although there are a number of suggested fixes when you following that link, I've never yet seen one in Zen Cart that couldn't be fixed simply by removing unnecessary background colors (i.e. where background colors have been added to layers sitting on top of layers that already have that background color).

In respect of your "same problem" - please could you be a little more specific. Unless you are working with a Zen Cart version 1.3.0 - 1.3.0.2, it's unlikely that you have exactly the same problem as the original poster, and it's not clear what part needing centerColumn to fit your design contributes to it.

[tehbulats]

i'm sorry for lack of details.. hehe, anyway i am using the purpleshade template V1.3. and installed the latest version of Zen.,

i have the same problem with hareslade.. using IE.. i found out that i need to scroll up my browser to show up my product description and IE can't render the text properly, same as the peekaboo bug..

[kuroi]

The PUrpleshades template was originally written for Zen Cart 1.2. The author, JollyJim, did a pretty good job of upgrading it to 1.3, but it is still tables based and so fights the current Zen Cart architecture in places.

Even so, a default installation doesn't have this problem in either IE6 or IE7 (I have tested it here) so something that you have done since installation has triggered it. That doesn't mean that you've done anything wrong - after all it's an IE bug, but does make it difficult for us to give anything other than very general advice.

Have you added any background colors? If so what happens if you take them off again? Do you have a link to your site where it's possible to see this happening?

[tehbulats]

You have a point.. i agree with you.. IE bug is a headache ,
I only change the background to white: here's my code,
.centerColumn {
padding: 10px;
background: #fff;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

here is my sample:
Take a look at this one,

the product title doesn't render properly in IE6 but the product description is fine.

also check this url in IE6:
http://(sorry, site offline)/137/ind...in_page=gv_faq,

Some links under gift certificate faq doesn't render correctly
i need it to scroll down so that the whole links will appear..

hehe.. right now i dont have a webhost or a domain.. i only tested it on my local server