Tableless column overflow issue with IE7

Today we realized that the De-Modular Business template doesn’t display correctly in IE7. There was one specific issue that boggled me for hours on end. I had 3 columns. The middle column was divided into 2 additional columns. The problem was, they acted like the 3rd column didn’t exist! (It was the default install in the Blog section). I am willing to bet that we are not the only ones who has had this happen with a Joomla! template. So how can you fix it?

As I said, it took me hours upon hours of trial and error to find a solution for this. I realized it was happening with the tables Joomla! creates for content when it nests more tables within that table for additional content. (I personally prefer Accessible Joomla! so that I don’t have to worry about such things, but we have to appease the masses…) I’m not exactly sure what prompted IE7 to give this much power to a table, but one line of CSS will tame it so that it doesn’t flow over your tableless columns. There doesn’t seem to be any side effects to the code elsewhere in the template. Just insert this to tame your tables:

table * {max-width:100%;}

Now they can’t go beyond their intended usage. Take that, tables!!!

The Core Team
Editorial Staff Members at 'corePHP'
Editorial staff for the Core Technology Blog for 'corePHP' - news, views insights and advice for e-commerce, marketing technology , web design and development.