Can I suggest a change?? In the product Grid view you have the following code:
It uses tables to layout the product data and uses <?if ($i++%3==0):?> to control the extra rows etc. If someone wanted to show the products with more or less than 3 per row they would have to modify the code to do so. It is possible to achieve the same result with divs and CSS:
<ul class="products"> <?$i=0; foreach ($_productCollection as $_product):?>
@Dan: How will you do vertical separators? As a border of LI, or background image?
Could you try this method with different cell heights on same row, for example because of different product title lengths, and have these borders continue after LI ends?
If you can do that please post here the solution, because we didn’t find cross browser solution…
With table it is also possible to have price html block to be aligned to the bottom of the cell, which also would require days of messing with css and browsers doing with LI’s.
Sigh… with current state of CSS and browsers compatibility, sometimes tables are more straightforward and mature solution.
I’ve asked the CSS guru here and he says he’d use background images on the LI. He also explained the CSS approach to the layout and explained that the reason for the LI’s wrapping was that they were in a container that was a specific width and has a clear left attribute. This site explains the principle: http://alistapart.com/stories/practicalcss/
We both agree with you that aligning anything to the bottom with CSS is difficult, if not impossible, so perhaps there is a need for tables in this instance.... Have you seen the example site in the show-off section that uses this approach?
One thing I would suggest to change is that all references to 3 in the current method should be replaced with a variable so that it is only needed to change in one place to update the layout.... if you could have this set per category then that would be great!!