Broken: absolutely positioned divs within a td in FF

Discussion in 'HTML' started by subp@wachtel.us, May 3, 2006.

  1. Guest

    Hi there,
    I've searched and can't find a solution.

    I have a relatively positioned td and absolutely positioned DIVs within
    it. In IE, it works, but in FF it doesn't. In FF, the divs are
    positioned to the nearest containing non-table container, not the TD.
    I was able to 'hack' the problem by adding a div into the markup, but I
    really don't want to have to do that. Any thoughts? I appreciate it.

    Here's my example code:
    HTML file:
    <html><head><title>test</title><link rel="stylesheet" type="text/css"
    href="test_css_positioning.css" /> </head>
    <body>
    <h1>Test of Absolute Positioning in Table Data</h1>
    All of the divs should show up in their proper places inside of the td.
    <table>
    <tr>
    <td id="container">center
    <div id="topleft">topleft</div>
    <div id="topright">topright</div>
    <div id="bottomleft">bottomleft</div>
    <div id="bottomright">bottomright</div>
    </td>
    </tr>
    </table>
    </body>
    </html>

    CSS file:
    td#container {
    position: relative;
    width: 500px;
    border: 1px #000000 solid;
    height: 70px;
    text-align: center;
    vertical-align: middle;}

    #topleft {
    position: absolute;
    top: 0px;
    left: 0px;
    }

    #topright {
    position: absolute;
    top: 0px;
    right: 0px;
    }

    #bottomleft {
    position: absolute;
    bottom: 0px;
    left: 0px;
    }

    #bottomright {
    position: absolute;
    bottom: 0px;
    right: 0px;
    }

    Again, thanks for your help.
    , May 3, 2006
    #1
    1. Advertising

  2. ironcorona Guest

    wrote:
    > Hi there,
    > I've searched and can't find a solution.
    >
    > I have a relatively positioned td and absolutely positioned DIVs within
    > it. In IE, it works, but in FF it doesn't. In FF, the divs are
    > positioned to the nearest containing non-table container, not the TD.
    > I was able to 'hack' the problem by adding a div into the markup, but I
    > really don't want to have to do that. Any thoughts? I appreciate it.


    That's a problem with IE not FF. Absolute positioning *should* take the
    the element that it's applied to out of the flow of the page completely
    and then you position it with reference to the screen's borders.

    SO. If you want to try this approach try positioning the div's (using
    position:relative;) within the td. Since the td box has a defined width
    and height it should work on most screens.

    Try this (note: I've added a <div> to your HTML and altered the CSS):

    <html><head><title>test</title><link rel="stylesheet" type="text/css"
    href="test_css_positioning.css" />
    <style type="text/css">
    td#container {
    position: relative;
    width: 500px;
    border: 1px #000000 solid;
    height: 70px;
    text-align: center;
    }

    #center {
    position: relative;
    top: 40px;
    }

    #topleft {
    position: relative;
    top: -20px;
    left: -220px;
    }

    #topright {
    position: relative;
    top: -40px;
    right: -220px;
    }

    #bottomleft {
    position: relative;
    bottom: -20px;
    left: -210px;
    }

    #bottomright {
    position: relative;
    bottom: 0px;
    right: -210px;
    }
    </style>
    </head>
    <body>
    <h1>Test of Absolute Positioning in Table Data</h1>
    All of the divs should show up in their proper places inside of the td.
    <table>
    <tr>
    <td id="container">
    <div id="center">center</div>
    <div id="topleft">topleft</div>
    <div id="topright">topright</div>
    <div id="bottomleft">bottomleft</div>
    <div id="bottomright">bottomright</div>
    </td>
    </tr>
    </table>
    </body>
    </html>


    Now it looks the same in both browsers. I wouldn't recommend using
    positioning like that because it sets up a whole slew of other problems
    related to people's screen size etc etc.


    --
    ironcorona
    ironcorona, May 3, 2006
    #2
    1. Advertising

  3. Martin Jay Guest

    In message <>,
    writes

    >I have a relatively positioned td and absolutely positioned DIVs within
    >it. In IE, it works, but in FF it doesn't. In FF, the divs are
    >positioned to the nearest containing non-table container, not the TD.
    >I was able to 'hack' the problem by adding a div into the markup, but I
    >really don't want to have to do that. Any thoughts? I appreciate it.


    Sounds yuk!

    What about adding:

    display: block;

    to td#container ???

    td#container {
    display: block;
    position: relative;
    width: 500px;
    border: 1px #000000 solid;
    height: 70px;
    text-align: center;
    vertical-align: middle;}

    --
    Martin Jay
    Martin Jay, May 3, 2006
    #3
  4. Skeeve Guest

    Martin,
    Wow, that worked. I could have sworn that I had tried that, but I
    dunno. Clearly I didn't try it, at least in the current context.

    Thanks!
    Skeeve, May 3, 2006
    #4
  5. ironcorona Guest

    Martin Jay wrote:
    > In message <>,
    > writes
    >
    >> I have a relatively positioned td and absolutely positioned DIVs within
    >> it. In IE, it works, but in FF it doesn't. In FF, the divs are
    >> positioned to the nearest containing non-table container, not the TD.
    >> I was able to 'hack' the problem by adding a div into the markup, but I
    >> really don't want to have to do that. Any thoughts? I appreciate it.

    >
    > Sounds yuk!


    Agreed.

    > What about adding:
    >
    > display: block;


    There it is again. display:block; It seems to be the answer to every
    problem I've seen lately. Yours is a much more elegant solution than mine.

    If I were King of the World I'd give a medal to "display:block;". But
    then you'd probably all ask if I had nothing better to do with my time!!!

    :)

    --
    ironcorona
    ironcorona, May 3, 2006
    #5
  6. Skeeve Guest

    Yeah, and imagine if there were silver bullets like that in other areas
    of life? :) Thanks, by the way, for the time you put in.
    Skeeve, May 3, 2006
    #6
  7. Skeeve Guest

    So, I thought I was out of the woods, but the example I created (for
    simplicity) hid an issue. That td that now has 'display: block;' as an
    attribute is actually spanning columns, and followed by other rows with
    multiple TDs.

    When display: block; is added, it pushes (only in FF) all of the
    remaining columns to the right, seemingly negating the colspan table
    attribute. So, I added display: inherit; (tried others too) to the
    following TR tags, and it does move the columns back into place, but
    they don't match up anymore.

    html snippet:
    __________
    <table>
    <tr>
    <td colspan="5" id="container">center
    <div id="topleft">topleft</div>
    <div id="topright">topright</div>
    <div id="bottomleft">bottomleft</div>
    <div id="bottomright">bottomright</div>
    </td>
    </tr>
    <tr class="rows">
    <td class="data">Column 1</td>
    <td class="data">Column 2</td>
    <td class="data">Column 3</td>
    <td class="data">Column 4</td>
    <td class="data">Column 5</td>
    </tr>
    </table>
    ____________

    css:
    ___________
    table {
    border-collapse: collapse;}

    td#container {
    display: block;
    position: relative;
    width: 500px;
    border: 1px #000000 solid;
    height: 70px;
    text-align: center;
    vertical-align: middle;}

    #topleft {
    position: absolute;
    top: 0px;
    left: 0px;
    }

    #topright {
    position: absolute;
    top: 0px;
    right: 0px;
    }

    #bottomleft {
    position: absolute;
    bottom: 0px;
    left: 0px;
    }

    #bottomright {
    position: absolute;
    bottom: 0px;
    right: 0px;
    }

    tr.rows {
    display: inherit;}

    td.data {width: 100px;
    border-top: 1px #636262 solid;
    border-left: 1px #636262 solid;
    border-right: 1px #636262 solid;
    border-bottom: 0px;}
    _____________________

    Is there a good solution to this one? Thanks again!
    Skeeve, May 3, 2006
    #7
  8. ironcorona Guest

    Skeeve wrote:
    > So, I thought I was out of the woods, but the example I created (for
    > simplicity) hid an issue. That td that now has 'display: block;' as an
    > attribute is actually spanning columns, and followed by other rows with
    > multiple TDs.
    >
    > When display: block; is added, it pushes (only in FF) all of the
    > remaining columns to the right, seemingly negating the colspan table
    > attribute. So, I added display: inherit; (tried others too) to the
    > following TR tags, and it does move the columns back into place, but
    > they don't match up anymore.
    >
    > html snippet:
    > __________
    > <table>
    > <tr>
    > <td colspan="5" id="container">center
    > <div id="topleft">topleft</div>
    > <div id="topright">topright</div>
    > <div id="bottomleft">bottomleft</div>
    > <div id="bottomright">bottomright</div>
    > </td>
    > </tr>
    > <tr class="rows">
    > <td class="data">Column 1</td>
    > <td class="data">Column 2</td>
    > <td class="data">Column 3</td>
    > <td class="data">Column 4</td>
    > <td class="data">Column 5</td>
    > </tr>
    > </table>
    > ____________
    >
    > css:
    > ___________
    > table {
    > border-collapse: collapse;}
    >
    > td#container {
    > display: block;
    > position: relative;
    > width: 500px;
    > border: 1px #000000 solid;
    > height: 70px;
    > text-align: center;
    > vertical-align: middle;}
    >
    > #topleft {
    > position: absolute;
    > top: 0px;
    > left: 0px;
    > }
    >
    > #topright {
    > position: absolute;
    > top: 0px;
    > right: 0px;
    > }
    >
    > #bottomleft {
    > position: absolute;
    > bottom: 0px;
    > left: 0px;
    > }
    >
    > #bottomright {
    > position: absolute;
    > bottom: 0px;
    > right: 0px;
    > }
    >
    > tr.rows {
    > display: inherit;}
    >
    > td.data {width: 100px;
    > border-top: 1px #636262 solid;
    > border-left: 1px #636262 solid;
    > border-right: 1px #636262 solid;
    > border-bottom: 0px;}
    > _____________________
    >
    > Is there a good solution to this one? Thanks again!


    This one I'm on top of. Take out the width:500px; from
    td#container and add it into the overall table rules. The CSS should
    look like:

    table {
    width:500px;
    border-collapse: collapse;}

    td#container {
    display: block;
    position: relative;

    border: 1px #000000 solid;
    height: 70px;
    text-align: center;
    vertical-align: middle;}

    #topleft {
    position: absolute;
    top: 0px;
    left: 0px;
    }

    #topright {
    position: absolute;
    top: 0px;
    right: 0px;
    }

    #bottomleft {
    position: absolute;
    bottom: 0px;
    left: 0px;
    }

    #bottomright {
    position: absolute;
    bottom: 0px;
    right: 0px;
    }

    tr.rows {
    display: inherit;}

    td.data {width: 100px;
    border-top: 1px #636262 solid;
    border-left: 1px #636262 solid;
    border-right: 1px #636262 solid;
    border-bottom: 0px;}


    --
    ironcorona
    ironcorona, May 3, 2006
    #8
  9. ironcorona Guest

    Skeeve wrote:
    > Yeah, and imagine if there were silver bullets like that in other areas
    > of life? :) Thanks, by the way, for the time you put in.


    Hey, it's fun AND you get to learn things. Any time.

    --
    ironcorona
    ironcorona, May 3, 2006
    #9
  10. Skeeve Guest

    Hi again,
    Well, I'm still running into this problem every time I want to make
    what is inside of a td absolutely positioned. The problem is that
    adding display: block; detaches that td from the rest of the table and
    then managing the rest of the table is as akward as managing a bunch of
    divs in a pseudo-table and trying to get them to line up.

    So, sorry to be bone-headed about this, but here it is again. I have
    to use absolute positioning within only one or some TDs in a table and
    not throw off the rest of the table, which display: block; seems to do.
    So, either there's another way, or, there's a way of haiving block not
    throw everything else off. I'm hoping one or the other.

    Well, thanks again!
    Skeeve, May 4, 2006
    #10
  11. ironcorona Guest

    Skeeve wrote:
    > Hi again,
    > Well, I'm still running into this problem every time I want to make
    > what is inside of a td absolutely positioned. The problem is that
    > adding display: block; detaches that td from the rest of the table and
    > then managing the rest of the table is as akward as managing a bunch of
    > divs in a pseudo-table and trying to get them to line up.


    Is there any particular reason you need to change the positioning of
    just 1 td? If you need to move them around the screen you can just
    change the position of the entire table. If you want the boxes lined up
    in a certain way then why don't you position some divs (though I
    wouldn't recommend that. It won't work cross-browser).

    When you use position it takes the element out of its normal place in
    the flow of the page. Doing this to one td in the table effects the
    entire table.

    --
    ironcorona
    ironcorona, May 4, 2006
    #11
  12. Skeeve Guest

    What I'm trying to do is place divs within table data elements with
    absolute values in relation to the td container. The problem is, in
    order to do that, you have to use position; relative (or other position
    type) for the container. Otherwise, the objects contained within the
    container will just ignore the container. The problem is that IE works
    and FF doesn't. To make FF work, it was recommended that I use
    display: block;. That works for that td, but breaks the rest of the
    table.

    So, maybe I'm just barking up the wrong tree with this design, and I
    know I can solve all of this by using a div within the td, but I don't
    like that because then I'm changing the markup to cater to the display,
    which is generally bad.

    Does that make sense?
    Skeeve, May 4, 2006
    #12
  13. ironcorona Guest

    Skeeve wrote:
    > What I'm trying to do is place divs within table data elements with
    > absolute values in relation to the td container. The problem is, in
    > order to do that, you have to use position; relative (or other position
    > type) for the container. Otherwise, the objects contained within the
    > container will just ignore the container. The problem is that IE works
    > and FF doesn't. To make FF work, it was recommended that I use
    > display: block;. That works for that td, but breaks the rest of the
    > table.
    >
    > So, maybe I'm just barking up the wrong tree with this design, and I
    > know I can solve all of this by using a div within the td, but I don't
    > like that because then I'm changing the markup to cater to the display,
    > which is generally bad.
    >
    > Does that make sense?


    Yes, it does. Did you see my post where I told you

    "Take out the width:500px; from
    td#container and add it into the overall table rules."

    Did that work? It seemed to work in my borwsers.


    --
    ironcorona
    ironcorona, May 4, 2006
    #13
  14. wrote :
    > Hi there,
    > I've searched and can't find a solution.
    >
    > I have a relatively positioned td



    The latest CSS 2.1 Working draft (in fact, all CSS 2.x technical
    recommendation releases) strongly discourage the use of position on
    table cells:

    "The effect of 'position:relative' on (...) table-cell (...) elements is
    undefined."
    http://www.w3.org/TR/CSS21/visuren.html#propdef-position

    "Note. Positioning and floating of table cells can cause them not to be
    table cells anymore, according to the rules in section 9.7"
    http://www.w3.org/TR/CSS21/tables.html#q7


    and absolutely positioned DIVs within
    > it.



    Why make complex when you can do simple?


    > In IE, it works, but in FF it doesn't.


    Chances are: in IE, it's a layout bug but in FF it renders exactly what
    your code demanded.


    > Here's my example code:


    How about an url instead?


    > HTML file:
    > <html><head><title>test</title><link rel="stylesheet" type="text/css"
    > href="test_css_positioning.css" />


    Is this XHTML or HTML? You use no doctype declaration.

    </head>
    > <body>
    > <h1>Test of Absolute Positioning in Table Data</h1>
    > All of the divs should show up in their proper places inside of the td.
    > <table>
    > <tr>
    > <td id="container">center
    > <div id="topleft">topleft</div>
    > <div id="topright">topright</div>
    > <div id="bottomleft">bottomleft</div>
    > <div id="bottomright">bottomright</div>
    > </td>
    > </tr>
    > </table>
    > </body>
    > </html>
    >
    > CSS file:
    > td#container {
    > position: relative;
    > width: 500px;
    > border: 1px #000000 solid;
    > height: 70px;
    > text-align: center;
    > vertical-align: middle;}
    >
    > #topleft {
    > position: absolute;
    > top: 0px;
    > left: 0px;
    > }


    So far, we can establish for sure that the whole table, table rows and
    table cells were not needed at all if you wanted to position something.
    If the table (and table row, table cells) were needed, then using css
    properties responsible for horizontal alignment was ok.

    GĂ©rard
    --
    remove blah to email me
    =?ISO-8859-1?Q?G=E9rard_Talbot?=, May 5, 2006
    #14
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. John A Grandy
    Replies:
    3
    Views:
    322
    darrel
    Jun 15, 2004
  2. Guybrush Threepwood
    Replies:
    1
    Views:
    457
    Mitja Trampus
    Dec 14, 2005
  3. jonefer

    Absolutely Positioned controls and tables

    jonefer, Aug 23, 2007, in forum: ASP .Net Building Controls
    Replies:
    0
    Views:
    700
    jonefer
    Aug 23, 2007
  4. Replies:
    0
    Views:
    113
  5. maya
    Replies:
    4
    Views:
    224
Loading...

Share This Page