SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2004
    Location
    san jose
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    scrollable div inside td with percentage height

    hello, i am having issue with creating a scrollable div inside td when the heights are in percentage on mozilla.

    conditions:
    1. i set the table's height to 50%
    2. i set the height of the div that is wrapped by the td to 100%
    3. i set the overflow of the div to "auto"
    4. i put several long multiple lines of text inside the div (to let the scrollbar appear)


    When i run it with IE, it looks good. however, when i run it with mozilla, the div does not want to create the scrollbar. even worse, it push the table's height to accomodate the long multiple lines of the text. at first, i tought it's a bug with mozilla, but then if i set the <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> on the top of the code, both IE and Mozilla then experience the same issue.

    i greatly appreciate for your inputs.

    sample code:
    <html>
    <style>
    .MyDiv
    {
    width:100%;
    height:100%;
    border:1px solid red;
    background-color:yellow;
    overflow:auto;
    }

    .MyWrapper
    {
    border:1px solid black;
    width:50%;
    height:50%;
    padding:0 0 0 0;
    margin: 0 0 0 0;
    table-layout: fixed;
    }
    </style>
    <body>

    <table class="MyWrapper">
    <tr>
    <td>
    <div class="MyDiv">
    repeated lines<br/> repeated lines<br/> repeated lines<br/>
    repeated lines<br/> repeated lines<br/> repeated lines<br/>
    ......
    </div>
    </td>
    </tr>
    </table>


    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well you could do it without a table like this (if thats any use )

    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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    .MyDiv
    {
    width:100%;
    height:100%;
    border:1px solid red;
    background-color:yellow;
    overflow:auto;
    }
    .MyWrapper
    {
    border:1px solid black;
    width:50%;
    height:50%;
    padding:0 ;
    margin: 0 ;
    }
    </style>
    </head>
    <body>
    <div class="MyWrapper"> 
      <div class="MyDiv"> repeated lines<br/>
    	repeated lines<br/>
    	repeated lines<br/>
    	repeated lines<br/>
    	repeated lines<br/>
    	repeated lines<br/>
    	repeated lines<br/>
    	repeated lines<br/>
    	repeated lines<br/>
    	repeated lines<br/>
    	repeated lines<br/>
    	repeated lines<br/>
    	repeated lines<br/>
    	repeated lines<br/>
    	......
     </div>
    </div>
    </body>
    </html>
    Paul

  3. #3
    SitePoint Member
    Join Date
    Nov 2004
    Location
    san jose
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thx paul, that's a quick reply ya, unfortunately, i have to make it work with with the table because they don't want to change the layout of the existing page.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Sorry - I can't see a way to do it with a table - but tables aren't my strongpoint so maybe someone else can help.

    Paul


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
  •