Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Firefox and style="display:block" on table row

Reply
Thread Tools

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

 
 
Spartanicus
Guest
Posts: n/a
 
      01-04-2005
"Michael Winter" <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
 
Michael Winter
Guest
Posts: n/a
 
      01-04-2005
On Tue, 04 Jan 2005 10:16:10 +0000, Spartanicus <(E-Mail Removed)> wrote:

> "Michael Winter" <(E-Mail Removed)> 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.
 
Reply With Quote
 
 
 
 
Spartanicus
Guest
Posts: n/a
 
      01-04-2005
"Michael Winter" <(E-Mail Removed)> 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
 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      01-04-2005
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

 
Reply With Quote
 
Christophe MERESSE
Guest
Posts: n/a
 
      01-04-2005
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="no ne";
alert("");
document.getElementById("my_tr").style.display="";
</script>

Thanks again.
Christophe


 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      01-04-2005
On Tue, 04 Jan 2005 14:13:47 +0000, Spartanicus <(E-Mail Removed)> 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.
 
Reply With Quote
 
Spartanicus
Guest
Posts: n/a
 
      01-05-2005
"Michael Winter" <(E-Mail Removed)> 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
 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      01-05-2005
On Wed, 05 Jan 2005 00:01:53 +0000, Spartanicus <(E-Mail Removed)> 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.
 
Reply With Quote
 
Spartanicus
Guest
Posts: n/a
 
      01-05-2005
"Michael Winter" <(E-Mail Removed)> 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
 
Reply With Quote
 
Sifter Sifter is offline
Junior Member
Join Date: Aug 2007
Posts: 1
 
      08-21-2007
simple answer:

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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Copy a row from Table A to position 0 in Table B dave@softwareonline.com ASP .Net 1 03-24-2008 08:14 PM
row bottom border in inner table not matching up with row border in outer table phl HTML 1 06-08-2006 03:43 PM
ie6 Insert Row at specific Row Index of Table Giggle Girl Javascript 18 02-07-2006 07:54 AM
ok I can do a totals row but how about a percentage row after each data row D ASP .Net Datagrid Control 0 05-23-2005 04:10 PM
Can center row in three row table take up remaining space? Anon HTML 2 03-18-2005 08:35 AM



Advertisments