X-Cart forums

[fuerein]

Hopefully someone can help me with this. I am using the webmaster mode of XCart to edit the images on my page. I have it so it looks just like I want in Firefox but when I load it in IE the one image is missing. What I want is something like:

XXXXXAAA
XXXXXBBB

Where the Xs indicate a single image, the As a single image and the Bs a third single image.

It displays like that in Firefox but the B image is completely missing in IE. The code I'm using is below, I've tried a couple varients but nothing gets the image in the lower right to display in IE.

<p>
    <img align="left" alt="Antiochian Village Bookstore and Giftshop" height="200" src="http://store.antiochianvillage.org/skin1/images/Custom/Lent Banner Left.gif" width="550" /><a href="http://www.facebook.com/pages/Antiochian-Village-Bookstore-Giftshop/214753048541529"><img align="left" alt="Like us on Facebook" height="100" src="http://store.antiochianvillage.org/skin1/images/Custom/Lent Banner Right Upper.gif" width="180" /></a></p>
<p>
    <a href="http://store.antiochianvillage.org/Newsletters_and_Promotions.html"><img alt="Sign up for our newsletter" height="100" src="http://store.antiochianvillage.org/skin1/images/Custom/Lent Banner Right Lower.gif" width="180" /></a></p>

I've reverted back to the old setup until I can find a way to make it render correctly in IE. If anyone has an idea why it is rendering the images oddly I would appreciate the input.

[ScrapOrchard]

For starters, the align="left" in your image is probably not necessary, this usually only is used if there is text that you want to wrap around the image.

Second, I would rename your image files so there aren't any spaces.

Lastly, if you are familiar with CSS, create a class for a div and float it to the left in your CSS file, like:

div.lentBanner550 {
float: left;
width: 550px;
}

div.lentBanner180 {
float: left;
width: 180px;
}

then replace the existing code with:

<div class="lentBanner550"><img align="left" alt="Antiochian Village Bookstore and Giftshop" height="200" src="http://store.antiochianvillage.org/skin1/images/Custom/Lent Banner Left.gif" width="550" /></div>

<div class="lentBanner180"><a href="http://store.antiochianvillage.org/Newsletters_and_Promotions.html"><img alt="Sign up for our newsletter" height="100" src="http://store.antiochianvillage.org/skin1/images/Custom/Lent Banner Right Lower.gif" width="180" /></a></div>



If you aren't familiar with CSS, I would just replace the existing code with something like:

<div style="float: left;"><img align="left" alt="Antiochian Village Bookstore and Giftshop" height="200" src="http://store.antiochianvillage.org/skin1/images/Custom/Lent Banner Left.gif" width="550" /></div>
<div style="float: left;"><a href="http://store.antiochianvillage.org/Newsletters_and_Promotions.html"><img alt="Sign up for our newsletter" height="100" src="http://store.antiochianvillage.org/skin1/images/Custom/Lent Banner Right Lower.gif" width="180" /></a></div>



It may or may not produce the desired results, but hopefully this will get you started.