Problem viewing with IE6

[Guest]

Okay, I've gotten 2 reports from shoppers using IE6 that they cannot see any products for sale on at least one of my sites - www.Egyptianmarketplace.com. They say all categories are coming up with no items in them!

I've looked but have IE7 and FF and everything looks fine. Does anyone here have IE6 that you can take a look and 1) tell me if this is happening 2) have any clue why???

Thanks!

[Guest webicon]

OMG - I don think its just you -

I also am on IE7 etc etc - But I do have VMware virtual machines going back to IE 5...

I did yours and sure enough no results. I did mine (sendsocks.co.uk) and same thing happened - no products in categories.....

Now I know when I first set up the store - I think it was 3.0.10 or something release - I did check in earlier browsers and all was fine. Have upgraded a couple times since then and now on 3.0.15 - perhaps is a bug with latest release? - NOT sure - would be interested to see what other feedback is...

:)

[markscarts]

LOL, not so bad, just IE peekaboo bug there

Go to layout.css and position: relative; to the class .boxContent and this may solve the problem

[Guest]

Problem is, I already had position: relative; in .boxContent. So any other ideas???

I was using IE6 when it first did the sites and had no problems which is why I'm sooo confused don't remember which version of CC3 I was using at that time, but I haven't updated any of my style sheets since installing 3 as I use a customized template and have never changed them.

This is a recent development as one of the ones that told me about it is one of my best customers who orders something just about every month - so somehow between last month and this, it's foobared - and I haven't changed anything in the style sheets or templates that I recall. Using 3.0.14 as I have been since it was released.

[Guest]

Hey could this http://www.cubecart.com/site/forums/index....24679&hl=br clear&st=15# be causing the IE6 problem?

Just remembered this is the only thing I've done recently and added the <br clear> thing to my other stores as well as it also solved a problem in FF where items in categories with sub categories wouldn't properly align. Works fine for IE7 too but could this cause a problem in IE6?

If so, any idea of a IE6 friendly solution that will work with IE7 and FF too??? (hate cross browser problems )

[Guest webicon]

I'm afraid the position:relative didn't work for me either - thanks for the suggestion though MarksCarts - any help appreciated.

I'm assuming it must be something in the viewcat.tpl file thats causing this - my logic being that there is only an issue with the display on category/search results pages....

Also not limited to IE.6 - Seems to be same issue with Safari also...

[Guest]

Can someone check Egyptianmarketplace.com now with IE6? See if you see products especially in the Statues category that has subcategories and let me know.

It's not 100% right in IE7, but I wanted to know if taking out the <br clear="all" /> tag solved the disappearing products problem :)

[Guest webicon]

Sorry Mysty - I just re-checked- still showing as if no products were in category

[Guest webicon]

scrap last comment -probably my cache - IE6 now looks fine (as it should)...

Can I ask where you removed the <br clear /> tag from to get it working?

[Guest]

Thanks for the check webicon!

I had added the <br clear=all /> tag (see link in post above to another topic of mine) to each of the sites.

What I did instead, was add <p> </p> tags around each div section. Not sure which one actually fixed it, but it did.

The only problem is, in IE7, the bottom pagination doesn't want to show at the bottom like it should. Still working on that, but at least I know products show up again! If anyone has ideas on this problem, let me know.

My current viewCat.tpl file is:

<!-- BEGIN: view_cat -->

<div class="boxContent">

<span class="txtContentTitle"><strong>{LANG_CURRENT_DIR}</strong> {CURRENT_DIR}</span><br>

<p><span class="txtContentTitle">{TXT_CAT_TITLE}</span>

<div>{TXT_CAT_DESC}</div></p>



<p><!-- BEGIN: sub_cats -->

<div id="subCats">

<strong>Subcategories:</strong><br>

	<!-- BEGIN: sub_cats_loop -->

<ul><li class="bulletLrg"><a href="index.php?act=viewCat&amp;catId={TXT_LINK_CATID}" class="txtDefault">{TXT_CATEGORY}</a> ({NO_PRODUCTS})</li>

</ul> 	<!-- END: sub_cats_loop --></div>

<!-- END: sub_cats --></p>



<div class="pagination">{PAGINATION} <!-- BEGIN: view_all --><a href="index.php?page=all&amp;act=viewCat&amp;catId={CAT_ID}" class="txtLink">view all</a><!-- END: view_all --></div>



<p><!-- BEGIN: productTable -->

