SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member dawgster's Avatar
    Join Date
    Nov 2004
    Location
    Oldenburg
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy height problem with div in table cell

    Hi @ll,

    I am new to this board so please be gentle if didn't get the right thread to put my post in. I tried to find similar problems here but with no luck.

    I have a webpage that is looks like this:

    <body>
    <table cellspacing="0">
    <tr>
    <td id="top">
    some content here
    </td>
    </tr>
    <tr>
    <td id="content">
    <div id="contentRight">
    lots of content in here!
    </div>
    </td>
    </tr>
    <tr>
    <td id="bottom">
    some bottom content
    </td>
    </tr>
    </table>
    </body>

    The according (external) stylesheet looks like this:

    /* ---------- body ---------- */
    html,body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow: auto;
    }

    body {
    font-family: Verdana;
    font-size: 13px;
    color: #24284B;
    }

    /* ---------- table ---------- */

    table {
    width: 100%;
    height: 100%;
    border: 0px;
    padding: 0px
    border-spacing: 0px;
    font-family: Verdana;
    font-size: 13px;
    }

    td {
    padding: 0px;
    border-spacing: 0px;
    margin: 0px;
    }

    #top {
    height: 76px;
    width: 100%;
    background-color: #CCCCCC;
    }

    #content {
    height: 100%;
    width: 100%;
    }

    #bottom {
    padding-left: 4px;
    height: 68px;
    width: 100%;
    background-color: #CCCCCC;
    }

    /* ---------- divs ---------- */

    #contentRight {
    position: relative;
    width: auto;
    height: 100%;
    overflow: auto;
    }

    As you can see, the whole Layout is supposed to be fullscreen at all times. There are a bar at the top and one at the bottom and the content in between. The top and bottom bar are supposed to be visible at all times. That's why I put the "contentRight" DIV in the content area to get a scrollbar (with the "overflow: auto" property in css) to have an area inside the table cell that is scrollable when the content is larger than the viewable area. This works in IE like a charm, but Mozilla displays two scrollbars when the content is longer than the available space and stretches the content area to 100% of the viewport. Unfortunately I cannot set the px values of the top and bottom table cells to relative values, because there are images in there that need exact positioning.

    I really don't know what to check anymore and hope someone here can help me.

    Regards

    Simon

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

    IE needs to be in quirks mode to work and mozilla will need some different positioning techniques as it won't inherit the 100% height on inner nestings.

    Something like this should work but probably not on older browers.

    works in ie, firefox and opera7.5

    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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" />
    <!-- force quirks mode in ie with the xml prologue-->
    <style type="text/css">
    html,body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow: auto;
    }
    body {
    font-family: Verdana; 
    font-size: 13px;
    color: #24284B;
    }
    /* ---------- table ---------- */
    table { 
    width: 100%;
    height: 100%;
    border: 0px;
    padding: 0px;
    border-spacing: 0px;
    font-family: Verdana;
    font-size: 13px;
    }
    td {
    padding: 0px;
    border-spacing: 0px;
    margin: 0px;
    }
    #top {
    height: 76px;
    width: 100%;
    background-color: #CCCCCC;
    }
    #content {
    height: 100%;
    width: 100%;
    }
    #bottom {
    padding-left: 4px;
    height: 68px;
    width: 100%;
    background-color: #CCCCCC;
    }
    /* ---------- divs ---------- */
    #contentRight {/* for good browsers*/
    position:absolute;
    top:76px;
    bottom:68px;
    width: 100%;
    overflow: auto;
    }
    * html #contentRight {/* for ie only*/
    position: relative;
    top:0;
    height: 100%;
    }
    </style>
    </head>
    <body>
    <table cellspacing="0">
    <tr> 
    	<td id="top"> some content here </td>
    </tr>
    <tr> 
    	<td id="content"> <div id="contentRight"> 
    		<p>lots of content </p>
    		<p>a</p>
    		<p>a</p>
    		<p>&nbsp;</p>
    		<p>a</p>
    		<p>a</p>
    		<p>&nbsp;</p>
    		<p>a</p>
    		<p>a</p>
    		<p>a</p>
    		<p>&nbsp;</p>
    		<p>a</p>
    		<p>a</p>
    		<p>a</p>
    		<p>a</p>
    		<p>a</p>
    		<p>a</p>
    		<p>a</p>
    		<p>&nbsp;</p>
    		<p>a</p>
    		<p>a</p>
    		<p>&nbsp;</p>
    		<p>a</p>
    		<p>&nbsp;</p>
    		<p>a</p>
    		<p>a</p>
    		<p>a</p>
    		<p>&nbsp;</p>
    		<p>a</p>
    		<p>a</p>
    		<p>a</p>
    		<p>a here! </p>
    	 </div></td>
    </tr>
    <tr> 
    	<td id="bottom"> some bottom content </td>
    </tr>
    </table>
    </body>
    </html>
    Hope that helps anyway.

    Paul

  3. #3
    SitePoint Member dawgster's Avatar
    Join Date
    Nov 2004
    Location
    Oldenburg
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    You're the man!

    Good job Paul! That helped!

    Thanx a lot!

    Simon


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
  •