Forums / Templates, Stylesheets, Page Layout / Certain styles ignored in IE7? (Product Info Display Page)

Certain styles ignored in IE7? (Product Info Display Page)

Locked

Started by jenny_jane on 29 Oct 2010, 3:48 PM · Views: 571

Results 1 to 3 of 3
This thread is locked. New replies are disabled.
29 Oct 2010, 3:48 PM
#1
jenny_jane avatar

jenny_jane

New Zenner

Join Date:
Nov 2009
Posts:
11
Plugin Contributions:
0

Certain styles ignored in IE7? (Product Info Display Page)

I'm having a heck of a time trying to style an image and button I placed on the tpl_product_info_display.php page. It shows up fine in IE8 and Firefox, but it's like the styles get completely ignored in IE7. Here's the code from my stylesheet:

#productDescription img {
margin-right: 15px;
float: left;
}

#backButton {
float: left;
width: 117px;
height: 70px;
background: url('/includes/templates/my_template/buttons/english/button_continue_shopping.gif') no-repeat bottom left;
}

#backButton a {
display: block;
width: 117px;
height: 22px;
margin-top: 48px;
text-decoration: none;
}

(I was troubleshooting why IE7 wouldn't accept the styles, and I changed the button from an image to a DIV with a background.)

The HTML looks like:

<!--bof Product description -->
<div id="productDescription" class="productGeneral biggerText"><img src="/includes/templates/my_template/images/product_img.jpg" alt="Product Title Here" />Product description here.</div>
<!--eof Product description -->
<br class="clearBoth" />

<!-- ADD BACK BUTTON -->
<div id="backButton"><a href="/index.php?main_page=index&cPath=1"></a></div>  
<!-- ADD BACK BUTTON -->

The result in IE8 and Firefox is the image is aligned left of the description with 15px of space to the right of it, and a back button below that takes you back to the main category.

The result in IE7 is the image has no float, no margin next to it, and the button does not show up at all (back when it was an image it showed up, it just didn't have any margin above it, which was all I was trying to achieve as far as that goes).

I've tried everything I could think of to fix this for IE7. It's not my cache, which has been cleared out about a gazillion times. The DOCTYPE is Transitional XHTML. Does anyone have ideas for what I can try?

29 Oct 2010, 4:18 PM
#2
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,874
Plugin Contributions:
8

Re: Certain styles ignored in IE7? (Product Info Display Page)

Older versions of IE may not allow an empty <a> tag (with no content) to display, even if it is given a height and width in the stylesheet. A common practice for Zen Cart is to use pixel_trans.gif for link content in these cases.

29 Oct 2010, 4:36 PM
#3
jenny_jane avatar

jenny_jane

New Zenner

Join Date:
Nov 2009
Posts:
11
Plugin Contributions:
0

Re: Certain styles ignored in IE7? (Product Info Display Page)

I changed it back to an image since the DIV with background image didn't fix my styling issues with IE7.