<table align="left" border="0" width="100%" cellspacing="0" cellpadding="3" class="tblList">

  <tr>

	<td class="tdListTitle"><strong>{LANG_IMAGE}</strong></td>

	<td class="tdListTitle"><strong>{LANG_DESC}</strong></td>

	<td class="tdListTitle"><strong>{LANG_PRICE}</strong></td>

  </tr>

  <!-- BEGIN: products -->

  <tr>

	<td align="center" class="{CLASS}"><a href="index.php?act=viewProd&amp;productId={PRODUCT_ID}" target="_self"><img src="{SRC_PROD_THUMB}" alt="{TXT_TITLE}, {TXT_LABEL}" border="0" title="{TXT_TITLE}, {TXT_LABEL}" /></a></td>

	<td valign="top" class="{CLASS}"><a href="index.php?act=viewProd&amp;productId={PRODUCT_ID}" target="_self" class="txtDefault"><strong>{TXT_TITLE}</strong></a><br />

	{TXT_DESC} <br> 



	<form action="{CURRENT_URL}" method="post" name="prod{PRODUCT_ID}">

	<!-- BEGIN: buy_btn -->

	<input type="hidden" name="add" value="{PRODUCT_ID}" />

	<input type="hidden" name="quan" value="1" /><a href="java script:submitDoc('prod{PRODUCT_ID}');" target="_self" class="txtButton">{BTN_BUY}</a><!-- END: buy_btn --> <a href="index.php?act=viewProd&amp;productId={PRODUCT_ID}" target="_self" class="txtButton">{BTN_MORE}</a></form></td>

	<td align="center" class="{CLASS}">{TXT_PRICE}

	<div class="txtSale">{TXT_SALE_PRICE}</div></td></tr>

</td></tr>

<!-- END: products -->

</table>

<!-- END: productTable -->

<!-- BEGIN: noProducts -->

<div>{TXT_NO_PRODUCTS}</div>

<!-- END: noProducts -->

<div class="pagination">{PAGINATION}</div></p>

</div>

<!-- END: view_cat -->

please note I think I modified it from the original file so yours may vary a bit.

[markscarts]

Hi guys, sorry I dropped out of the conversation, haven't been available today, but reading with interest.

Well, I didn't expect the advice about .boxContent division to be a bum steer, but in my experience with peekaboo bug it is not unusual to have several layers of this problem crop up in CubeCart, where the float property is used so much. The only thing I could be certain of is that it was indeed the IE peekaboo rendering problem I saw. All the elements were there, which was evident by rolling the mouse over, they just weren't rendering.

Mysty, I just looked at the site, statues cat, and it wasn't pretty. Maybe you're still working on it now. What I saw is the product list extending far down past the boxContent division that's supposed to contain it - which is probably the result of removing the break code - and the pagination was then stuck up in the right column just below where the boxContent division left off, and this was pushing all the right side boxes down the page.

Off to bed now, will be looking tommorrow to see if this was just a fluke of loading the page at the wrong time while you were working on it.

[markscarts]

Here are a couple screenshots from IE6

As mentioned in the other post, you have quite a few problemms with this page Mysty, but one of the IE rendering probs that has to be dealt with is tricking it to render the boxContent division all the way.

If you ever have a situation like this:

<div class="background_area">

<div class="contains_floating_elements_or_table">

content

</div>

</div>

and, you find that the background division seems to be pulling up short, you can usually make IE render it all the way by introducing an element of space like this:

<div class="background_area">

<div class="contains_floating_elements_or_table">

content

</div>

&nbsp;

</div>

But if you have floating elements above, float: left or float: right, you may well need to clear the floats first, so you code:

<div class="background_area">

<div class="contains_floating_elements_or_table">

content

</div>

<br clear="all" />&nbsp;

</div>

Instead of a non-breaking space, you could add a paragraph down there or an image, or any other spatial element.

I always use the position: relative; trick to clear peekaboo issues - there is more than one way to do it, but that one always works. I have come across problems with peekaboo issue that have taken a few hours to iron out, though. Those problems can become many-layered, and it is often time-consuming to determine which element(s) to put the relative position on, and which not, but in my experience it has always solved the issue when you get it in the right place.

Adding paragraph tags before division tags is not a good idea, when the division contains a multitude of block-level elements (other paragraphs, tables, etc.) My developer tool picks up 187 errors on the page right now. Some of these are cascading errors, wherein fixing one bit of code will eliminate several errors each time.

Bottom line: Best way to fix this is to clean up the code, get rid of all the errors then use the typical IE tricks to fix the rendering problems if any remain.

[markscarts]

