SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member BEAMS's Avatar
    Join Date
    Jan 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Troubles with TD height

    Hi all,

    Having some trouble with TD heights. Have a look at the code below. Theres a menu on the right, which will expand (height-wise) according to the page. There are three rows to the left of the menu, the top one will display the website banner, the one below it, an ad, the only row I want to expand is the bottom one.

    Ive had a play around with the height attribute, doesnt seem to work, and each of the rows expand with respect to the menu on the right. Is there a way to set the value of the heights?

    Code:
    <table>
    <tr>
    <td height="10">
    
    <!-- I don't want this to expand -->	
    
    </td><td rowspan="3">
    
    Menu:         	
    <!-- This will be expand and be long -->
    
    </td>
    </tr><tr>
    
    <td width="50&#37;">
    
    <!-- I don't want this to expand -->
    
    </td>
    
    </tr><tr>
    
    <td width="50%">
    
    <!-- This is the only row I want to expand -->
    
    </td>
    
    </tr>
    </table>
    Cheers,
    Mark

  2. #2
    SitePoint Enthusiast dvharrison's Avatar
    Join Date
    Dec 2006
    Location
    Braintree, Essex, UK
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mark

    Have you tried determining the height for the 2nd row? Also do you have a link that we can all look at?

    HTH.
    Debbie Harrison
    DVH Design
    Essex Web Design

  3. #3
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    table {
      border-collapse:collapse;
      table-layout:fixed;
    }
    give that a try.

    Oh, and if you only want the last one to expand, you should have a height declared on the one before it as well... and better results if you put your sizes into CSS instead of inline. (the inline heights often seem to get ignored cross-browser)... just be warned without setting a height on that last div, it still might not work in IE or FF (though opera is 'with the program')

  4. #4
    SitePoint Member BEAMS's Avatar
    Join Date
    Jan 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick reply.

    Im afarid I dont have a link, its for a private business and they dont want their idea leaked so theres nothing I can do there.

    Regarding the set height in the first row, that was a mistake. Ive tried setting heights in the first two, just using the height attibute, Ill try using CSS tonight.

  5. #5
    SitePoint Member BEAMS's Avatar
    Join Date
    Jan 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update:

    I dont think its possible. Had a bit of a think, I think it was mentioned that without the last row having a height defined, it wont work. I used style="height:XXXpx" in the first two TDs, works fine in FF, but dies in IE.

    Will have another think.

  6. #6
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Was playing with it myself, and it looks like you are encountering a failing of tables - once you have three or more cells alongside a single rowspan, sizing the bottom two is unpredictable cross-browser... While Opera and IE can be made to sit up and beg via different methods, Gecko based browsers like firefox leaves you out in the cold.

    Question... do they HAVE to be table cells? This might sound like kind of a screwy solution, but use the table to make the two columns with no colspans, then in the first column use two block level containers (like DIV's) to divvy up the other. Specify heights on the first two, then leave the last unconstrained (or don't use one at all for the third part - depends on how you are styling the result)

    It's not pretty, not semantic, but it should at least work...

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello and welcome to SitePoint, BEAMS .

    As deathshadow can tell you, we (meaning him and myself) work best by having a copy of the code to work with. If you can create a "dummy page" with just the code and some filler content (you don't even need the actual images, simple grey placeholders with an "X" through the middle will do), we'll be able to help you out a lot more, since we'll be able to spot the problem and can then tell you what to do to fix it .
    Last edited by Dan Schulz; Jan 3, 2007 at 06:30. Reason: fixed smiley code

  8. #8
    SitePoint Member BEAMS's Avatar
    Join Date
    Jan 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    !!!

    Played around with the <div> idea. Came up with this quickly. Ive done a quick test on FF and IE, and it works (Yes I know, thats crazy talk) anyhow, if someone could leave comments or cross test it. That would be great. Ill later use inheritence and make the CSS look much nicer...

    Code:
    <html>
    
    <head>
    	<title>asdasd</title>
    
    <style type="text/css" media="screen">
    <!--
    *, body {
    	font-size: 9pt;
    	font-family: Tahoma, monospace;
    	color: #000000;
    }
    
    .header {
    	border: solid 1px #000000;
    	background-color: #FFFFFF;
    	height: 50px;
    	padding: 1px;
    }
    
    .ad {
    	border: solid 1px #000000;
    	background-color: #FFFFFF;
    	height: 100px;
    	padding: 1px;
    }
    
    .body {
    	border: solid 1px #000000;
    	background-color: #FFFFFF;
    	padding: 1px;
    }
    
    td, th {
    	text-align: left;
    	vertical-align: top;
    }
    
    -->
    </style>
    
    </head>
    
    <body>
    
    <table border="0">
    <tr>
    <td>
    	<div class="header">
    	Website Banner Goes here!
    	</div><br>
    
    	<div class="ad">
    	Website Ad goes here!
    	</div><br>
    
    	<div class="body">
    	Content goes here, this part will also expand
    	</div>
    </td><td>
    	<div class="body">
    	This is the menu, will also expand
    <br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    	</div>
    </td>
    
    </tr>
    
    </table>
    
    </body>
    
    </html>
    Last edited by BEAMS; Jan 3, 2007 at 06:17.

  9. #9
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lots of bloated code due to nested tables, but I've also used inline styling, which can be moved into a stylesheet - this was for demo purposes only but this seems to work....

    BTW: Table/ cell height is invalid and won't render correctly in a page that uses a full and valid doctype... you *may* get away with it without a full doctype (which sends IE into quirks mode). A cell will stretch horizontally also, if the content within it is more than what you have specified for the width.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    </head>
    <body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 780px; margin: 0 auto;">
    <tr>
    <td valign="top"><table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><p>I don't want this to expand</p></td>
    </tr>
    </table></td>
    <td rowspan="3" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td valign="top" style="padding: 10px;"><p>Menu:      This will be expand and be long</p>
    <p>In reprehenderit in voluptate ut aliquip ex ea commodo consequat. Velit esse cillum dolore ut labore et dolore magna aliqua. Duis aute irure dolor sunt in culpa ullamco laboris nisi.</p>
    <p>Mollit anim id est laborum. Excepteur sint occaecat eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt velit esse cillum dolore cupidatat non proident. Quis nostrud exercitation sunt in culpa ut aliquip ex ea commodo consequat.</p>
    <p>Mollit anim id est laborum. Ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, ut labore et dolore magna aliqua. Quis nostrud exercitation qui officia deserunt cupidatat non proident. Excepteur sint occaecat in reprehenderit in voluptate ut enim ad minim veniam.</p>
    <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, lorem ipsum dolor sit amet, velit esse cillum dolore. Consectetur adipisicing elit, qui officia deserunt cupidatat non proident.</p>
    <p>Excepteur sint occaecat ut labore et dolore magna aliqua. Ullamco laboris nisi lorem ipsum dolor sit amet, eu fugiat nulla pariatur. Sunt in culpa sed do eiusmod tempor incididunt cupidatat non proident. Duis aute irure dolor.</p></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td valign="top">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>I don't want this to expand </td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td valign="top" style="padding: 15px;"><p>This is the only row I want to expand </p>
    <p>Mollit anim id est laborum. Ut aliquip ex ea commodo consequat.</p>
    <p> Lorem ipsum dolor sit amet, ut labore et dolore magna aliqua. Quis nostrud exercitation qui officia deserunt cupidatat non proident. Excepteur sint occaecat in reprehenderit in voluptate ut enim ad minim veniam.</p>
    </td>
    </tr>
    </table></td>
    </tr>
    </table>
    </body>
    </html>
    Nadia


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
  •