PDA

View Full Version : [CSS] Need help with corner banners



mattm589
05-13-2013, 01:07 PM
I'm not a CSS guru, and have been trying to figure this out for a bit with no success. I tried searching the forum and came up with a bunch of hits on corner banners, but they were mostly several years old and pertinent to IE only.

On my product listing page in grid view:
- the left side of the corner banner lines up correctly with the left of the cell
- the top appears to line up with the top of the image, not the top of the cell

In list view:
- again the left side appears to line up correctly
- The top appears to line up with the center of the image(vertically) not the top of the row

I've attached screenshots.

I have not modified the css for the corner banners or the product listing module.

OSC 2.5.3

Any help would be appreciated.

pgmarshall
05-13-2013, 10:53 PM
The contents of your grid are center aligned vertically. The corner banner assumes that the top of your image is the same point as the top of the containing box.

Because you have images which are of varying heights the product on the right is stretching the containing table cells vertically but the corner banner will remain attached to the image within the middle one.

How to fix:
1) Vertically align the contents of your grid to top - will work but will look scrappy.
2) Pad your images so they are a standard size - will work and will look great.

Your choice.

I would suggest that you have a look around other online stores where you feel they look good and you would be confident purchasing ... you will find that they will all have a standard size image and furthermore they will have taken extra effort to make the image look as good as possible. For example, in your grid screenshot I would be much more likely to buy something that looked like the top left picture than the top middle picture. Although, it would also help if the image was a bit bigger ... as it looks a bit lost in the containing box.

As an example which of these two would you be more likely to buy from an online store?

857 or 858

Regards.