@webicon, I just looked at your site (missed the URL t'other day)

OMG, definitely IE peekaboo problem IE6

This is always cause by the IE's freaking out over the FLOAT property.

The reason this is a new thing for your sites is because you folk have added the gallery product view, which replaces a tabled list with FLOATING divisions. This can be "cured" by adding a relative positioning to the correct containing element.

This type of problem can become layered in the code, so if you have a great deal of trouble pinning it down, it may be necessary to remove any relative positioning you had previously added to the page or pages, and start fresh

Peekaboo problem is indicated by:

• use of float property

• cursor changes to hand over links, though not visible

• able to "highlight" the hidden elements by clicking and dragging the cursor

This means that the elements are actually coded into the page properly, and IE obviously knows that they are there, but has a rendering bug in this situation.

HTH

By the way, an absolutely fantastic design there :zorro:

[Guest webicon]

Thanks for the feedback Mark -

Adding to my stress this week my main machine has blue-screened and so until the new machine arrived tail end of next week I have to just 'let it be' for a few days as only have access to internet via my wii !!

What you say does make sense - I do remember messing with the divs a fair bit ...

[Guest]

Thanks for the suggestions, mark. At least the products are showing. I knew the pagination code had a problem - can see that in IE7, but didn't have time to fool with it more yet. Didn't realize it was forcing the column down in IE6 though. Thanks for that heads up.

My father has been in the hospital (he's okay they've just been doing some tests since Saturday) since Friday night so I've been staying at his place. Hopefully he's coming home today and I'll be back home later today - his computer is very limited compared to mine

I'll try some of your suggestions when I get back and will post so you all can recheck it for me when I do.

Thanks again.

[Guest]

Actually, I just realized my dad is using IE6 so am trying to fix it now. Still cannot get the pagination thing to drop to the bottom - not following where to add the nbsp; ?

I rechecked the style sheets and I have position: relative; for every class that uses a float - so from what I'm reading on your post, mark, this should have solved the peekaboo bug.

I only installed the column view mod on 1 of my sites - just added the <br clear="all"/> to all 9 of them when that seemed to fix the background column not pulling all the way down behind anything cat with subcats.

I commented out the bottom navigation code for now so at least the columns are in their correct place for now - still having problems, but at least it's usuable in IE6 while I figure it out further.

Sorry but I have no idea what the usual IE display tricks might be. Never had a lot of problems with this before. I found a website that had the suggestion of using the <p> tags, which is why I tried that and it did let all the products display, though still had the bottom pagination problem.

Oh well, will have to try to work on further when I get home and then fix on all my sites once I figure it out.

Thanks again for any suggestions.

[markscarts]

Hi Mysty, don't want any misunderstandings, so I will explain myself a little better, hopefully. I just want to be helpful with this . . .

I rechecked the style sheets and I have position: relative; for every class that uses a float - so from what I'm reading on your post, mark, this should have solved the peekaboo bug.

What I meant to write was that isolating the peekaboo problem is not that simple when you start modding CubeCart stores. The problem can become layered when you added new floating divisions in modifying the code, or when moving float codes around. This happens all the time. I regularly code new classes and codings into CubeCart stores, and use the float property often enough. When the problem gets layered a lot, there have been times in the past when I've had to remove all the relative positioning and start fresh adding it back by trial and error to find where it needs to be to work properly. The key is not to put relative positioning on every class that uses float in the stylesheets, but putting it in the right place to make IE render the page properly. With stock CubeCart code, that is usually at the .boxContent class in layout.css, the .txtContentTitle class in style.css (though you don't see float on that one in the stylesheets) and in a couple of the template files where the float property is used inline styles.

I'm sorry I can't be more specific, but when you've modded the skin files this has to be done by trial and error. The good news is that it works, once you get it in the right place.

For the other, you've see how that works already in the other thread. Again, I can't tell you whhere to put it without experimenting with your actual modded code, I have given an example above though. If you read that code, you see that there is one division named background that contains another division. Because of the way it is coded, nesting one division in another, the background division should flow behind the other division to the end. Sometimes this does not render properly though, and in that case you need to add a spatial element, even if it is just a non-breaking space, just before the closing </div> tag of the background division, and when floats are used above, you have to clear them with something like <br clear="all" />

Without actually trying this at your site, my best guess would be that this code:

<br clear="all">&nbsp;

should be placed just before the closing </div> tag that is used to close the boxContent division.

[markscarts]

Can anyone please check this site in IE6 to see if the products are displaying on all the view category pages?

They're displaying fine now here, I'd like to have someone double-check please, http://sendsocks.co.uk/index.php?act=viewCat&catId=3

[Guest dpage44]

Everything looks good in IE6 on my machine :D

[Guest webicon]

Thanks for your Help Mark - and Thanks for checking dpage44 -

Am still without a main PC - But is looking cool here on the Wii!

[Guest]

Well, I still cannot figure this out

Tried changing to one of the unmodified stock skins, and still no products show in IE6 (or at least don't when I use http://ipinfo.info/netrenderer/index.php to render it (maybe it's the renderer thing as marks page above that is supposedly displaying correctly is not showing any products when I use this tool either). Tried using the position: relative thing in the stock layout.css and still no joy.

I don't have many mods installed - made minor changes here and there, but mainly only mod is estelle's category description one.

Guess I just won't get any orders from anyone using IE6 and when CC4 comes out, maybe this will solve it. Hopefully people will stop using IE6 soon anyway.