Jumbled Basket Contents.

[Nik Grey]

I need to sort this out as it looks awful - it ONLY happens with my 'Lettering' Products:

 

 

Here is the full screenshot.

 

How can I stop the item image thumbnail (as that's what it is) appearing over the price/quantity?

 

Hopefully its just some small code changes in a file, but what and in which file ?

 

 

 

[bsmither]

Please view the HTML source of this page and locate the <img> tag for that product's image. Let us know what the filename is.

 

For the Mican skin, that image's reference is "gallery" and the longest side is supposed to be 50 pixels (as specified in the skin's config.xml file).

 

I think the problem is that CubeCart has not had a chance to build the various sized images from the product's source image.

 

The Mican CSS has for that image:

 

.basket_product .image {

    float: left;

    height: 60px;

    margin-right: 5px;

    width: 50px;

}

 

Because it is floating, a solid object in that space will overflow anything around it.

 

I would think that for this image in particular, showing a 50px wide version would be barely viewable. But then, such is the second item in the list.

 

The wrong solution is to find where in the Lettering tool code would be the best place to call the CubeCart class::method() to render all the skin's various image sizes and cache them. The reason I say that is because these lettering product's are supposedly unique to the order in which they are being purchased. Once the order is complete, there is no reason why this "product" should exist anymore. (But a reference to the CC_inventory table will still exist in the CC_order_inventory table. Just so you know.)

 

We can try to have the browser resize the image using CSS. After the rule near line 740 in common.css, add:

.basket_product .image img {

    height: auto;

    width: 100%;

}

 

This should size the image so that it takes 100% -- and no more -- of the span class 'image'.

[Nik Grey]

Sorry for the delay, as you know Thursdays is my Hospital Radio Day.

 

The product image is:

http://greyprint.co.uk/images/cache/xN7AtQBj.138.png

 

Will go through the above now.

 

ok, I added the code and it looks like this:

.basket_product .image {
	float: left;
	height: 60px;
	margin-right: 5px;	
	width: 50px;
.basket_product .image img {
    height: auto;
    width: 100%;
}

But its had no effect - I did clear my cache.

[Nik Grey]

Any other ideas for this ? I 'Think' this is the only bug I have left to resolve before I can consider opening.

[bsmither]

I wonder what happened to my reply to this?

 

I had said that if the above code is accurately copied from your file, then it has a syntax error. It must look like this:

.basket_product .image {
    float: left;
    height: 60px;
    margin-right: 5px;    
    width: 50px;

}
.basket_product .image img {
height: auto;
width: 100%;
}

 

The red closing paren is missing from your code.

[Nik Grey]

Fantastic, that's fine:

 

 

Thank you Brian