product listing heading issue in IE

[tmiller]

Hello,

I am new to Zen Cart, and new to this forum, so bear with me!

I have created a custom template for a client, and am still in the midst of modifying various things on my own server...

I've added a background image to the product listing table header. It looks fine in FF, but in IE, the background image is repeated behind the text, so there is an overlap. See example:
http://www.traceymillerdesigns.com/c...ex&cPath=26_27

When I view the source code, I can SEE what the problem is, but I can't for the life of me figure out how -- or where?? -- to fix it. Any help would be greatly appreciated. Thanks!

Tracey

[RuFuS]

Hi Tracy,

Interesting problem, this is a known issue in IE, when you put a background image into a table row, each cell displays the image from the begining instead of continuing from where the last image left off, thus you get the layout issue you are experiencing.

I think I may have a solution though, if you apply the background image to the indivdual cells rather then the row you can then manipulate them by using background-position.

So if you remove

tr.productListing-rowheading {
    color: #506962;
        background-image: url(../images/bg_seashellstrip.gif);
    background-repeat: repeat-x;
    height: 36px;
    padding-bottom: 5px;
} 

and replace it with,

#listCell0-0.productListing-heading, #listCell0-1.productListing-heading, #listCell0-2.productListing-heading  {
background-color:#fff;
background-image:url(http://www.traceymillerdesigns.com/clients/sacobayclassics/store/includes/templates/sacobayclassics/images/bg_seashellstrip.gif);
    background-repeat: repeat-x;
    height: 34px;
}

#listCell0-1.productListing-heading {
    background-position: -4px 0;
}

#listCell0-2.productListing-heading {
    background-position: -19px 0;
} 

You will get the illusion that it is still one large image while keeping IE and Firefox happy

I did quickly try this and it looks ok in IE7 and Firefox 2, you should test IE6 and the other popular browsers though

Let me know how you get on

[tmiller]

Works like a charm! Thanks so much for your reply!