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

  • Thread starter Christophe MERESSE
  • Start date
C

Christophe MERESSE

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
 
C

Christophe MERESSE

Christophe MERESSE said:
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
 
S

Steve Pugh

Christophe MERESSE said:
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
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
i.e. display: table-row (which IE doesn't support) said:
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
 
S

Steve Pugh

Christophe MERESSE said:
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
 
R

rf

Christophe MERESSE said:
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.
 
S

Steve Pugh

rf said:
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
 
S

Spartanicus

Steve Pugh said:
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).
 
M

Michael Winter

[...] 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
 
M

Michael Winter

S

Spartanicus

Michael Winter said:
[...] 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?
 
M

Michael Winter

[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
 
S

Spartanicus

S

Steve Pugh

Spartanicus wrote:
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
 
C

Christophe MERESSE

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
 
M

Michael Winter

[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
 
S

Spartanicus

Michael Winter said:
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 :)
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.
 
M

Michael Winter

[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
 
S

Spartanicus

Michael Winter said:
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.
 
Joined
Aug 21, 2007
Messages
1
Reaction score
0
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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top