Joomla Templates Club 406,261 posts

[minimizan Friend minimizanJoin date: January 2013Posts: 37Downloads:0Uploads:15 Thanks: 11 Thanked: 1 times in 1 posts]

#184143

Why Firefox don not show lines around products? I’d tried in Chrome and runs ok also, If I put view 4 products for line instead of 3 it makes one visualization error. I wanna to solve it, do you know how? Many thanks.

---

Attachments:

1. 
2. 
3. 
4. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#480429

You can post your site url here for further checking. I will try to help you out. Right now its difficult to guess the issue and solution without actually being able to see it.

[minimizan Friend minimizanJoin date: January 2013Posts: 37Downloads:0Uploads:15 Thanks: 11 Thanked: 1 times in 1 posts]

#480633

wwww.koralecomplementos.com

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#480746

I found the problem came from Firefox latest version which has changed rule css file, you can fix this problem on your site with my suggestion
<blockquote>Open templates/ja_vintas/css/virtuemart.css file</blockquote>
from

.browseProductImage {
border-width: 3px;
border-image: url(../images/border-hoz.png) 3 repeat;
-moz-border-image: url(../images/border-hoz.png) 3 repeat;
-webkit-border-image: url(../images/border-hoz.png) 3 repeat;
-o-border-image: url(../images/border-hoz.png) 3 repeat;
padding: 7px;
}
div.vmgroup ul.vmproduct li a img {
border-width: 3px;
padding: 7px !important;
-moz-border-image: url(../images/border-hoz.png) 3 repeat;
-webkit-border-image: url(../images/border-hoz.png) 3 repeat;
-o-border-image: url(../images/border-hoz.png) 3 repeat;
border-image: url(../images/border-hoz.png) 3 repeat;
}

change to


.browseProductImage {
border-width: 3px;
border-image: url("../images/border-hoz.png") 3 3 3 3 / 2px 2px 2px 2px repeat repeat
-moz-border-image: url(../images/border-hoz.png) 3 repeat;
-webkit-border-image: url(../images/border-hoz.png) 3 repeat;
-o-border-image: url(../images/border-hoz.png) 3 repeat;
padding: 7px;
}
div.vmgroup ul.vmproduct li a img {
border-width: 3px;
padding: 7px !important;
-moz-border-image: url(../images/border-hoz.png) 3 repeat;
-webkit-border-image: url(../images/border-hoz.png) 3 repeat;
-o-border-image: url(../images/border-hoz.png) 3 repeat;
border-image: url(../images/border-hoz.png) 3 repeat;
border-image-width:3px;
}


<blockquote>Open components/com_virtuemart/assets/css/vmsite-ltr.css file</blockquote>
from

.browse-view .row .product .spacer img,.related-products-view .row .product .spacer img{max-width:90%;height:auto;}
change to

.browse-view .row .product .spacer img,.related-products-view .row .product .spacer img{max-width:90%;height:auto;width:90%;}

Let me know the result

1 user says Thank You to Ninja Lead for this useful post

1. minimizan

[minimizan Friend minimizanJoin date: January 2013Posts: 37Downloads:0Uploads:15 Thanks: 11 Thanked: 1 times in 1 posts]

#480759

Hi! In ‘featured products’ it´s ok, the line appears: http://www.koralecomplementos.com/
In ‘product list’ the spaces between images is solved but the line around do not appears: http://www.koralecomplementos.com/para-ella
If we can solve it, It was good but this is not a big problem.
Let me know, thanks.

[minimizan Friend minimizanJoin date: January 2013Posts: 37Downloads:0Uploads:15 Thanks: 11 Thanked: 1 times in 1 posts]

#480778

Now I´d see other problem when I introduce more products and pagination appears: the css do not work fine, the images do not resize, please check http://www.koralecomplementos.com/para-ella (do not work in any browser). thanks

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#480861

About border problem on FireFox, you can try to fix with it as :

<blockquote>Open templates/ja_vintas/css/virtuemart.css file</blockquote>

.browseProductImage {
border-width: 3px;
border-image: url(../images/border-hoz.png) 3 repeat;
-moz-border-image: url(../images/border-hoz.png) 3 repeat;
-webkit-border-image: url(../images/border-hoz.png) 3 repeat;
-o-border-image: url(../images/border-hoz.png) 3 repeat;
padding: 7px;
}
change to

.browseProductImage {
border-width: 3px;
border-image: url(../images/border-hoz.png) 3 repeat;
-moz-border-image: url(../images/border-hoz.png) 3 repeat;
-webkit-border-image: url(../images/border-hoz.png) 3 repeat;
-o-border-image: url(../images/border-hoz.png) 3 repeat;
padding: 7px;
border-image-width: 3px;
}

About css file is not appear with pagination
<blockquote>templates/ja_vintas/css/virtuemart.css</blockquote>
add new script

.vm-pagination ul li {
background: none;
}

Remember to clear cache from Admin

1 user says Thank You to Ninja Lead for this useful post

1. minimizan

[minimizan Friend minimizanJoin date: January 2013Posts: 37Downloads:0Uploads:15 Thanks: 11 Thanked: 1 times in 1 posts]

#480899

<em>@Ninja Lead 356460 wrote:</em><blockquote>
change to

.browse-view .row .product .spacer img,.related-products-view .row .product .spacer img{max-width:90%;height:auto;width:90%;}

Let me know the result</blockquote>

In tuis code is necessary delete (max-width:90%) because there is a problem with image dimensions.

[minimizan Friend minimizanJoin date: January 2013Posts: 37Downloads:0Uploads:15 Thanks: 11 Thanked: 1 times in 1 posts]

#480900

And about border problem on FireFox answer do not work for me.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#480984

<em>@minimizan 356652 wrote:</em><blockquote>And about border problem on FireFox answer do not work for me.</blockquote>

I would need to take a closer look at your site. Please pm me admin access and ftp account. I shall fix the problem directly on your site.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#481446

<em>@minimizan 356652 wrote:</em><blockquote>And about border problem on FireFox answer do not work for me.</blockquote>

I fixed the problem on your site with the same I suggested you above. You missed “;” on css script

.browseProductImage {
border-width: 3px;
border-image: url(../images/border-hoz.png) 3 repeat;
-moz-border-image: url(../images/border-hoz.png) 3 repeat;
-webkit-border-image: url(../images/border-hoz.png) 3 repeat;
-o-border-image: url(../images/border-hoz.png) 3 repeat;
padding: 7px;
border-image-width: 3px;
}

You can check it again, let me know if it helps

1 user says Thank You to Ninja Lead for this useful post

1. minimizan

[minimizan Friend minimizanJoin date: January 2013Posts: 37Downloads:0Uploads:15 Thanks: 11 Thanked: 1 times in 1 posts]

#481557

Thanks and sorry for the missed ;

[minimizan Friend minimizanJoin date: January 2013Posts: 37Downloads:0Uploads:15 Thanks: 11 Thanked: 1 times in 1 posts]

#481723

Now in product view details do not appear the squared line around the product. why? what should I do? I have not edited anything and this is so since the last “;” aded. Thanks.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#481834

<em>@minimizan 357757 wrote:</em><blockquote>Now in product view details do not appear the squared line around the product. why? what should I do? I have not edited anything and this is so since the last “;” aded. Thanks.</blockquote>

The problem on detail page fixed as follow
<blockquote>templates/ja_vintas/css/virtuemart.css</blockquote>

div.main-image img {
border-width: 3px;
border-image: url(../images/border-hoz.png) 3 repeat;
-moz-border-image: url(../images/border-hoz.png) 3 repeat;
-webkit-border-image: url(../images/border-hoz.png) 3 repeat;
-o-border-image: url(../images/border-hoz.png) 3 repeat;
padding: 7px;
}

div.main-image img {
border-width: 3px;
border-image: url(../images/border-hoz.png) 3 repeat;
-moz-border-image: url(../images/border-hoz.png) 3 repeat;
-webkit-border-image: url(../images/border-hoz.png) 3 repeat;
-o-border-image: url(../images/border-hoz.png) 3 repeat;
padding: 7px;
border-image-width: 3px;
}

You can check it again, see this link: http://www.koralecomplementos.com/para-ella/colgante-triangulo-detail

[minimizan Friend minimizanJoin date: January 2013Posts: 37Downloads:0Uploads:15 Thanks: 11 Thanked: 1 times in 1 posts]

#481838

<em>@minimizan 357757 wrote:</em><blockquote>Now in product view details do not appear the squared line around the product. why? what should I do? I have not edited anything and this is so since the last “;” aded. Thanks.</blockquote>

Done: for Firefox is necessary to include in virtuemart.css:
div.main-image { imgborder-image: url(“../images/border-hoz.png”) 3 3 3 3 / 3px 3px 3px 3px repeat repeat; }

[Author]

Posts