absolute div in table cell

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Robert
    #1

    absolute div in table cell

    Hi,

    I am trying to add a background to a cell that contains multiple
    horizontal coloured layers on top of eachother.

    I managed to do this in IE, but firefox displays something very
    different so I would like to know if my HTML is in error or firefox.

    This is my HTML

    ******

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Table Test</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=utf-8"/>
    <style>
    body
    {
    font-size: 9pt;
    font-family: arial, sans-serif;
    }

    table
    {
    border-collapse: collapse;
    width: 300px;
    }
    td
    {
    border-style: solid;
    border-width: 1px;
    border-color: gray;
    }
    </style>
    </head>
    <body>
    <table >
    <tr>
    <td >1</td>
    <td >22</td>
    <td style="position : relative; width: 20%; padding:
    0px; height: 50px">
    <div style="position : absolute; width: 100%;
    height: 100%; z-index: -1">
    <div style="backgrou nd-color: pink; width:
    100%; height: 50%"></div>
    <div style="backgrou nd-color: cyan; width:
    100%; height: 50%"></div>
    </div>
    333
    </td>
    </tr>
    </table>

    </body>
    </html>

    ******

    There are two problem in firefox. The first is that the coloured divs
    are not visible. The second is that the absolute div is taking 100%
    width and height of the complete window, instead of the containing
    block. I have set the cell to position relative so that the div would be
    the containg clock.
    Visual formatting model
    http://www.w3.org/TR/CSS21/visuren.html#propdef-position

    Visual formatting model details
    http://www.w3.org/TR/CSS21/visudet.html#containing-block-details


    Hope that someone can tell me that my HTML is wrong and tell me why.
    Tags: None
    • Robert
      #2
      Re: absolute div in table cell

      Nobody knows or I was not clear enough in my question?

      Robert wrote:[color=blue]
      > Hi,
      >
      > I am trying to add a background to a cell that contains multiple
      > horizontal coloured layers on top of eachother.
      >
      > I managed to do this in IE, but firefox displays something very
      > different so I would like to know if my HTML is in error or firefox.
      >
      > This is my HTML
      >
      > ******
      >
      > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      > <html>
      > <head>
      > <title>Table Test</title>
      > <meta http-equiv="Content-Type" content="text/html;
      > charset=utf-8"/>
      > <style>
      > body
      > {
      > font-size: 9pt;
      > font-family: arial, sans-serif;
      > }
      >
      > table
      > {
      > border-collapse: collapse;
      > width: 300px;
      > }
      > td
      > {
      > border-style: solid;
      > border-width: 1px;
      > border-color: gray;
      > }
      > </style>
      > </head>
      > <body>
      > <table >
      > <tr>
      > <td >1</td>
      > <td >22</td>
      > <td style="position : relative; width: 20%; padding: 0px;
      > height: 50px">
      > <div style="position : absolute; width: 100%; height:
      > 100%; z-index: -1">
      > <div style="backgrou nd-color: pink; width: 100%;
      > height: 50%"></div>
      > <div style="backgrou nd-color: cyan; width: 100%;
      > height: 50%"></div>
      > </div>
      > 333
      > </td>
      > </tr>
      > </table>
      >
      > </body>
      > </html>
      >
      > ******
      >
      > There are two problem in firefox. The first is that the coloured divs
      > are not visible. The second is that the absolute div is taking 100%
      > width and height of the complete window, instead of the containing
      > block. I have set the cell to position relative so that the div would be
      > the containg clock.
      > http://www.w3.org/TR/CSS21/visuren.h...opdef-position
      > http://www.w3.org/TR/CSS21/visudet.h...-block-details
      >
      > Hope that someone can tell me that my HTML is wrong and tell me why.[/color]

        Comment

        • Spartanicus
          #3
          Re: absolute div in table cell

          Robert <robert@noreply .x> wrote:
          [color=blue]
          >Nobody knows or I was not clear enough in my question?[/color]

          Style issues belong in c.i.w.a.stylesh eets.
          Post a url, not code.
          Snipping quotes down to a minimum and replying beneath is the norm in
          the c.i.w.a.* hierarchy.

          --
          Spartanicus

            Comment

            • Robert
              #4
              Re: absolute div in table cell

              Spartanicus wrote:[color=blue]
              > Robert <robert@noreply .x> wrote:
              >
              >[color=green]
              >>Nobody knows or I was not clear enough in my question?[/color]
              >
              >
              > Style issues belong in c.i.w.a.stylesh eets.[/color]

              ok I post this browser issue in stylesheets.

                Comment

                Previous template Next
                Working...