63 users online (1 members and 62 guests)  


  Results 1 to 11 of 11

Related

  1. hidden text in source !    Forum: Search Engine Optimization - SEO - Forum
    Replies: 12
  2. Another AdSense hidden benefit    Forum: Google Adsense
    Replies: 1
  3. Overflow hidden in a table    Forum: HTML Forum
    Replies: 1
  4. Replies: 4
  5. Replies: 10
  1. #1
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    td { overflow: hidden; } ?

    This doesn't seem to be working for me
    I need to display as much preformatted text as the cell will allow, without breaking the layout of the table:
    Code:
    td, th {
    height: 1.5em;
    overflow: hidden;
    }
    HTML Code:
    <table>
    <tr><td>Top 1</td><td>Top 2</td><td>Top 3</td><td>Top 4</td></tr>
    <tr><td>Box a1</td><td colspan='2' rowspan='2'><pre>Some text here</pre></td><td>Box b1</td></tr>
    <tr><td>Box a2</td><td>Box b2</td></tr>
    <tr><td>Bottom 1</td><td>Bottom 2</td><td>Bottom 3</td><td>Bottom 4</td></tr>
    </table>
    But if there is more text than "Some Text Here" it expands Boxes a1/a2/b1/b2 and the central box
    I'm sure I'm making a basic error - but what???

    IE7, btw ...

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: td { overflow: hidden; } ?

    Hi there DeadMeatGF,

    it is not possible to use overflow for table cells. Instead use a div, like this...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    <!--
    td, th {
        height:1.5em;
     }
    #center {
        height:3em;  
     }  
    div {
        height:100%;
        overflow: auto;
     }
    -->
    </style>
    
    </head>
    <body>
    
    <table cellspacing="0" cellpadding="0"><tr>
    <td>Top 1</td>
    <td>Top 2</td>
    <td>Top 3</td>
    <td>Top 4</td>
    </tr><tr>
    <td>Box a1</td>
    <td id="center" colspan="2" rowspan="2">
    <div>
    <pre>
    Some text here
    
     
    Some text here
                           
                          
    Some text here
    </pre>
    </div>
    </td>
    <td>Box b1</td>
    </tr><tr>
    <td>Box a2</td>
    <td>Box b2</td>
    </tr><tr>
    <td>Bottom 1</td>
    <td>Bottom 2</td>
    <td>Bottom 3</td>
    <td>Bottom 4</td>
    </tr></table>
    
    </body>
    </html>
    

  3. #3
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: td { overflow: hidden; } ?

    Hi there DeadMeatGF,

    I forgot to mention that, if you do not want horizontal expansion then you will need to specify the cell widths also.

  4. #4
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Re: td { overflow: hidden; } ?

    Cheers, Coothead - I have got width, I just trimmed the CSS down
    I'll give that a bash later ...

  5. #5
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Re: td { overflow: hidden; } ?

    Absolutely spot on - thanks

  6. #6
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: td { overflow: hidden; } ?

    No problem, you're welcome.

  7. #7
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Re: td { overflow: hidden; } ?

    Quote Originally Posted by coothead
    Hi there DeadMeatGF,

    I forgot to mention that, if you do not want horizontal expansion then you will need to specify the cell widths also.
    Ah - I have hit this problem, but didn't spot it before as I didn't have a looooooooooong line in there

    The relevant code (from View-->Source) is
    HTML Code:
    <style type='text/css'>
    div {
    	height: 100%;
    	width: 100%;
    	overflow: auto;
    }
    
    td, th {
    	width: 10%;
    	border-right: 1px solid gray;
    	border-bottom: 1px solid gray;
    	border-left: 1px solid silver;
    	border-top: 1px solid silver;
    	height: 1.5em;
    }
    
    pre {
    	font-family: arial, helvetica, sans-serif;
    	font-size: 1em;
    }
    </style>
    <table border='1'>
    	<tr>
    		<td>Call Ref</td>
    		<td>F0039493</td>
    		<td>Customer</td>
    		<td>CustomerID</td>
    		<td>Analyst</td>
    		<td>AnalystID</td>
    		<td>Overall</td>
    		<td>&nbsp;</td>
    	</tr>
    
    	<tr>
    		<td>Received</td>
    		<td>21/06/06</td>
    		<td rowspan='2' colspan='4'><div><pre>&nbsp;</pre></div></td>
    		<td>Appearance</td>
    		<td>&nbsp;</td>
    	</tr>
    
    	<tr>
    		<td>Satisfied</td>
    		<td>Yes</td>
    		<td>Attitude</td>
    		<td>&nbsp;</td>
    	</tr>
    
    	<tr>
    		<td rowspan='2'>Comments</td>
    		<td rowspan='2' colspan='5'><div><pre>The job took an excessively long time to complete.
    The call was not put on hold, and no communication to explain the delay was offered.
    The cupboard was also supposed to be a secure store, so this compounded the issue.--------------------------------
    </pre></div></td>
    		<td>Response</td>
    		<td>&nbsp;</td>
    	</tr>
    
    	<tr>
    		<td>Fix</td>
    		<td>&nbsp;</td>
    	</tr>
    
    	<tr>
    		<td>Call Ref</td>
    		<td>F0053105</td>
    		<td>Customer</td>
    		<td>CustomerID</td>
    		<td>Analyst</td>
    		<td>AnalystID</td>
    		<td>Overall</td>
    		<td>&nbsp;</td>
    	</tr>
    
    	<tr>
    		<td>Received</td>
    		<td>21/06/06</td>
    		<td rowspan='2' colspan='4'><div><pre>&nbsp;</pre></div></td>
    		<td>Appearance</td>
    		<td>&nbsp;</td>
    	</tr>
    
    	<tr>
    		<td>Satisfied</td>
    		<td>Yes</td>
    		<td>Attitude</td>
    		<td>&nbsp;</td>
    	</tr>
    
    	<tr>
    		<td rowspan='2'>Comments</td>
    		<td rowspan='2' colspan='5'><div><pre>Parcels were delivered to us quickly..--------------------------------
    </pre></div></td>
    		<td>Response</td>
    		<td>&nbsp;</td>
    	</tr>
    
    	<tr>
    		<td>Fix</td>
    		<td>&nbsp;</td>
    	</tr>
    
    	<tr>
    		<td>Call Ref</td>
    		<td>F0040072</td>
    		<td>Customer</td>
    		<td>CustomerID</td>
    		<td>Analyst</td>
    		<td>AnalystID</td>
    		<td>Overall</td>
    		<td>&nbsp;</td>
    	</tr>
    
    	<tr>
    		<td>Received</td>
    		<td>21/06/06</td>
    		<td rowspan='2' colspan='4'><div><pre>&nbsp;</pre></div></td>
    		<td>Appearance</td>
    		<td>&nbsp;</td>
    	</tr>
    
    	<tr>
    		<td>Satisfied</td>
    		<td>Yes</td>
    		<td>Attitude</td>
    		<td>&nbsp;</td>
    	</tr>
    
    	<tr>
    		<td rowspan='2'>Comments</td>
    		<td rowspan='2' colspan='5'><div><pre>&nbsp;</pre></div></td>
    		<td>Response</td>
    		<td>&nbsp;</td>
    	</tr>
    
    	<tr>
    		<td>Fix</td>
    		<td>&nbsp;</td>
    	</tr>
    
    	<tr>
    		<td>Call Ref</td>
    		<td>F0040232</td>
    		<td>Customer</td>
    		<td>CustomerID</td>
    		<td>Analyst</td>
    		<td>AnalystID</td>
    		<td>Overall</td>
    		<td>&nbsp;</td>
    	</tr>
    
    	<tr>
    		<td>Received</td>
    		<td>22/06/06</td>
    		<td rowspan='2' colspan='4'><div><pre>Response time was not met, and no explanation was given. No communication from the hepldesk or the analyst.
    Items were causing a H&S hazard, but numerous calls failed to turn up any explanation for the delay or estimate of how long it would take.
    Very poor communication.
    </pre></div></td>
    		<td>Appearance</td>
    		<td>&nbsp;</td>
    	</tr>
    
    	<tr>
    		<td>Satisfied</td>
    		<td>No</td>
    		<td>Attitude</td>
    		<td>&nbsp;</td>
    	</tr>
    
    	<tr>
    		<td rowspan='2'>Comments</td>
    		<td rowspan='2' colspan='5'><div><pre>Better communication with customer by helpdesk and analyst.</pre></div></td>
    		<td>Response</td>
    		<td>&nbsp;</td>
    	</tr>
    
    	<tr>
    		<td>Fix</td>
    		<td>&nbsp;</td>
    	</tr>
    
    </table>
    As you can see, the height is fine, but the width messes up - I'm sure it's a schoolboy error, but I can't spot it!
    Last edited by DeadMeatGF; 06-22-2006 at 06:35 AM.

  8. #8
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Re: td { overflow: hidden; } ?

    Just checked it in Opera - width is fine, but I get the correct height plus the scroll bar!

  9. #9
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: td { overflow: hidden; } ?


    Hi there DeadMeatGF,

    as usual, IE does not want to play ball.
    So what I have done is modify your code for 800x600 resolution, using 'px' rather than '%'.
    If this low resolution is not needed, it will be quite easy to increase the dimensions to suit.
    I have commented out the original dimensions so that you can see what is going on....
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type='text/css'> 
    div.small { 
        /*height: 100%;*/
        height:48px;
        /*width: 100%;*/
        width:380px;
        overflow: auto; 
     } 
    div.large { 
        /*height: 100%;*/
        height:48px;
        /*width: 100%;*/
        width:475px;
        overflow: auto; 
     } 
    table {
        font-family:arial,helvetica,sans-serif;
        font-size: 0.9em; 
        border-right: 1px solid gray; 
        border-bottom: 1px solid gray; 
        border-left: 1px solid silver; 
        border-top: 1px solid silver; 
        margin:auto;
    }
    td, th { 
        /*width: 10%;*/
        width:90px;
        /*height: 1.5em;*/
        height:22px; 
        border-right: 1px solid gray; 
        border-bottom: 1px solid gray; 
        border-left: 1px solid silver; 
        border-top: 1px solid silver; 
     } 
    .comment {
        height:48px;
     }
    pre { 
        font-family: arial,helvetica,sans-serif;
        /*font-size: 1em*/
        font-size: 0.9em; 
     } 
    </style>
    
    </head>
    <body>
     
    <table><tr>
    <td>Call Ref</td>  
    <td>F0039493</td>  
    <td>Customer</td>  
    <td>CustomerID</td>  
    <td>Analyst</td>  
    <td>AnalystID</td>  
    <td>Overall</td>  
    <td>&nbsp;</td>  
    </tr><tr>  
    <td>Received</td>  
    <td>21/06/06</td>  
    <td rowspan='2' colspan='4'>
    <div class='small'>
    <pre>&nbsp;</pre>
    </div>
    </td>  
    <td>Appearance</td>  
    <td>&nbsp;</td>  
    </tr><tr>  
    <td>Satisfied</td>  
    <td>Yes</td>  
    <td>Attitude</td>  
    <td>&nbsp;</td>  
    </tr><tr>  
    <td rowspan='2' class='comment'>Comments</td>  
    <td rowspan='2' colspan='5'>
    <div class='large'>
    <pre>The job took an excessively long time to complete. The call was not put on hold, and no communication to explain the delay was offered. The cupboard was also supposed to be a secure store, so this compounded the issue.-------------------------------- </pre>
    </div>
    </td>  
    <td>Response</td>  
    <td>&nbsp;</td>  
    </tr><tr>  
    <td>Fix</td>  
    <td>&nbsp;</td>  
    </tr><tr>  
    <td>Call Ref</td>  
    <td>F0053105</td>  
    <td>Customer</td>  
    <td>CustomerID</td>  
    <td>Analyst</td>  
    <td>AnalystID</td>  
    <td>Overall</td>  
    <td>&nbsp;</td>  
    </tr><tr>  
    <td>Received</td>  
    <td>21/06/06</td>  
    <td rowspan='2' colspan='4'>
    <div class='small'>
    <pre>&nbsp;</pre>
    </div>
    </td>  
    <td>Appearance</td>  
    <td>&nbsp;</td>  
    </tr><tr>  
    <td>Satisfied</td>  
    <td>Yes</td>  
    <td>Attitude</td>  
    <td>&nbsp;</td>  
    </tr><tr>  
    <td rowspan='2' class='comment'>Comments</td>  
    <td rowspan='2' colspan='5'>
    <div class='large'>
    <pre>Parcels were delivered to us quickly..-------------------------------- </pre>
    </div>
    </td>  
    <td>Response</td>  
    <td>&nbsp;</td>  
    </tr><tr>  
    <td>Fix</td>  
    <td>&nbsp;</td>  
    </tr><tr>  
    <td>Call Ref</td>  
    <td>F0040072</td>  
    <td>Customer</td>  
    <td>CustomerID</td>  
    <td>Analyst</td>  
    <td>AnalystID</td>  
    <td>Overall</td>  
    <td>&nbsp;</td>  
    </tr><tr>  
    <td>Received</td>  
    <td>21/06/06</td>  
    <td rowspan='2' colspan='4'>
    <div class='small'>
    <pre>&nbsp;</pre>
    </div></td>  
    <td>Appearance</td>  
    <td>&nbsp;</td>  
    </tr><tr>  
    <td>Satisfied</td>  
    <td>Yes</td>  
    <td>Attitude</td>  
    <td>&nbsp;</td>  
    </tr><tr>  
    <td rowspan='2' class='comment'>Comments</td>  
    <td rowspan='2' colspan='5'>
    <div class='large'><pre>&nbsp;</pre>
    </div>
    </td>  
    <td>Response</td>  
    <td>&nbsp;</td>  
    </tr><tr>  
    <td>Fix</td>  
    <td>&nbsp;</td>  
    </tr><tr>  
    <td>Call Ref</td>  
    <td>F0040232</td>  
    <td>Customer</td>  
    <td>CustomerID</td>  
    <td>Analyst</td>  
    <td>AnalystID</td>  
    <td>Overall</td>  
    <td>&nbsp;</td>  
    </tr><tr>  
    <td>Received</td>  
    <td>22/06/06</td>  
    <td rowspan='2' colspan='4'>
    <div class='small'>
    <pre>Response time was not met, and no explanation was given. No communication from the hepldesk or the analyst. Items were causing a H&amp;S hazard, but numerous calls failed to turn up any explanation for the delay or estimate of how long it would take. Very poor communication. </pre>
    </div>
    </td>  
    <td>Appearance</td>  
    <td>&nbsp;</td>  
    </tr><tr>  
    <td>Satisfied</td>  
    <td>No</td>  
    <td>Attitude</td>  
    <td>&nbsp;</td>  
    </tr><tr>  
    <td rowspan='2' class='comment'>Comments</td>  
    <td rowspan='2' colspan='5'>
    <div class='large'>
    <pre>Better communication with customer by helpdesk and analyst.</pre>
    </div>
    </td>  
    <td>Response</td>  
    <td>&nbsp;</td>  
    </tr><tr>  
    <td>Fix</td>  
    <td>&nbsp;</td>  
    </tr></table>
    
    </body>
    </html>
    I hope that this helps.

  10. #10
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Re: td { overflow: hidden; } ?

    Thanks for that. I was hoping to have a fluid layout, as we have a variety of screen resolutions - however the majority will be at 1024x768 with the remainder at 1280x1024 - so I'll adapt to suit 1024/IE for the time being, and maybe later work on a system to test browser/resolution and load the appropriate style sheet.
    Thanks again for your help.

  11. #11
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: td { overflow: hidden; } ?


    Hi there DeadMeatGF,

    coding would be so much easier if we did not have to concern ourselves with IE.



Tags for this Thread