Issues with Chrome

Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic

   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
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
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?

Author	Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic
GreggS Members Profile Send Private Message Find Members Posts Add to Buddy List Groupie Joined: 06-February-2012 Location: New Jersey Status: Offline Points: 60	Post Options Post Reply Quote GreggS Report Post Thanks(0) Quote Reply Topic: Issues with Chrome 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 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 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?

Guests Members Profile Send Private Message Find Members Posts Add to Buddy List Guest	Post Options Post Reply Quote Guests Thanks(0) Quote Reply 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.

Brett Members Profile Send Private Message Find Members Posts Add to Buddy List Groupie Joined: 22-April-2008 Location: Phoenix, AZ Status: Offline Points: 89	Post Options Post Reply Quote Brett Report Post Thanks(0) Quote Reply 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.

GreggS Members Profile Send Private Message Find Members Posts Add to Buddy List Groupie Joined: 06-February-2012 Location: New Jersey Status: Offline Points: 60	Post Options Post Reply Quote GreggS Report Post Thanks(0) Quote Reply 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%;.