Results 1 to 7 of 7
  1. #1
    Join Date
    Jan 2011
    Location
    Adelaide, Australia
    Posts
    1,668
    Plugin Contributions
    1

    Default Product page layout issue in CHROME and EDGE on desktop

    v1.5.5f westminster new template, using latest versions of Chrome, Edge, Firefox.

    For years I have used only Firefox browser - I recently switched to Chrome as default and noticed layout issues with the product pages on desktop on a couple my sites, both v1.5.5f and westminster new template - the very same is happening using Edge browser ... see images below. There are no apparent layout issues on mobile using any of these 3 browsers.

    The issue is that the description starts either between the two blocks at the top of the page, product image block and add to cart block, instead of below these blocks (as is shown in the Firefox screen shot). Because due to my ignorance until recently I had not used any other browser other than Firefox I have no idea when this issue may have first become apparent. I have not been able to determine anything specific as the cause.

    Any assistance will be appreciated.
    cheers, Mike

    The two sites are www.harmonyball.net.au and www.dazzlerscliponearrings.com.au

    Click image for larger version. 

Name:	CHROME Screenshot(1).jpg 
Views:	23 
Size:	40.7 KB 
ID:	19374
    Click image for larger version. 

Name:	CHROME Screenshot(2).jpg 
Views:	22 
Size:	45.8 KB 
ID:	19375
    Click image for larger version. 

Name:	FIREFOX Screenshot.jpg 
Views:	21 
Size:	37.1 KB 
ID:	19376

  2. #2
    Join Date
    Oct 2008
    Location
    Croatia
    Posts
    1,541
    Plugin Contributions
    19

    Default Re: Product page layout issue in CHROME and EDGE on desktop

    Hm... I wonder why Chrome ignores the <br class="clearBoth"> but the fix is simple: edit your includes/templates/westminster_new/css/stylesheet.css and find
    Code:
    #productDescription {
        font-size: 110%;
    }
    Just change it to:
    Code:
    #productDescription {
        font-size: 110%;
        clear: both;
    }

  3. #3
    Join Date
    Jan 2004
    Location
    N of San Antonio TX
    Posts
    9,107
    Plugin Contributions
    11

    Default Re: Product page layout issue in CHROME and EDGE on desktop

    Always best to clean up the code first. Several mistakes can be found in the css. Stylesheet.css has a lone period on line 181 and other incorrect float calls (float:center is not correct) that may affect the browser's "seeing" the br.

  4. #4
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    12,401
    Plugin Contributions
    87

    Default Re: Product page layout issue in CHROME and EDGE on desktop

    Quote Originally Posted by balihr View Post
    Hm... I wonder why Chrome ignores the <br class="clearBoth"> but the fix is simple: edit your includes/templates/westminster_new/css/stylesheet.css and find
    Code:
    #productDescription {
        font-size: 110%;
    }
    Just change it to:
    Code:
    #productDescription {
        font-size: 110%;
        clear: both;
    }
    Although I can't find a reference when searching with Google, the use of <br class="clearBoth"> has been problematic on Chrome and Edge/IE for many years. You can correct the use (cross-browser) by changing those occurrences to <div class="clearBoth"></div>.

  5. #5
    Join Date
    Jan 2011
    Location
    Adelaide, Australia
    Posts
    1,668
    Plugin Contributions
    1

    Default Re: Product page layout issue in CHROME and EDGE on desktop

    Thanks to everyone who responded, it is appreciated.

    Balihr - your fix worked but interestingly not on 1 of the two sites (I did a winmerge comparison between the two and nothing showed up as different other than font size/color on some lines) - strange I know but the reported issue was random, initially some pages resolved OK, others not ???????

    dbltoe - I removed the lone period at line 181 and changed float:center entries to float:left (they were associated with best sellers images)

    Cindy - I wasn't sure where to add that <div class="clearBoth"></div> for cross-browser use, however what I did do was add that code to the first line of the product description of pages that continued to resolve incorrectly .... and that worked. As a temporary fix I will add that code to all product descriptions as I find issues until a better / permanent fix is forthcoming.

    So the combination of everyones input has helped me greatly, again thanks.

    cheers, Mike

    p.s. not specific to Chrome nor Edge - on dazzlerscliponearrings.com.au the Customers Also Purchased ... shows at the bottom of the product info page as it should, however there is an enormous white space between the end of the product description and the start of Customers Aso Purchased. The page is long, i.e. has a lot of data in the LH sidebox and this no doubt is the cause - can this gap be reduced, if so how? Thanks

  6. #6
    Join Date
    Oct 2008
    Location
    Croatia
    Posts
    1,541
    Plugin Contributions
    19

    Default Re: Product page layout issue in CHROME and EDGE on desktop

    Quote Originally Posted by shags38 View Post
    ike

    p.s. not specific to Chrome nor Edge - on dazzlerscliponearrings.com.au the Customers Also Purchased ... shows at the bottom of the product info page as it should, however there is an enormous white space between the end of the product description and the start of Customers Aso Purchased. The page is long, i.e. has a lot of data in the LH sidebox and this no doubt is the cause - can this gap be reduced, if so how? Thanks
    You're closing a div too early somewhere after the reviews section... Check the tpl_product_info_display.php and see if you can locate it, it was probably modified...

  7. #7
    Join Date
    Jan 2011
    Location
    Adelaide, Australia
    Posts
    1,668
    Plugin Contributions
    1

    Default Re: Product page layout issue in CHROME and EDGE on desktop

    Quote Originally Posted by balihr View Post
    You're closing a div too early somewhere after the reviews section... Check the tpl_product_info_display.php and see if you can locate it, it was probably modified...
    Hi Leonard - thanks for the response. I didn't find a stray </div> however using your hint I solved the problem by moving Customers Alos Purchased and Prev/Next to just below the Reviews section and above some code that I have no idea what it does - I think it may be associated with banners if used on product pages.

    So now the page looks good after it loads.

    I also think the issue of the product description being awry was fixed by using the suggestion from Cindy and using <div class="clearBoth"></div> where <br class="clearBoth"> was in the tpl_product_display_info.php .... to validate the fix I removed <div class="clearBoth"></div> from the product description text that I'd inserted as a temporary fix and it seems to be working.

    Again thanks to everyone for your help!!

    cheers, Mike

 

 

Similar Threads

  1. v151 Larger window scroller is fine on Chrome, Edge, but not Firefox
    By mrcastle in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 31 Aug 2018, 05:23 AM
  2. v151 calendar issue on firefox and chrome
    By 100asa in forum Basic Configuration
    Replies: 8
    Last Post: 3 Feb 2014, 09:30 AM
  3. css issue btwn FF and chrome
    By familynow in forum Templates, Stylesheets, Page Layout
    Replies: 15
    Last Post: 23 Oct 2012, 04:49 PM
  4. Product Listing Page Layout Issue
    By sakkhan in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 20 Sep 2010, 01:34 PM
  5. chrome, firefox minor layout issue
    By marvin in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 9 Jun 2009, 08:36 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR