Problem with table content leaking outside it's container: how to manipulate table layouts

Question

I'm having a problem keeping the contents of this table within it's container: See here.

The table is being automatically generated by something called CataLook store which is a DNN module.

I really wish they would make modules up to standards-- ie. <div> instead of <table> but this is what I'm stuck with...

I've tried Firebugging it and changing all the widths on the table around, but nothing seems to even make it move.

Anyone have any insight as to manipulating tables properly?

Also, if the width is set to 100%, shouldn't it stay within the container? (I'm guessing this is not true because the content is dynamically generated because it's a DNN module...)

Answer 1

Alas Catalook can be notoriously evil with their tables. It's been a while since I've hacked at their tables, but check the table attributes, not just CSS width properties.

Edit: It looks like your product titles are too long. The table is not allowing the title to line break onto two lines. Try shortening your titles, using a smaller font, or format the products to only have two per row rather than 3.

Answer 2

What we do is open up the skin file for the store and look for the many nowrap instances and remove them from the area that is affected.

It is more relevant for those who are using xhtml skins.

It's not the 100% - it's the nowrap that is the undoing of this.

We have managed to get catalook skins CSS compliant - but not xhtml compliant due to where the panels are placed when output to the page.

If we could get that fixed up, I believe we would have xhtml and css compliant store skins for catalook but it's been work in progress.

So try that - find the nowraps and remove some - you will be very happy with the outcome. We have a support site for this product - I have nothing to do with the developer business wise, but I really wanted to see some support for ecommerce and the dnn community and it's very cool to see others also help. The website is http://www.catalooksupport.com if you're so inclined to visit.

Nina Meiers