question with display:table-cell

Discussion in 'HTML' started by richard, Jan 3, 2010.

  1. richard

    richard Guest

    Playing around with this I come to find out it has a problem with breakage.
    Specially with IE. In FF the container and contents are shown as desired,
    but breaks upon window narrowing. IE shows a broken box. At least in my
    editor it does anyways. Is there something I'm missing with the use of
    table-cell?

    No url. You copy and paste into your own editor.




    <body>

    <div id="container" style="display:table-cell; border:solid 2px #f00;">
    <div id="box1" style="display:table-cell; float:left; width:100px;
    padding:10px; border:solid 2px #ff0;">
    hello
    </div>

    <div id="box2" style="display:table-cell; float:left; width:100px;
    padding:10px; border:solid 2px #00f;">
    goodbye
    </div>

    </div>
    </body>
     
    richard, Jan 3, 2010
    #1
    1. Advertising

  2. richard

    dorayme Guest

    In article <>,
    richard <> wrote:

    > Playing around with this I come to find out it has a problem with breakage.
    > Specially with IE. In FF the container and contents are shown as desired,
    > but breaks upon window narrowing. IE shows a broken box. At least in my
    > editor it does anyways. Is there something I'm missing with the use of
    > table-cell?
    >
    > No url. You copy and paste into your own editor.
    >

    YES SIR! THREE BAGS FULL, SIR!
    >
    >
    > <body>
    >
    > <div id="container" style="display:table-cell; border:solid 2px #f00;">
    > <div id="box1" style="display:table-cell; float:left; width:100px;
    > padding:10px; border:solid 2px #ff0;">
    > hello
    > </div>
    >
    > <div id="box2" style="display:table-cell; float:left; width:100px;
    > padding:10px; border:solid 2px #00f;">
    > goodbye
    > </div>
    >
    > </div>
    > </body>


    What induces you to declare display as table-cell but then float. Why
    would you display the containing div as a *cell*. Am I going mad or is
    it you?

    This looks more sensible to my crazy brain:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>One Way</title>
    </head>
    <body>
    <div id="container" style="display:table; border:solid 2px #f00;">
    <div id="box1" style="display:table-cell; width:400px;
    padding:10px; border:solid 2px #ff0;">
    Cras vel eros. Vivamus sed odio et orci tincidunt ornare.
    Duis dui lectus, commodo ut, gravida id, ultricies quis, tellus.
    Vestibulum blandit nibh eget turpis. Quisque mollis, lacus consectetur
    eleifend convallis, diam augue blandit magna. Cras vel eros. Vivamus sed
    odio et orci tincidunt ornare. Duis dui lectus, commodo ut, gravida id,
    ultricies quis, tellus. Vestibulum blandit nibh eget turpis. Quisque
    mollis, lacus consectetur eleifend convallis, diam augue blandit magna.
    Cras vel eros. Vivamus sed odio et orci tincidunt ornare. Duis dui
    lectus, commodo ut, gravida id, ultricies quis, tellus. Vestibulum
    blandit nibh eget turpis. Quisque mollis, lacus consectetur eleifend
    convallis, diam augue blandit magna.
    </div>
    <div id="box2" style="display:table-cell; width:200px;
    padding:10px; border:solid 2px #00f;">
    Cras vel eros. Vivamus sed odio et orci tincidunt ornare.
    Duis dui lectus, commodo ut, gravida id, ultricies quis, tellus.
    Vestibulum blandit nibh eget turpis. Quisque mollis, lacus consectetur
    eleifend convallis, diam augue blandit magna.
    </div>
    </div>
    </body>
    </html>

    As for IE, you cannot expect IE to respect display: table-cell and many
    other such things. Use a real table and be done.

    --
    dorayme
     
    dorayme, Jan 3, 2010
    #2
    1. Advertising

  3. richard

    freemont Guest

    On Sun, 03 Jan 2010 12:44:56 -0700, RtS writ:

    > No url. You copy and paste into your own editor.


    Sure. You just sit tight and we'll get right to that.

    --
    "Because all you of Earth are idiots!"
    ¯`·.¸¸.·´¯`·-> freemont© <-·´¯`·.¸¸.·´¯
     
    freemont, Jan 3, 2010
    #3
  4. richard

    Gus Richter Guest

    In article <>,
    richard <> wrote:

    > Playing around with this I come to find out it has a problem with breakage.
    > Specially with IE. In FF the container and contents are shown as desired,
    > but breaks upon window narrowing. IE shows a broken box. At least in my
    > editor it does anyways. Is there something I'm missing with the use of
    > table-cell?
    >
    > No url. You copy and paste into your own editor.
    >

    YES SIR! THREE BAGS FULL, SIR! > > > <body>
    >
    > <div id="container" style="display:table-cell; border:solid 2px #f00;">
    > <div id="box1" style="display:table-cell; float:left; width:100px;
    > padding:10px; border:solid 2px #ff0;">
    > hello
    > </div>
    >
    > <div id="box2" style="display:table-cell; float:left; width:100px;
    > padding:10px; border:solid 2px #00f;">
    > goodbye
    > </div>
    >
    > </div>
    > </body>


    What induces you to declare display as table-cell but then float. Why
    would you display the containing div as a *cell*. Am I going mad or is
    it you?
    This looks more sensible to my crazy brain:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>One Way</title>
    </head>
    <body>
    <div id="container" style="display:table; border:solid 2px #f00;">
    <div id="box1" style="display:table-cell; width:400px;
    padding:10px; border:solid 2px #ff0;">
    Cras vel eros. Vivamus sed odio et orci tincidunt ornare.
    Duis dui lectus, commodo ut, gravida id, ultricies quis, tellus.
    Vestibulum blandit nibh eget turpis. Quisque mollis, lacus consectetur
    eleifend convallis, diam augue blandit magna. Cras vel eros. Vivamus sed
    odio et orci tincidunt ornare. Duis dui lectus, commodo ut, gravida id,
    ultricies quis, tellus. Vestibulum blandit nibh eget turpis. Quisque
    mollis, lacus consectetur eleifend convallis, diam augue blandit magna.
    Cras vel eros. Vivamus sed odio et orci tincidunt ornare. Duis dui
    lectus, commodo ut, gravida id, ultricies quis, tellus. Vestibulum
    blandit nibh eget turpis. Quisque mollis, lacus consectetur eleifend
    convallis, diam augue blandit magna.
    </div>
    <div id="box2" style="display:table-cell; width:200px;
    padding:10px; border:solid 2px #00f;">
    Cras vel eros. Vivamus sed odio et orci tincidunt ornare.
    Duis dui lectus, commodo ut, gravida id, ultricies quis, tellus.
    Vestibulum blandit nibh eget turpis. Quisque mollis, lacus consectetur
    eleifend convallis, diam augue blandit magna.
    </div>
    </div>

    <div id="container" style="display:table-cell; border:solid 2px #f00;">
    <div id="box1" style="display:table-cell; float:left; width:100px;
    padding:10px; border:solid 2px #ff0;">
    hello
    </div>

    <div id="box2" style="display:table-cell; float:left; width:100px;

    position:relative;left:30px; /* <---- my addition to his stuff */

    padding:10px; border:solid 2px #00f;">
    goodbye
    </div>

    </div>


    </body>
    </html>

    As for IE, you cannot expect IE to respect display: table-cell and many
    other such things. Use a real table and be done.

    --
    dorayme

    ===================

    Sorry about the "Edit Message as New", but I wanted your markup
    unaltered but with his original, plus my addition - all included. I hope
    it works in your (broken?) news reader.

    You correctly pointed out that the floats were superfluous in his
    example, however, note that with my addition I demonstrate its usage if
    the float were to be repositioned anywhere from its only two normal
    float states (left and right).

    This also gives the answer/corrects another thread in CIWAS (My VALID
    page:....) wherein GTalbot states "Float and position should never go
    together" and Ben C responds with "Why not?" - GTalbot has not answered
    so far.

    --
    Gus
     
    Gus Richter, Jan 3, 2010
    #4
  5. richard

    Gus Richter Guest

    On 1/3/2010 3:21 PM, dorayme wrote:
    > In article<>,
    > richard<> wrote:
    >
    >> Playing around with this I come to find out it has a problem with breakage.
    >> Specially with IE. In FF the container and contents are shown as desired,
    >> but breaks upon window narrowing. IE shows a broken box. At least in my
    >> editor it does anyways. Is there something I'm missing with the use of
    >> table-cell?
    >>
    >> No url. You copy and paste into your own editor.
    >>

    > YES SIR! THREE BAGS FULL, SIR!
    >>
    >>
    >> <body>
    >>
    >> <div id="container" style="display:table-cell; border:solid 2px #f00;">
    >> <div id="box1" style="display:table-cell; float:left; width:100px;
    >> padding:10px; border:solid 2px #ff0;">
    >> hello
    >> </div>
    >>
    >> <div id="box2" style="display:table-cell; float:left; width:100px;
    >> padding:10px; border:solid 2px #00f;">
    >> goodbye
    >> </div>
    >>
    >> </div>
    >> </body>

    >
    > What induces you to declare display as table-cell but then float. Why
    > would you display the containing div as a *cell*. Am I going mad or is
    > it you?
    >
    > This looks more sensible to my crazy brain:
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    > <html>
    > <head>
    > <meta http-equiv="content-type" content="text/html; charset=utf-8">
    > <title>One Way</title>
    > </head>
    > <body>
    > <div id="container" style="display:table; border:solid 2px #f00;">
    > <div id="box1" style="display:table-cell; width:400px;
    > padding:10px; border:solid 2px #ff0;">
    > Cras vel eros. Vivamus sed odio et orci tincidunt ornare.
    > Duis dui lectus, commodo ut, gravida id, ultricies quis, tellus.
    > Vestibulum blandit nibh eget turpis. Quisque mollis, lacus consectetur
    > eleifend convallis, diam augue blandit magna. Cras vel eros. Vivamus sed
    > odio et orci tincidunt ornare. Duis dui lectus, commodo ut, gravida id,
    > ultricies quis, tellus. Vestibulum blandit nibh eget turpis. Quisque
    > mollis, lacus consectetur eleifend convallis, diam augue blandit magna.
    > Cras vel eros. Vivamus sed odio et orci tincidunt ornare. Duis dui
    > lectus, commodo ut, gravida id, ultricies quis, tellus. Vestibulum
    > blandit nibh eget turpis. Quisque mollis, lacus consectetur eleifend
    > convallis, diam augue blandit magna.
    > </div>
    > <div id="box2" style="display:table-cell; width:200px;
    > padding:10px; border:solid 2px #00f;">
    > Cras vel eros. Vivamus sed odio et orci tincidunt ornare.
    > Duis dui lectus, commodo ut, gravida id, ultricies quis, tellus.
    > Vestibulum blandit nibh eget turpis. Quisque mollis, lacus consectetur
    > eleifend convallis, diam augue blandit magna.
    > </div>
    > </div>
    > </body>
    > </html>
    >
    > As for IE, you cannot expect IE to respect display: table-cell and many
    > other such things. Use a real table and be done.
    >


    Here's my text from the other article which you may not see properly
    after your sig and which responded to the OP rather than to you. Please
    run the example as I provided.
    ~~~~~~~~~~

    Sorry about the "Edit Message as New", but I wanted your markup
    unaltered but with his original, plus my addition - all included. I hope
    it works in your (broken?) news reader.

    You correctly pointed out that the floats were superfluous in his
    example, however, note that with my addition I demonstrate its usage if
    the float were to be repositioned anywhere from its only two normal
    float states (left and right).

    This also gives the answer/corrects another thread in CIWAS (My VALID
    page:....) wherein GTalbot states "Float and position should never go
    together" and Ben C responds with "Why not?" - GTalbot has not answered
    so far.

    --
    Gus
     
    Gus Richter, Jan 3, 2010
    #5
  6. richard

    richard Guest

    On Sun, 3 Jan 2010 12:44:56 -0700, richard wrote:

    > Playing around with this I come to find out it has a problem with breakage.
    > Specially with IE. In FF the container and contents are shown as desired,
    > but breaks upon window narrowing. IE shows a broken box. At least in my
    > editor it does anyways. Is there something I'm missing with the use of
    > table-cell?
    >
    > No url. You copy and paste into your own editor.
    >
    >
    >
    >
    > <body>
    >
    > <div id="container" style="display:table-cell; border:solid 2px #f00;">
    > <div id="box1" style="display:table-cell; float:left; width:100px;
    > padding:10px; border:solid 2px #ff0;">
    > hello
    > </div>
    >
    > <div id="box2" style="display:table-cell; float:left; width:100px;
    > padding:10px; border:solid 2px #00f;">
    > goodbye
    > </div>
    >
    > </div>
    > </body>


    As a follow up, I changed container 'table-cell' to 'block' and removed the
    floats. Behaves just like a regular table now.
    When the window is narrowed, everything crunches together like it's
    supposed to and nothing breaks.
     
    richard, Jan 3, 2010
    #6
  7. richard

    Gus Richter Guest

    On 1/3/2010 2:44 PM, richard wrote:
    > Playing around with this I come to find out it has a problem with breakage.
    > Specially with IE. In FF the container and contents are shown as desired,
    > but breaks upon window narrowing. IE shows a broken box. At least in my
    > editor it does anyways. Is there something I'm missing with the use of
    > table-cell?


    Which flavor of IE are you speaking? For FF, I'm going with the latest

    > No url. You copy and paste into your own editor.


    Me, personally, I'm OK with a small demo C&P, but I'm also interested in
    which "editor" you are referring?

    BTW, what you're missing regarding the use of table-cell could be that
    your IE does not support it.

    <http://lmgtfy.com/?q=browser+standards+support>

    --
    Gus
     
    Gus Richter, Jan 3, 2010
    #7
  8. richard

    richard Guest

    On Sun, 3 Jan 2010 12:44:56 -0700, richard wrote:

    > Playing around with this I come to find out it has a problem with breakage.
    > Specially with IE. In FF the container and contents are shown as desired,
    > but breaks upon window narrowing. IE shows a broken box. At least in my
    > editor it does anyways. Is there something I'm missing with the use of
    > table-cell?
    >
    > No url. You copy and paste into your own editor.
    >
    >
    >
    >
    > <body>
    >
    > <div id="container" style="display:table-cell; border:solid 2px #f00;">
    > <div id="box1" style="display:table-cell; float:left; width:100px;
    > padding:10px; border:solid 2px #ff0;">
    > hello
    > </div>
    >
    > <div id="box2" style="display:table-cell; float:left; width:100px;
    > padding:10px; border:solid 2px #00f;">
    > goodbye
    > </div>
    >
    > </div>
    > </body>


    well the changes worked in ff3.5, not in IE7.
     
    richard, Jan 3, 2010
    #8
  9. richard

    Roy A. Guest

    On 3 Jan, 23:54, richard <> wrote:
    > On Sun, 3 Jan 2010 12:44:56 -0700, richard wrote:
    > > Playing around with this I come to find out it has a problem with breakage.
    > > Specially with IE. In FF the container and contents are shown as desired,
    > > but breaks upon window narrowing. IE shows a broken box. At least in my
    > > editor it does anyways. Is there something I'm missing with the use of
    > > table-cell?

    >
    > > No url. You copy and paste into your own editor.

    >
    > > <body>

    >
    > > <div id="container" style="display:table-cell; border:solid 2px #f00;">
    > >  <div id="box1" style="display:table-cell; float:left; width:100px;
    > > padding:10px; border:solid 2px #ff0;">
    > >   hello
    > >  </div>

    >
    > >  <div id="box2" style="display:table-cell; float:left; width:100px;
    > > padding:10px; border:solid 2px #00f;">
    > >   goodbye
    > >  </div>

    >
    > > </div>
    > > </body>

    >
    > well the changes worked in ff3.5, not in IE7.


    IE7 don't support display: table, table-row etc.

    http://www.quirksmode.org/css/display.html
     
    Roy A., Jan 4, 2010
    #9
  10. richard

    Roy A. Guest

    On 3 Jan, 22:49, Gus Richter <> wrote:
    > On 1/3/2010 3:21 PM, dorayme wrote:


    [...]

    > Here's my text from the other article which you may not see properly
    > after your sig and which responded to the OP rather than to you. Please
    > run the example as I provided.
    > ~~~~~~~~~~
    >
    > Sorry about the "Edit Message as New", but I wanted your markup
    > unaltered but with his original, plus my addition - all included. I hope
    > it works in your (broken?) news reader.
    >
    > You correctly pointed out that the floats were superfluous in his
    > example, however, note that with my addition I demonstrate its usage if
    > the float were to be repositioned anywhere from its only two normal
    > float states (left and right).
    >
    > This also gives the answer/corrects another thread in CIWAS (My VALID
    > page:....) wherein GTalbot states "Float and position should never go
    > together" and Ben C responds with "Why not?" - GTalbot has not answered
    > so far.


    If the answer is that an float is superfluous with e.g. position:
    relative, then the answer/correction is wrong. If you want an element
    to act like a floated element, but need to change the position up,
    down, left or right; then you need both eg. 'float: left' and
    'position: relative' .

    "It [the float property] may be set for any element, but only applies
    to elements that generate boxes that are not absolutely positioned."
    http://www.w3.org/TR/CSS2/visuren.html#propdef-float
     
    Roy A., Jan 4, 2010
    #10
  11. richard

    Gus Richter Guest

    On 1/3/2010 8:40 PM, Roy A. wrote:
    > On 3 Jan, 22:49, Gus Richter<> wrote:
    >> On 1/3/2010 3:21 PM, dorayme wrote:

    >
    > [...]
    >
    >> Here's my text from the other article which you may not see properly
    >> after your sig and which responded to the OP rather than to you. Please
    >> run the example as I provided.
    >> ~~~~~~~~~~
    >>
    >> Sorry about the "Edit Message as New", but I wanted your markup
    >> unaltered but with his original, plus my addition - all included. I hope
    >> it works in your (broken?) news reader.
    >>
    >> You correctly pointed out that the floats were superfluous in his
    >> example, however, note that with my addition I demonstrate its usage if
    >> the float were to be repositioned anywhere from its only two normal
    >> float states (left and right).
    >>
    >> This also gives the answer/corrects another thread in CIWAS (My VALID
    >> page:....) wherein GTalbot states "Float and position should never go
    >> together" and Ben C responds with "Why not?" - GTalbot has not answered
    >> so far.

    >
    > If the answer is that an float is superfluous with e.g. position:
    > relative, then the answer/correction is wrong. If you want an element
    > to act like a floated element, but need to change the position up,
    > down, left or right; then you need both eg. 'float: left' and
    > 'position: relative' .
    >
    > "It [the float property] may be set for any element, but only applies
    > to elements that generate boxes that are not absolutely positioned."
    > http://www.w3.org/TR/CSS2/visuren.html#propdef-float
    >


    "IF" ?? Darn it all, I read it over and over and can't see how you
    could come up with an "IF" and reverse my position! Had you read it
    properly you would have noted that an example of my position was also
    provided. Nothing wrong with anything else you said.

    --
    Gus
     
    Gus Richter, Jan 4, 2010
    #11
  12. richard

    Andy Dingley Guest

    On 3 Jan, 19:44, richard <> wrote:
    > Playing around with this


    You'd do so much better if you tried to _learn_ something, rather than
    playing around randomly.

    In general though, display: table-cell et al. are best ignored. They
    were originally intended for use with XML+CSS, not HTML+CSS.

    For tables from HTML, use <table>

    For tables from XML, use XSLT to HTML, then <table>

    For HTML use they don't work well - mostly because the most useful
    elements to apply them to are the <table> family anyway, where they're
    already implicit. You need three levels of nesting (table, row, cell)
    to get anywhere useful with table rendering in HTML so you can't do it
    with simple two-level lists like <ul>. As you have to mark up with
    _something_, then it's either three levels of meaningless <div>, or
    just using <table> anyway.

    Then there's always the potential problems of browser support.
     
    Andy Dingley, Jan 5, 2010
    #12
    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. Mark Goldin

    Table in a cell of another table

    Mark Goldin, Aug 19, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    340
    Mark Goldin
    Aug 19, 2004
  2. Sturny Gerard
    Replies:
    2
    Views:
    4,643
    David Dorward
    Dec 27, 2003
  3. Phillip Roncoroni
    Replies:
    14
    Views:
    1,136
    Toby A Inkster
    Apr 5, 2004
  4. Nik Coughin

    display: table-cell and IE

    Nik Coughin, Jan 26, 2005, in forum: HTML
    Replies:
    3
    Views:
    63,269
    bugmenot
    Dec 15, 2007
  5. tomix
    Replies:
    3
    Views:
    195
    tomix
    Oct 23, 2006
Loading...

Share This Page