Firefox and style="display:block" on table row

Discussion in 'HTML' started by Christophe MERESSE, Jan 3, 2005.

  1. Hi,

    I encountered a problem with a table in Firefox:

    <table border="1">
    <tr><td>Col1</td><td>Col2</td></tr>
    <tr style="display:block"><td colspan="2">This cell should take 2 columns
    but does not because of the display:block</td></tr>
    </table>

    This problem has been raised by John Dalberg at the begining of
    november (I found it with google groups) and he has been sadely shot down in
    flames.
    but I was in the same situation and I really think that it is a firefox bug.

    If you replace display:block by display:anything it works fine both in IE
    and firefox so that my problem
    is solved but I really wonder what the "block" word does wrong in Firefox...

    Regards
    Christophe
     
    Christophe MERESSE, Jan 3, 2005
    #1
    1. Advertising

  2. "Christophe MERESSE" <> a écrit dans le message de news:
    crclb6$kbg$...
    >
    > If you replace display:block by display:anything it works fine both in IE
    > and firefox so that my problem
    > is solved but I really wonder what the "block" word does wrong in
    > Firefox...
    >

    I was too optimistic, my problem is not solved because when I change the
    display style with javascript
    with element.style.display='none' and then element.style.display='block_it'
    it does not display it back and
    with element.style.display='block' I get into the colspan problem again...

    So the problem is still open.

    Christophe
     
    Christophe MERESSE, Jan 4, 2005
    #2
    1. Advertising

  3. Christophe MERESSE

    Steve Pugh Guest

    "Christophe MERESSE" <> wrote:

    >I encountered a problem with a table in Firefox:
    >
    ><table border="1">
    ><tr><td>Col1</td><td>Col2</td></tr>
    ><tr style="display:block"><td colspan="2">This cell should take 2 columns
    >but does not because of the display:block</td></tr>
    ></table>


    So the second <tr> is no longer a table row, but is instead a block.

    So why should the <td>s within it be treated as if they were still
    within a table row?

    This is what I think is happening: the <tr> is now a block (i.e. it
    might as well be a <div> as far as formatting goes), but is within the
    <table>. The only way this can work is if the block <tr> is within one
    of the cells of the table. Obviously not one of the cells defined by a
    <td> but an anonymous cell created in the first column of an anonymous
    row. If the <tr> is within the first column then the <td> within that
    can't possibly span over into the second column.

    >This problem has been raised by John Dalberg at the begining of
    >november (I found it with google groups) and he has been sadely shot down in
    >flames.
    >but I was in the same situation and I really think that it is a firefox bug.


    Opera agrees with FF. As IE has only basic support for the CSS display
    property, the chances are that IE is wrong and FF and Opera are right.

    >If you replace display:block by display:anything it works fine both in IE
    >and firefox so that my problem


    Well display: anything is undefined in the spec so the default value
    for <tr>, i.e. display: table-row (which IE doesn't support), should
    be used instead.

    >is solved but I really wonder what the "block" word does wrong in Firefox...


    It turns the <tr> into a block instead of a table-row. What else could
    it do?

    Steve
     
    Steve Pugh, Jan 4, 2005
    #3
  4. Christophe MERESSE

    Steve Pugh Guest

    "Christophe MERESSE" <> wrote:

    >"Christophe MERESSE" <> a écrit dans le message de news:
    >crclb6$kbg$...
    >>
    >> If you replace display:block by display:anything it works fine both in IE
    >> and firefox so that my problem
    >> is solved but I really wonder what the "block" word does wrong in
    >> Firefox...
    >>

    >I was too optimistic, my problem is not solved because when I change the
    >display style with javascript
    >with element.style.display='none' and then element.style.display='block_it'
    >it does not display it back and


    Of course it doesn't. block_it isn't a valid value for the display
    property. So it gets ignored and the previously set none is used
    instead.

    >with element.style.display='block' I get into the colspan problem again...
    >
    >So the problem is still open.


    You'll need to branch your script and return block to IE and table-row
    to browsers that actually support CSS2.

    Steve
     
    Steve Pugh, Jan 4, 2005
    #4
  5. Christophe MERESSE

    rf Guest

    Christophe MERESSE" <> wrote
    > Hi,
    >
    > I encountered a problem with a table in Firefox:
    >
    > <table border="1">
    > <tr><td>Col1</td><td>Col2</td></tr>
    > <tr style="display:block"><td colspan="2">This cell should take 2 columns
    > but does not because of the display:block</td></tr>
    > </table>
    >
    > This problem has been raised by John Dalberg at the begining of
    > november (I found it with google groups) and he has been sadely shot down

    in
    > flames.
    > but I was in the same situation and I really think that it is a firefox

    bug.
    >
    > If you replace display:block by display:anything it works fine both in IE
    > and firefox so that my problem
    > is solved but I really wonder what the "block" word does wrong in

    Firefox...

    It's not a bug in the browser (or browsers) it's a bug in your code.

    <tr> elements (table rows) have a default display proterty of display:
    table-row; That is what makes them table rows.

    If you apply display: block; to one then it is no longer a table row, it is
    a standard block. It is as if you were to code:

    <table border="1">
    <tr><td>Col1</td><td>Col2</td></tr>
    <div><td colspan="2">This cell should take 2 columns
    but does not because of the display:block</td></div>
    </table>

    The reason it "appears" to work with IE is probably because IE is
    error-correcting the display property for you.

    Why do you want to do this anyway? The validator would have told you your
    code is incorrect. Throw incorrect code at a browser and who knows what will
    happen.

    --
    Cheers
    Richard.
     
    rf, Jan 4, 2005
    #5
  6. Christophe MERESSE

    Steve Pugh Guest

    "rf" <rf@.invalid> wrote:
    >Christophe MERESSE" <> wrote
    >>
    >> <table border="1">
    >> <tr><td>Col1</td><td>Col2</td></tr>
    >> <tr style="display:block"><td colspan="2">This cell should take 2 columns
    >> but does not because of the display:block</td></tr>
    >> </table>
    >>

    >The validator would have told you your code is incorrect.


    Would it? The above is valid HTML and 'valid' CSS.

    It's fairly mad CSS but that's not something the validator looks
    for...

    Steve
     
    Steve Pugh, Jan 4, 2005
    #6
  7. Christophe MERESSE

    rf Guest

    "Steve Pugh" <> wrote
    > "rf" <rf@.invalid> wrote:


    > >The validator would have told you your code is incorrect.

    >
    > Would it? The above is valid HTML and 'valid' CSS.


    Hmmm. Absolutely correct :)

    --
    Cheers
    Richard.
     
    rf, Jan 4, 2005
    #7
  8. Christophe MERESSE

    Spartanicus Guest

    Steve Pugh <> wrote:

    >You'll need to branch your script and return block to IE and table-row
    >to browsers that actually support CSS2.


    No need for that, setting the display property to "block" first and then
    again to "table-row" should be sufficient providing that the 2 are not
    conjoined (conjoining confuses IE).

    --
    Spartanicus
     
    Spartanicus, Jan 4, 2005
    #8
  9. On Tue, 04 Jan 2005 00:57:17 +0000, Spartanicus <> wrote:

    > [...] setting the display property to "block" first and then again to
    > "table-row" should be sufficient providing that the 2 are not conjoined
    > (conjoining confuses IE).


    Even that should be unnecessary. Provided that the property is set via the
    style attribute (or style object), which it is in this case,

    element.style.display = '';

    will effectively remove the inline style value allowing the browser to
    return to the inherited value.

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Jan 4, 2005
    #9
  10. On Tue, 04 Jan 2005 00:21:43 GMT, rf <rf@.invalid> wrote:

    [snip]

    > The reason [block] "appears" to work with IE is probably because IE is
    > error-correcting the display property for you.


    As others have implied, IE has no concept of the table-row value. In fact,
    Microsoft's documentation
    (<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp>)
    clearly states that all block-like elements (with a few exceptions) have
    'block' as their display value, contrary to specification.

    [snip]

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Jan 4, 2005
    #10
  11. Christophe MERESSE

    Spartanicus Guest

    "Michael Winter" <> wrote:

    >> [...] setting the display property to "block" first and then again to
    >> "table-row" should be sufficient providing that the 2 are not conjoined
    >> (conjoining confuses IE).

    >
    >Even that should be unnecessary. Provided that the property is set via the
    >style attribute (or style object), which it is in this case,
    >
    > element.style.display = '';
    >
    >will effectively remove the inline style value allowing the browser to
    >return to the inherited value.


    Doesn't work here. Is there such a thing as "inheritance" in DOM? There
    is in CSS, but that doesn't apply here. Did you mean default value?

    --
    Spartanicus
     
    Spartanicus, Jan 4, 2005
    #11
  12. On Tue, 04 Jan 2005 10:16:10 +0000, Spartanicus <> wrote:

    > "Michael Winter" <> wrote:


    [snip]

    >> element.style.display = '';
    >>
    >> will effectively remove the inline style value allowing the browser to
    >> return to the inherited value.

    >
    > Doesn't work here.


    Really? Could you take a look at a quick test at
    <URL:http://www.mlwinter.pwp.blueyonder.co.uk/ah/spartanicus/style.html>.
    You'll either see text, or you won't. I'd be very interested to know if
    you don't (and what user agent you're using).

    This should be fairly standard stuff, and a convenient way to sidestep
    implementation differences.

    > Is there such a thing as "inheritance" in DOM? There is in CSS, but that
    > doesn't apply here. Did you mean default value?


    I actually meant the cascaded value. As the style attribute (and
    corresponding DOM object) represents the inline - and therefore most
    specific - style information, removing a particular declaration should
    cause a fall back to any applicable cascaded rules.

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Jan 4, 2005
    #12
  13. Christophe MERESSE

    Spartanicus Guest

    "Michael Winter" <> wrote:

    >>> element.style.display = '';
    >>>
    >>> will effectively remove the inline style value allowing the browser to
    >>> return to the inherited value.

    >>
    >> Doesn't work here.

    >
    >Really? Could you take a look at a quick test at
    ><URL:http://www.mlwinter.pwp.blueyonder.co.uk/ah/spartanicus/style.html>.
    >You'll either see text, or you won't. I'd be very interested to know if
    >you don't (and what user agent you're using).


    It's probably down to my ignorance regarding js and/or dom, but reworked
    to what I think the OP wants it doesn't work for me:

    http://www.spartanicus.utvinternet.ie/test/micheal.htm

    --
    Spartanicus
     
    Spartanicus, Jan 4, 2005
    #13
  14. Christophe MERESSE

    Steve Pugh Guest

    Spartanicus wrote:
    >>"Michael Winter" wrote:
    >>> element.style.display = '';
    >>> will effectively remove the inline style value allowing the browser

    to
    >>> return to the inherited value.

    >
    >It's probably down to my ignorance regarding js and/or dom, but

    reworked
    >to what I think the OP wants it doesn't work for me:
    >
    >http://www.spartanicus.utvinternet.ie/test/micheal.htm


    You're setting the display: none; in a <style> element. The DOM
    element.style.display manipulates the inline styles of the element. So
    what you've done is told the DOM to create this: <tr id="#foo"
    style="display:">. As the inline display element has no value the value
    set in the <style> is used.

    But if the display: none; had been set inline in the first place or
    added via element.style then you would be overwriting it with the
    empty value and hence setting it back to the browser default (or
    whatever else may be in the cascade).

    Steve
     
    Steve Pugh, Jan 4, 2005
    #14
  15. Thanks to everybody !
    Your discussions have been very helpful, I learned a lot on the display
    property.
    Effectively, I now understand that the problem is on IE side which
    auto-corrects the "block"
    and does not support the "table-row".

    I will choose the solution [ element.style.display = ''; ] that seems to
    work perfectly.

    Here is my example:
    <table border="1">
    <tr><td>Col1</td><td>Col2</td></tr>
    <tr id="my_tr" style="display:table-row"><td colspan="2">Col1&2</td></tr>
    </table>
    <script language="javascript">
    alert("");
    document.getElementById("my_tr").style.display="none";
    alert("");
    document.getElementById("my_tr").style.display="";
    </script>

    Thanks again.
    Christophe
     
    Christophe MERESSE, Jan 4, 2005
    #15
  16. On Tue, 04 Jan 2005 14:13:47 +0000, Spartanicus <> wrote:

    [snip]

    > It's probably down to my ignorance regarding js and/or dom,


    I take it that means the demo does work for you then?

    > but reworked to what I think the OP wants it doesn't work for me:


    As I said in my first post to this thread, this technique only works when
    a property is set *inline*, whether it be via the style attribute or the
    style object. It won't work if the property is set in the author style
    sheet.

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Jan 4, 2005
    #16
  17. Christophe MERESSE

    Spartanicus Guest

    "Michael Winter" <> wrote:

    >> It's probably down to my ignorance regarding js and/or dom,

    >
    >I take it that means the demo does work for you then?


    The text displayed, but your confidence that this was proof that the
    demo worked was slightly misplaced, I reckon the fact that I have css
    and js disabled resulted in me seeing the text :)

    >> but reworked to what I think the OP wants it doesn't work for me:

    >
    >As I said in my first post to this thread, this technique only works when
    >a property is set *inline*, whether it be via the style attribute or the
    >style object. It won't work if the property is set in the author style
    >sheet.


    I failed to notice that in your post, got it now after Steve's
    explanation. I frown upon inline CSS, this method is imo no excuse.

    --
    Spartanicus
     
    Spartanicus, Jan 5, 2005
    #17
  18. On Wed, 05 Jan 2005 00:01:53 +0000, Spartanicus <> wrote:

    [snip]

    > I reckon the fact that I have css and js disabled resulted in me seeing
    > the text :)


    There isn't much point in testing if a script works with scripting
    disabled, is there (except to make sure a document is usable without
    client-side scripting).

    > I frown upon inline CSS, this method is imo no excuse.


    So do I. I would only set inline CSS via a script (generally so it can be
    undone by that same script) and in demos such as the one I posted.

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Jan 5, 2005
    #18
  19. Christophe MERESSE

    Spartanicus Guest

    "Michael Winter" <> wrote:

    >> I reckon the fact that I have css and js disabled resulted in me seeing
    >> the text :)

    >
    >There isn't much point in testing if a script works with scripting
    >disabled, is there (except to make sure a document is usable without
    >client-side scripting).


    That's just the way my browser is set up, I viewed the code, saw that
    you didn't use a table, and then reworked it into using a table to get
    it into context.

    --
    Spartanicus
     
    Spartanicus, Jan 5, 2005
    #19
  20. Christophe MERESSE

    Sifter

    Joined:
    Aug 21, 2007
    Messages:
    1
    simple answer::yell:

    try{document.getElementById(trFolderControl).style.display = 'block';}catch(er){}
    // cross browser style hack style.display = 'table-row'is ff only
    try{document.getElementById(trFolderControl).style.display = 'table-row';}catch(er){}

    in this case it ie will apply the block then ignore the table-row
    ff will overwrite the erroneous block declaration.
     
    Sifter, Aug 21, 2007
    #20
    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. dee
    Replies:
    6
    Views:
    641
  2. phl
    Replies:
    1
    Views:
    4,375
    Martin Jay
    Jun 8, 2006
  3. Chandra
    Replies:
    0
    Views:
    317
    Chandra
    Mar 7, 2007
  4. C A Upsdell

    Re: Firefox and display:block;

    C A Upsdell, Feb 5, 2008, in forum: ASP .Net
    Replies:
    2
    Views:
    538
    C A Upsdell
    Feb 5, 2008
  5. bruce barker

    RE: Firefox and display:block;

    bruce barker, Feb 5, 2008, in forum: ASP .Net
    Replies:
    0
    Views:
    375
    bruce barker
    Feb 5, 2008
Loading...

Share This Page