Featured Products Grid Safari Error

Store UI, layout, design, look and feel; Discussion on the customer facing pages of your online store. Cascading Style Sheets, Themes, Scriptlets, NVelocity and the components in the ConLib directory.
Post Reply
platterat
Ensign (ENS)
Ensign (ENS)
Posts: 19
Joined: Mon Sep 19, 2005 9:00 pm
Location: casper, wy
Contact:

Featured Products Grid Safari Error

Post by platterat » Fri Oct 11, 2013 11:37 pm

We are having an issue with the home page featured products grid not displaying properly in Safari, the product titles are overlapping the thumbnails. This is happening on pc's and mac's as well as all other devices. I have tried to fix the issue by adjusting the css such as I tried adding the following to the style.css file which should have solved the problem:

div.featuredProductContainer table.productsGrid tbody tr td.thumbnail {width: 120px;}

...but for some reason that isn't working. I also tried to hardcode the td width in the FeaturedProductsGrid.ascx ConLib file, but none of the changes are working or showing live for some strange reason, which is why I'm making this post so hopefully someone can help. The issue should be resolved by making that thumbnail td have a forced width of the thumbnail which is 120px.

Here is a thumbnail so you can see the problem: http://flytyingclub.org/images/safariscreenshot.jpg

And you can see the problem live by viewing our homepage with safari here: http://wyomingflyfishing.com

Any help with this matter would greatly be appreciated. Thank you.
Mark

User avatar
Katie
AbleCommerce Admin
AbleCommerce Admin
Posts: 2651
Joined: Tue Dec 02, 2003 1:54 am
Contact:

Re: Featured Products Grid Safari Error

Post by Katie » Mon Oct 14, 2013 2:58 pm

Solving CSS issues can be very difficult, especially when you are only seeing it happen with Safari.

I always recommend Firefox developer tools to help identify areas that might need adjustment. For this issue, you might want to look for anything forcing the text to align left.

In your style.css file:
#innerContentWrapper {
text-align: left;

In your page:
<td class="details" width="100%" valign="bottom" align="left">

Try changing these (maybe others) and see if it helps.

Sorry this wasn't that helpful. I could spend hours trying to fix it, or it could take minutes...it's just difficult to do without having access to your installation. I also searched on google for some hints. You might try the same.
Thank you for choosing AbleCommerce!

http://help.ablecommerce.com - product support
http://wiki.ablecommerce.com - developer support

Post Reply