Customizing ProductCart - Issues with Chrome

Issues with Chrome

Printed From: ProductCart E-Commerce Solutions
Category: ProductCart
Forum Name: Customizing ProductCart
Forum Description: Exchange messages with other users that are customizing ProductCart.
URL: https://forum.productcart.com/forum_posts.asp?TID=5802
Printed Date: 17-February-2025 at 7:28am
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: Issues with Chrome

Posted By: GreggS
Subject: Issues with Chrome
Date Posted: 19-February-2014 at 5:25pm

In our office we mainly use IE and Firefox and rarely use Chrome. We just noticed in Chrome on some products that have cross selling products it extends into the right column.
http://www.1st-line.com/store/pc/viewPrd.asp?idproduct=7163" rel="nofollow - http://www.1st-line.com/store/pc/viewPrd.asp?idproduct=7163
In IE and Firefox it works ok.

I noticed that Chrome doesn't like percents when sizing. For example
http://www.1st-line.com/store/pc/Test-Page-d194.htm" rel="nofollow - http://www.1st-line.com/store/pc/Test-Page-d194.htm
the image on this page is 1024px x 1024px. It is sized to 100% by 100%. It looks ok in IE and Firefox (they both scale the image to 588px x 588px). In Chrome it stretches the image.

What we tried to do to fix the problem above was change the width of .pcShowContent in pcStorefront.css from 100% to 590px. It fixed that issue but then other pages went off balance in all 3 browsers like the login page and the one page checkout page.

Does anyone have similar issues with Chrome or know of a happy medium between all browsers?

Replies:

Posted By: Guests
Date Posted: 19-February-2014 at 10:22pm

Hi Gregg,

I find Chrome to be the most W3C compliant on such issues, but perhaps less forgiving on doing "what I meant rather than what I said", if you will. You'll also do better using CSS rather than old school HTML size attributes on elements.

First of all, your product pages are blowing up in Chrome because the left and right columns on your product page are set to 20% and 80% (image column on the left; description etc. on the right); however your products images are far beyond 20% of the width of the div this table it set in.

This is all stock PC markup and CSS you're running now.

To remedy this, remove the width="80%" HTML attribute on that right column, so it will scale naturally (viewPrdL.asp).

As for your test page, pretty much the same idea. It's much better to use CSS rather than HTML attributes. Remove your HTML width & height attributes and replace with style="width:100%;". The height will scale naturally by aspect ratio; you don't need or want to set it explicitly.

Fortunately, v5 will be getting rid of all of this old school HTML markup, esp. vis a vis tables and updating to contemporary markup & styling.

Posted By: Brett
Date Posted: 21-February-2014 at 8:26pm

One thing you can do is set the images to:

max-width: 100%;

Then they won't be any wider than their container.

Posted By: GreggS
Date Posted: 19-March-2014 at 12:00pm

Thanks for tip. I've started redoing all images with styles now.

On the back end we have been trying to update to 4.7 from 4.6. It's tedious with all the custom code we have right now. We have an issue in the bto configuration pages extending past to screen.

http://www.1st-line.com/store/pc/configurePrd.asp?idproduct=4610

I went into configurePrd.asp and tried getting rid of all the width="" and all the nowrap. I also tried getting rid of all of the ones in configurePrdCode.asp. I didn't see anything in pcStorefront.css except the pcBTOmainTable width: 100%;.