overflow div inside table issue

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • jaybee07
    New Member
    • Aug 2007
    • 2
    #1

    overflow div inside table issue

    I have been working on an application that generates html source code. I came across an issue and have replicated it down to the simplest form. The problem is that I have a div covering 42% of the page. Inside that I have a table that covers 85% of the div. Inside that table I have a div with overflow: auto set so that if the data in the div becomes larger than the 85% of the table the div will start to scroll. The code works fine in IE & not in Firefox. I know I could make changes to get the same result but I have to get this exact code working. Can anyone please help?. Here it is

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html style="height: 100%;">
    <head>
    <title>Untitl ed Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body style="height=" 100%" bgcolor="#FFFFF 5">
    <div style="height: 42%; width: 98%; background-color: #ECECEC;">
    <table cellspacing="0" cellpadding="10 " border="0" style="width: 100%; height: 85%;">
    <tr>
    <td>
    <div style="border: solid 1px #BED6F8; height: 80%; width: 100%; overflow: auto;">
    row<br>
    row<br>
    row<br>
    row<br>
    row<br>
    row<br>
    row<br>
    row<br>
    row<br>
    row<br>
    row<br>
    row<br>
    row<br>
    row<br>
    row<br>
    row<br>
    row<br>
    row<br>
    row<br>
    row<br>
    row<br>
    row<br>
    row<br>
    row<br>
    </div>
    </td>
    </tr>
    </table>
    </div>
    </body>
    </html>

    Thanx in advance...
    Jaybee07
    Tags: None
    • jaybee07
      New Member
      • Aug 2007
      • 2
      #2
      Originally posted by jaybee07
      I have been working on an application that generates html source code. I came across an issue and have replicated it down to the simplest form. The problem is that I have a div covering 42% of the page. Inside that I have a table that covers 85% of the div. Inside that table I have a div with overflow: auto set so that if the data in the div becomes larger than the 85% of the table the div will start to scroll. The code works fine in IE & not in Firefox. I know I could make changes to get the same result but I have to get this exact code working. Can anyone please help?. Here it is

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html style="height: 100%;">
      <head>
      <title>Untitl ed Document</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      </head>
      <body style="height=" 100%" bgcolor="#FFFFF 5">
      <div style="height: 42%; width: 98%; background-color: #ECECEC;">
      <table cellspacing="0" cellpadding="10 " border="0" style="width: 100%; height: 85%;">
      <tr>
      <td>
      <div style="border: solid 1px #BED6F8; height: 80%; width: 100%; overflow: auto;">
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      </div>
      </td>
      </tr>
      </table>
      </div>
      </body>
      </html>

      Thanx in advance...
      Jaybee07
      I figured it out, just if anyone needs to know in the future here is the corrected code for Firefox. I needed to specify 100% heights on both <tbody> and <td>.

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html style="height: 100%;">
      <head>
      <title>Untitl ed Document</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      </head>
      <body style="height: 100%;" bgcolor="#FFFFF 5">
      <div style="height: 42%; width: 98%; background-color: #ECECEC;">
      <table cellspacing="0" cellpadding="10 " border="0" style="width: 100%; height: 85%;">
      <tbody style="height: 100%">
      <tr>
      <td height="100%">
      <div style="border: solid 1px #BED6F8; height: 80%; width: 100%; overflow: auto;">
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      row<br>
      </div>
      </td>
      </tr>
      </tbody>
      </table>
      </div>
      </body>
      </html>

      Rgds,
      Jaybee07

        Comment

        Previous template Next
        Working...