SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Auto sizing td in table to fit remaining space..

    Hi,

    I am trying to get a td in a table to layout correctly (auto stretch/fit) in both Firefox and IE and keep coming to a bit of a problem.. IE will work if I set the width as 95% but it doesn't in FF, when removing the absolute width setting it works in FF but not in IE.. probably be better if I show you the code..:

    The table has 3 rows, 1st row 5 colums, 2nd row 3 colums (middle column spans 3 - which is where I think the issue is arising from) and the 3rd row has 5 columns (as per the first row)

    HTML Code:
     <table id="tb_welcome" border="1" cellpadding="0" cellspacing="0" width="98%">
     	<tr>
     		<td class="tb_tlc" nowrap>&nbsp;</td>
                     <td class="tb_tlc_logo" nowrap>&nbsp;</td>
     		<td class="tb_title" valign="top" nowrap> blah </td>
     		<td class="tb_trc_ctlbox" nowrap valign="top">
     		 <a href="#" onclick=""><img src="/imgs/win_min.gif" /></a>
     		 <a href="#" onclick=""><img src="/imgs/win_max.gif" /></a>
     			<a href="#" onclick=""><img src="/imgs/win_close.gif" /></a>
     		</td>
                     <td class="tb_trc" nowrap>&nbsp;</td>
     	</tr>
     	<tr>
     		<td class="tb_ls" nowrap>&nbsp;</td>
     		<td class="tb_content" colspan="3" nowrap></td>
     		<td class="tb_rs" nowrap>&nbsp;</td>
     	</tr>
     	<tr>
     		<td class="tb_blc" nowrap>&nbsp;</td>
                     <td class="tb_blc_logo" nowrap>&nbsp;</td>
     		<td class="tb_footer">&nbsp;</td>
     		<td class="tb_brc_ctlbox" nowrap>&nbsp;</td>
                     <td class="tb_brc" nowrap>&nbsp;</td>
     	</tr>
     </table>
    This is the CSS... (apologies, there's more than I'd like to post, but it's all very similar)

    Code:
     .tb_blc {
     	background: url('/imgs/table-bottomleft.gif');
     	background-repeat: no-repeat;
     	border: 0px;
     	height: 20px;
     	margin: 0px;
     	max-height: 20px;
     	max-width: 7px;
     	min-height: 20px;
     	min-width: 7px;
     	padding: 0px;
     	visibility: inherit;
     	width: 7px;
     }
     
     .tb_blc_logo {
     	background: url('/imgs/table-bottombkg.gif');
     	background-repeat: repeat-x;
     	border: 0px;
     	height: 20px;
     	margin: 0px;
     	max-height: 20px;
     	max-width: 26px;
     	min-height: 20px;
     	min-width: 26px;
     	padding: 0px;
     	visibility: inherit;
     	width: 26px;
     }
     
     .tb_brc {
     	background: url('/imgs/table-bottomright.gif');
     	background-repeat: no-repeat;
     	border: 0px;
     	height: 20px;
     	margin: 0px;
     	max-height: 20px;
     	max-width: 7px;
     	min-height: 20px;
     	min-width: 7px;
     	padding: 0px;
     	visibility: inherit;
     	width: 7px;
     }
     
     .tb_brc_ctlbox {
     	background: url('/imgs/table-bottomright2.gif');
     	background-repeat: no-repeat;
     	border: 0px;
     	height: 20px;
     	margin: 0px;
     	max-height: 20px;
     	max-width: 114px;
     	min-height: 20px;
     	min-width: 114px;
     	padding: 0px;
     	visibility: inherit;
     	width: 114px;
     }
     
     .tb_content {
     	background-color: #FBFBFB;
     	border: 0px;
     	margin: 0px;
     	padding-left: 5px;
     	padding-right: 5px;
     }
     
     .tb_footer {
     	background: url('/imgs/table-bottombkg.gif');
     	background-repeat: repeat-x;
     	border: 0px;
     	height: 20px;
     	margin: 0px;
     	max-height: 20px;
     	min-height: 20px;
     	padding: 0px;
     	visibility: inherit;
     }
     
     .tb_ls {
     	background: url('/imgs/table-leftside.gif');
     	background-repeat: repeat-y;
     	border: 0px;
     	height: 100%;
     	margin: 0px;
     	max-width: 7px;
     	min-width: 7px;
     	padding: 0px;
     	visibility: inherit;
     	width: 7px;
     }
     
     .tb_rs {
     	background: url('/imgs/table-rightside.gif');
     	background-repeat: repeat-y;
     	border: 0px;
     	height: 100%;
     	margin: 0px;
     	max-width: 8px;
     	min-width: 8px;
     	padding: 0px;
     	visibility: inherit;
     	width: 8px;
     }
     
     .tb_title {
     	background: url('/imgs/table-topbkg.gif');
     	background-repeat: repeat-x;
     	color: #FFFFFF;
     	font-size: 8pt;
     	font-weight: 900;
     	height: 37px;
     	margin: 0px;
     	max-height: 37px;
     	min-height: 37px;
     	padding-left: 5px;
     	padding-top: 5px;
     	text-align: left;
     	visibility: inherit;
     }
     
     .tb_tlc {
     	background: url('/imgs/table-topleft1.gif');
     	background-repeat: no-repeat;
     	height: 37px;
     	margin: 0px;
     	max-height: 37px;
     	max-width: 7px;
     	min-height: 37px;
     	min-width: 7px;
     	padding: 0px;
     	visibility: inherit;
     	width: 7px;
     }
     
     .tb_tlc_logo {
     	background: url('/imgs/table-topleft2.gif');
     	background-repeat: no-repeat;
     	height: 37px;
     	margin: 0px;
     	max-height: 37px;
     	max-width: 26px;
     	min-height: 37px;
     	min-width: 26px;
     	padding: 0px;
     	visibility: inherit;
     	width: 26px;
     }
     
     .tb_trc {
     	background: url('/imgs/table-toprightend.gif');
     	background-repeat: no-repeat;
     	height: 37px;
     	margin: 0px;
     	max-height: 37px;
     	max-width: 8px;
     	min-height: 37px;
     	min-width: 8px;
     	padding: 0px;
     	visibility: inherit;
     	width: 8px;
     }
     
     .tb_trc_ctlbox {
     	background: url('/imgs/table-toprightbkg.gif');
     	background-repeat: no-repeat;
     	height: 37px;
     	margin: 0px;
     	max-height: 37px;
     	max-width: 100px;
     	min-height: 37px;
     	min-width: 100px;
     	padding: 3px;
     	visibility: inherit;
     	width: 100px;
     	text-align: right;
     }

    Can anyone please shed some light on how to make the first and last 2 columns on the top and bottom row remain an absolute size, whilst letting the middle td stretch to fit the space, as cross browser compatible as possible ?

    Many thanks in advance.

  2. #2
    SitePoint Member vhgdesign's Avatar
    Join Date
    Mar 2005
    Location
    at home :))
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This will be easy if you use nested tables

  3. #3
    SitePoint Member
    Join Date
    May 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeh, I was worried someone might suggest that... I want, if possible, to keep away from table upon table nested within each other. This is already nested in another table that determines the main page layout, so it would make this feel cluttered and clumsy to have yet another table to achieve this seemingly simple task.

    Any other ideas ?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •