Web Analytics Made Easy -
StatCounter Problems expanding div in table cell - CodingForum

Announcement

Collapse
No announcement yet.

Problems expanding div in table cell

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Problems expanding div in table cell

    Code:
    <html>
    <head>
    </head>
    <style> 
    table {border-collapse: collapse;} 
    td {border-style: solid; width: 150px; height:50px; border-width: 1px; border-color: gray;} 
    div.test {position:relative; padding:0; margin:0; height:100%;}
    </style> 
    <table> 
    <tr><td></td>
    <td rowspan="2">
    <div class="test">
    <div style="position:absolute;width: 100%; height: 100%; background-color: red;"></div> 
    </div>
    </td>
    </tr> 
    <tr>
    <td></td>
    </tr>
    </table> 
    </html>
    When I test something such as this, the problem I am having is that the div(with the red background color) won't take up the td height in firefox. That's the only browser that seems to have the issue. I'm wondering if anybody knows or has suggestions to fix this. Thanks.
    Adobe Dreamweaver shall be destroyed!

  • #2
    Nevermind, figured it out. Easiest to use javascript to get the cell height and apply it to the div.
    Adobe Dreamweaver shall be destroyed!

    Comment


    • #3
      Hi,

      If you check your code.. in CSS code, you defined 50px height of td.

      100% height means ... 100% height of its parent element, so div is taking height as 50px only instead only merged td..

      Comment


      • #4
        Originally posted by votter View Post
        Code:
        <html>
        <head>
        </head>
        <style> 
        table {border-collapse: collapse;} 
        td {border-style: solid; width: 150px; height:50px; border-width: 1px; border-color: gray;} 
        div.test {position:relative; padding:0; margin:0; height:100%;}
        </style> 
        <table> 
        <tr><td></td>
        <td rowspan="2">
        <div class="test">
        <div style="position:absolute;width: 100%; height: 100%; background-color: red;"></div> 
        </div>
        </td>
        </tr> 
        <tr>
        <td></td>
        </tr>
        </table> 
        </html>
        When I test something such as this, the problem I am having is that the div(with the red background color) won't take up the td height in firefox. That's the only browser that seems to have the issue. I'm wondering if anybody knows or has suggestions to fix this. Thanks.
        You do know why tables for layouts are bad and really discouraged for the modern web?
        Teed

        Comment


        • #5
          Yeah vikram, but shouldn't it account for 2 then since it's joining two together? Though it doesn't really matter now, I've got it working fine. Thanks.

          Yes teedoff, I do know. I do not use tables for layouts. This is for tabular data.
          Adobe Dreamweaver shall be destroyed!

          Comment


          • #6
            Originally posted by votter View Post
            Yeah vikram, but shouldn't it account for 2 then since it's joining two together? Though it doesn't really matter now, I've got it working fine. Thanks.

            Yes teedoff, I do know. I do not use tables for layouts. This is for tabular data.
            ahh, my mistake. I would also point out one more thing though, and you may already know and imploy this, but a valid doctype is required for cross-browser compliance. Just thought I'd let you know.

            Good luck and glad you got it working.
            Teed

            Comment


            • #7
              Yeah, no problem. I guess I should have specified that in the beginning. haha
              Adobe Dreamweaver shall be destroyed!

              Comment

              Working...
              X