www.webdeveloper.com
Results 1 to 5 of 5

Thread: Scroll liquid table cell in Moz and FF

  1. #1
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304

    Exclamation Scroll liquid table cell in Moz and FF

    I'm trying to get a single table cell to be scrollable in Mozilla and Firefox using CSS. I know this can be done by placing a DIV into the <td>. In IE this will even work when the td-height is set to a percentage, but in Moz and FF this needs to be a set height. Is there a method to work around this set height and create a liquid height? It should work in ALL browsers!
    Code:
    .scrollable {height:100%; overflow:auto;}
    Now please don't start about not using tables for web layout. I know all about that and totally agree. But here is a case where there is no other option.

    cheers, Jochem
    "to live = to learn"

  2. #2
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    Hmm... I figured that as soon as I put in a DOCTYPE, it won't even work in IE anymore. This shouldn't be too hard to solve, or is it...? Here's the full code:

    cheers, Jochem

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    
    <style type="text/css">
    html , body {
    	padding		: 0;
    	height		: 100%;
    	}
    table {
    	width		: 750px;
    	height		: 98%;
    	border		: 2px solid #000;
    	} 
    td {
    	border		: 1px solid #f00;
    	vertical-align	: top;
    	text-align	: justify;
    	font		: 10pt Verdana, Arial, Helvetica, sans-serif;
    	}
    caption {
    	text-align	: left;
    	font		: 8pt Verdana, Arial, Helvetica, sans-serif;
    	}
    .scrollable { 
    	height		: 100%;
    	overflow	: auto; 
    	}
    </style>
    
    </head><body> 
    
    <table align="center">
    <caption align="bottom">caption text</caption>
    <tr>	<td height="100">text goes here</td>
    	<td>text goes here</td></tr> 
    <tr>	<td>text goes here</td>
    	<td><div class="scrollable">
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text <br>
    		extra text extra text extra text extra text
    		</div></td></tr>
    </table>
    
    </body></html>
    Last edited by jochem; 07-04-2005 at 11:36 AM.
    "to live = to learn"

  3. #3
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    mmm... I'm not an expert, but I would say, as long as you don't specify a height for your td element ( the one that's supposed to be scrollable ), the browser will consider it as as high as the content is. It will just scroll the page vertically.
    Now, if you give the td a fixed height and the div a height of 100%, you'll get the desired effect ( if I understood well what you wanted... )
    Sorry if I was pointing something obvious you had already tried...
    I know you want liquid height, but I really don't know if it's possible to work around that...
    And now, i realise my answer is not really helping, but... hey, it will prevent other users from writing the same thing...

  4. #4
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    I have found a pure CSS solution. It's not pixel perfect design-wise, but I now have a border, a static header and menu, a footer and a scrollable liquid text div. It works with all screen resolutions and in all browsers. I would very much like to get your response.

    cheers, Jochem

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    
    <style type="text/css">
    html, body {padding:0; height:100%;}
    #CONTAINER, #HEAD, #FOOTER, #MENU, #TEXT {position:absolute;}
    #CONTAINER	{z-index:1; width:750px; height:100%;  top:0px;  margin-left:-375px; left:50%;}
    #HEAD		{z-index:4; width:730px; height:100px; top:10px; border:2px solid #f00;}
    #FOOTER		{z-index:3; width:750px; height:100px; top:96%;}
    #MENU		{z-index:3; width:90px;  height:93%;   top:10px; border:2px solid #00f;}
    #TEXT		{z-index:2; width:650px; height:93%;   top:10px; border:2px solid #000; padding-left:100px; overflow:auto;}
    </style>
    
    </head><body>
    
    <div id="CONTAINER">
    <div id="HEAD">head</div>
    <div id="FOOTER">footer</div>
    <div id="MENU"><br><br><br><br><br><br>menu</div>
    <div id="TEXT"><br><br><br><br><br><br>
    	text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
    	text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
    	text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
    	text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
    	text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
    	text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text
    	</div>
    </div>
    
    </body></html>
    "to live = to learn"

  5. #5
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    I think you did the right thing by turning to css.... congratulations !!!!
    ( i was also wondering why you weren't doing it with css, but you said it was not possible... )

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles