[-] FO: fixed bug Module crosselling not working properly (Scroll / JS) - #PSCFV-8080

modules/crossselling/crossselling.css

@@ -6,21 +6,27 @@
 	color:#333
 }
 
+#crossselling {overflow:auto}
+
 #crossselling ul {list-style-type:none}
 #crossselling li {
 	float:left;
-	margin-right:25px;
+	margin: 0 8px;
-	height:80px;
+    padding: 0 5px;
 }
 #crossselling li a.lnk_img {display:block}
 #crossselling li a img {border:1px solid #ccc}
 #crossselling li p.product_name {text-align:center}
 
-#crossselling_list {overflow: hidden;}
+#crossselling_list {
+	float: left;
+    overflow: hidden;
+    width: 96%;
+}
 
 #crossselling_scroll_left,
  #crossselling_scroll_right {
-	background: url('../../../img/thumbs_left.gif') no-repeat center;
+	background: url('img/thumbs_left.gif') no-repeat center;
 	text-indent: -3000px;
 	display: block;
 	width: 9px;
@@ -28,39 +34,4 @@
 	float: left;
 	margin-top: 30px
 }
-#crossselling_scroll_right { background-image: url('../../../img/thumbs_right.gif') }
+#crossselling_scroll_right { background-image: url('img/thumbs_right.gif') }
-/*
-div#crossselling {
-	padding-top: 10px;
-	clear: both;
-	margin-bottom: 10px
-}
-#crossselling {
-	margin: 0 auto 0;
-	height: 170px;
-	width: 100%
-}
-#crossselling_noscroll {
-	margin: 0 auto 0;
-	height: 120px;
-	width: 100%
-}
-#crossselling_list {
-	overflow: hidden;
-	float: left;
-	width: 96%
-}
-#crossselling_list ul {
-	padding-left: 0;
-	list-style-type: none
-}
-#crossselling_list li {
-	float: left;
-	margin: 0 3px;
-	cursor: pointer;
-	text-align: center;
-	width: 100px;
-	overflow: hidden
-}
-#crossselling_list li a { margin: auto }
-*/

modules/crossselling/crossselling.tpl

@@ -30,7 +30,7 @@
 	<div id="{if count($orderProducts) > 5}crossselling{else}crossselling_noscroll{/if}">
 		{if count($orderProducts) > 5}<a id="crossselling_scroll_left" title="{l s='Previous' mod='crossselling'}" href="javascript:{ldelim}{rdelim}">{l s='Previous' mod='crossselling'}</a>{/if}
 		<div id="crossselling_list">
-			<ul class="clearfix">
+			<ul class="clearfix" {if count($orderProducts) > 5}style="width: {math equation="width * nbImages" width=107 nbImages=$orderProducts|@count}px"{/if}>
 				{foreach from=$orderProducts item='orderProduct' name=orderProduct}
 				<li>
 					<a href="{$orderProduct.link}" title="{$orderProduct.name|htmlspecialchars}" class="lnk_img"><img src="{$orderProduct.image}" alt="{$orderProduct.name|htmlspecialchars}" /></a>

modules/productscategory/productscategory.css

@@ -19,8 +19,16 @@ h2.productscategory_h2 {
 }
 #productscategory_list li {
 	float:left;
-	margin-right:30px
+	margin: 0 9px;
+    padding: 0 5px;
 }
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+	#productscategory_list li   {
+		margin: 0 7px;
+	}
+}
+
 #productscategory_list li a.lnk_img {display:block}
 #productscategory_list li a img {border:1px solid #ccc}
 #productscategory_list li p.product_name {text-align:center}