Bluehost: Web hosting from $3.95/month. Sign Up

Handbag and luggage shop website

Posted on by Clive Walker in CSS Portfolio

Classic Bags website screenshotClassic Bags is a luggage and handbag retailer in Horsham town centre that wanted their website revamped. The new website needed to highlight their product range but without implementing a full-blown ecommerce solution.

The website project went well and everyone is pleased with the result but I thought I would highlight one particular technical 'issue' that arose during the work.

Product listings without tables

Each of the new product pages has approximately ten products from several manufacturers displayed in a simple unordered list format. In fact, from a web design and cascading style sheet (CSS) perspective, a listing like this is relatively simple to set-up. Each image and caption is a floated list item which works pretty much OK until you have different text amounts and start text resizing in a browser. Granted, most people may not know how to resize text in their browser or may use the zoom feature of Internet Explorer 7 (which works completely differently). Nevertheless, we like to try and make sure our layouts work well with several size adjustments.

Unless you are careful with lists like this, there may be problems if each caption contains a different amount of text because each list item row does not 'know' how high the other list items are and, unlike HTML table cells or rows, list items do not behave in a table cell manner. In some circumstances, this might result in list item rows 'breaking'. Ideally, we need a solution where each list item row has an equal height and this is as big as the largest individual item in that row. Note: This problem is sometimes called equal height boxes. We could have used tables for our product listing but we thought a list was probably better in semantic terms (perhaps debatable). Alternatively, setting the heights of each list item using a relative unit of height like ems may be OK in some cases but usually we prefer not to set heights on list items.

Practicality

In our case, to solve any problems that may have occured with text resizing and our product lists, we used more than one unordered list per page so that each row is a single list and can behave almost independently of the others. We were also lucky in being able to use very similar amounts of text for each caption/product description. This seemed to be the most practical solution within the time-frame available. We could have used CSS display properties like display: table as a solution but this is not consistently supported across browsers for common usage in our view. We also thought about using definition lists but their usage left us undecided.

Perhaps, this solution does not do it for you and you are smarter than me. If you have a better solution, let me

know.

Leave a comment

A simple question that helps prevent automated form fillers.

© 2016 Clive Walker