Forums / Templates, Stylesheets, Page Layout / Product Image cropped when description text uses italic / <em></em>

Product Image cropped when description text uses italic / <em></em>

Started by beeteetwo on 24 Mar 2011, 4:33 PM · Views: 709

Results 1 to 3 of 3
24 Mar 2011, 4:33 PM
#1
beeteetwo avatar

beeteetwo

New Zenner

Join Date:
Jul 2010
Posts:
2
Plugin Contributions:
0

Product Image cropped when description text uses italic / <em></em>

Hi,
I'm experiencing a strange issue only in IE 7 with product images being cropped on the product page.

I am using Zen Cart v1.3.9b

I have searched the FAQ & have not seen any similar issues reported. If anyone has any info or ideas for me they are MUCH appreciated. I am stumped.

Some product pages are displaying a cropped/cut off image in IE 7.
It seems to be related to the use of the <em></em> tag.
The crop happens at the line the <em> tag is used.
If I remove the <em> tag from the description text the image displays properly. I really need to use the italic text to indicate the titles for these descriptions.

Here is an example.

http://www. h i l l s t e a d .org/giftshop/index.php?main_page=product_info&cPath=2&products_id=12&zenid=29f2b6e3c33a30419308a8dc6dffa94f

This product uses italic text in the product description, but it is displayed properly:
http://www. h i l l s t e a d .org/giftshop/index.php?main_page=product_info&cPath=2&products_id=10&zenid=29f2b6e3c33a30419308a8dc6dffa94f

Any ideas?

25 Mar 2011, 1:25 AM
#2
celtic avatar

celtic

Zen Follower

Join Date:
Feb 2010
Posts:
154
Plugin Contributions:
0

Re: Product Image cropped when description text uses italic / <em></em>

beeteetwo,

I had a good trawl across the web, and it appears that IE7 has issues with EM and various other things. The apparent 'fix all' is to put a position:relative in the css...

#productMainImage {
MARGIN: 0em 1em 1em 0em;
position:relative;
}

Oops, just noticed you're a new zenner, so welcome aboard. To fix the problem you will have to edit your stylesheet, which is located at:
http://www.hillstead.org/giftshop/includes/templates/classic/css/stylesheet.css

In there you will find, just passed half way down, the #productMainImage definition. Just add in the position:relative; line as shown above and see how it goes.

Oops, just looking in your css file, yours shows it as:

/Image Display/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0em 1em 1em 0em ;
}

So stick the position:relative; just before the closing }

25 Mar 2011, 7:21 PM
#3
beeteetwo avatar

beeteetwo

New Zenner

Join Date:
Jul 2010
Posts:
2
Plugin Contributions:
0

Re: Product Image cropped when description text uses italic / <em></em>

Hi Celtic,

First of all - THANK YOU!
Your instructions worked perfectly!

This is my first time using Zen Cart & my first time posting in these forums.
Thanks so much for the nice welcome and for talking the time to search for a solution for such a random, strange browser issue!

Your instructions were also amazingly detailed. Thanks for reviewing my code & directing me to the right spot.

You made me one very happy newbie!
:D