Table not collapsing correctly

admin

Administrator
Staff member
I am having a problem with the following page:<br />
<!-- m --><a class="postlink" href="http://www.keithcarter.com/foo.cfm">http://www.keithcarter.com/foo.cfm</a><!-- m --><br />
I want the table to collapse to the width of the pink box.<br />
<br />
Currently, it seems to be collapsing to the width of the pink box PLUS some arbitrary number of pixels (perhaps it has to do with the width of the tabs on the first row).<br />
<br />
I suspect the problem here is mixing table cell width definitions (some are fixed pixel some are percentage), but I have no other ideas on how to get the behavior I'd like.<br />
<br />
Any help would be MUCH appreciated.<br />
<br />
-kmc<!--content-->the pink table is embedded in the first table, which is set to width 100%, so the cell the pink table is nested in will have to be 100% width since it is part of the main table.<br />
<br />
Set the width of the main table to the desired width of the pink table instead of 100% width (?).<!--content-->delete this<br />
<br />
"http://www.w3.org/TR/html4/loose.dtd"<br />
<br />
that is real buggy<!--content-->I made the suggested changes and it still doesn't work how I'd like.<br />
<br />
I am trying to set up a tab navigation system. The pink box is hypothetical content that will be of different widths on different pages (which is why I can't just set a pixel width for the table). I want the green table to collapse to the width of the content. Any other ideas?<br />
<br />
Again, the page we're talking about here is <!-- m --><a class="postlink" href="http://www.keithcarter.com/foo.cfm">http://www.keithcarter.com/foo.cfm</a><!-- m --> (no cold fusion yet, so feel free to save to your hard drive and mess around with).<br />
<br />
-kmc<!--content-->I am lost. you want the green part the same size as the pink part?<!--content-->Yes, I want the green table to collapse to the width of the pink table.<!--content-->it will never be as you have the main table 100% and teh pink table set at 300.<br />
<br />
you need to make it one or the other<!--content-->Try shrinking the window to about the size of the pink table. Note that the green table does not collapse all the way to the pink table width.<!--content-->that is because the green table has 8 other cells in it. besides that is pointless, who does that on a webpage? all you should care about is the toal widht of a 800x600 user, not a 640x480 and smaller.<br />
<br />
take the width out of the 7th cell. the width="100%" is making it do that.<!--content-->Ok, removed it:<br />
http:/www.keithcarter.com/foo.cfm<br />
<br />
I left the old version at<br />
http:/www.keithcarter.com/foo2.cfm<br />
<br />
<br />
The second row now scales exactly how I'd like, but the tabs in the first row are not fixed width anymore. Any other suggestions?<br />
<br />
Basically I would like the top row behavior of foo2 and the bottom row behavior of foo.<!--content-->By the way, using two tables works, but is not on option.<br />
<br />
-kmc<!--content-->sorry to tell you but you will not get what you want in all browsers. IE is not presenting it like it should. mozilla is presenting it like you want in foo2.<br />
<br />
looks a little better in IE if you put the width="100%" back in the 7th cell but make it 80% instead. you can't make it 100% because you have 6 other cells taking up part of it.<br />
<br />
or you could take those 6 cells that are a set width of 30 and make them 1 cell and use table inside of that to make them a fixed width and align them left.<!--content-->
 
Back
Top