2

I'm having a tedious issue on the category page of my e-commerce: only using Chrome or Safari the web page SOMETIMES breaks (img 1) enter image description here

instead of img 2 enter image description here

If I try to read the code on Chrome browser by Delepoper Tool I see this DOM piece:

    <ul>
<li class="item span33 first jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" style="height: 490px; float: left; list-style: none;" jcarouselindex="1">
                                <div class="catalog-image">
                                </div>
</li>
<li class="item span33 jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal" style="height: 490px; float: left; list-style: none;" jcarouselindex="2">
                                <div class="catalog-image">
                                </div>
</li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="3" style="float: left; list-style: none; height: 490px;"></li>
                                <div class="catalog-image">
                                </div>
</ul>

If I try to read the source code, all seems at the right place (the third <li> has the right style classes and the <div> is correctly in <li> tag).

Why this behavior and what can be a solution?

Thanks in advance, WaPoNe

Improve this question
2
  • make sure the LI is postilion:relative -- another suggestion use OWL carousel as it is responsive and touch support. If this didn't fix please update with link so I can review it for you
    – Ahmed Elawadi
    Commented Jun 16, 2015 at 14:16
  • A page URL can be: shop.classicdesignitalia.com/fr/breuer-designer but it happens in a random order.
    – WaPoNe
    Commented Jun 16, 2015 at 14:38

1 Answer 1

Reset to default
1

After reviewing you link, you have an extra in the code. Please review your code and make sure the closing tags are in the right place. in source code line 1090

Sorry it is here 

<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="3" style="float: left; list-style: none; height: 490px;"></li>
                                <div class="catalog-image">
                                </div>

Should be 

<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="3" style="float: left; list-style: none; height: 490px;">
                                <div class="catalog-image">
                                </div> </li>
Improve this answer
5
  • The issue is just that.. in the source the code is something like that: <li class="item span33"> <div class="catalog-image"></div> </li> and it seem correct but SOMETIMES something goes wrong!
    – WaPoNe
    Commented Jun 16, 2015 at 15:06
  • I don't understand can you please explain more? any way I can see the source code of list.phtml
    – Ahmed Elawadi
    Commented Jun 16, 2015 at 15:08
  • How can I send you the code of list.phtml?
    – WaPoNe
    Commented Jun 16, 2015 at 15:12
  • zip it and load it to an ftp after you can share the link
    – Ahmed Elawadi
    Commented Jun 16, 2015 at 15:14
  • Can I send you by email? It is a simple file..
    – WaPoNe
    Commented Jun 16, 2015 at 15:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.