Well I was bit off on the layout but the concept your going for was the same, but as for the widths you would have to set up individual styles to them in two different ways. Using trufusions example all you have to do is set up the CSS for Col1 Col2 Col3 which would look something like this:



That way it would be universal and cute down on the work by doing them individually like this:



Either method is effective but the first options cuts down on the clutter in the html, and if you need to make changes on the fly you can just do it from one file instead of doing it over several files. Of course if you feel very adventurous you can set up your tables through ajax, this website gives quite a few examples of different table set ups that can be used.

Sorry to bump up an old thread but I've found a problem with IE7 and this solution. IE 7 does not support display:table-cell (one of manythings IE 7 really sucks at). The only way to get <li> elements displaying in the same line similar to the effect of display:table-cell solution in this post is

display:inline;

But there is still another problem in IE7.
[codebox]
li.col1 {
width:120px;
[/codebox]

The width class we have been using to give our widths dont work also. So you see IE 7 offically is the worse compliant broswer out there. I have no doubt I will find more features it does not support and it will continue to make life for us designing webpages as painful as possible.
If anyone has a solution to the width spacing for 'display:inline;' method please share.


edit:

Ok I'm still looking for a suitable sultion that works in IE 7 but the only thing I know is tables now. I'm trying to test out if I can use more divs inside to structure it but with truefusions code it hides all div by default as you can see in the source code in the screen shot. I'm still not fimilar with how to modify it to not include the inner divs.

This post has been edited by sonesay: Jan 30 2008, 10:48 AM

Width does not work with all inline-level elements.


My code only hides the "inactive" ones by default, but i am unsure on what to tell you for the solution. If Internet Explorer lacks, then it lacks. You could try to persuade visitors to switching to a better browser. It's interesting that IE7, though it had a noticable improvement with CSS, lacks such an option. I am unsure of any IE CSS hacks (there may not be any) for this. I'm quite sure i can turn my tab script to use tables instead of divisions, even if it creates unnecessary clutter.

Thinking it over last night as I went to bed I think It would be much easier to use tables to structure the output. It will get clutered with tags but the upside is no futher tweaking of the CSS tabs would need to be done to accomodate the extra inner divs.

Thanks for your input truefusion.