display:normal?

[Markus Ernst]

Hi

When toggling an element on and off by setting its display property via
DOM access, display:none is valid for all kinds of elements, but I can't
find anything about a generic value for toggling on again.

Furthermore, UAs do not recognize the same values. To make a table row
visible, IE wants display:block while FF wants display:table-row.

Am I missing something? I am looking for something like display:normal
or display:ua-default or whatever, that gets the element rendered how
the UA renders it if no display property is set.

I am actually surprised I don't find anything about this problem, anyway
googling for it is not as easy, as "display" and "normal" are very
common words.

Thanks for comments on this issue!
Markus

[Stan McCann]

Markus Ernst <derernst@NO#SP#AMgmx.ch> wrote in
news:43**********@news.cybercity.ch:

Am I missing something? I am looking for something like
display:normal or display:ua-default or whatever, that gets the
element rendered how the UA renders it if no display property is
set.

I am actually surprised I don't find anything about this problem,
anyway googling for it is not as easy, as "display" and "normal" are
very common words.

You may be looking for visibility:hidden, visibility:visible. Worth a
try?

--
Stan McCann, "Uncle Pirate" http://stanmccann.us/
Webmaster, NMSU at Alamogordo http://alamo.nmsu.edu/
Now blocking Google Grouper posts and replies.
http://blinkynet.net/comp/uip5.html

[Markus Ernst]

Stan McCann schrieb:

Am I missing something? I am looking for something like
display:normal or display:ua-default or whatever, that gets the
element rendered how the UA renders it if no display property is
set.

I am actually surprised I don't find anything about this problem,
anyway googling for it is not as easy, as "display" and "normal" are
very common words.

You may be looking for visibility:hidden, visibility:visible. Worth a
try?

No, as the visibility property does not remove the element from the
element flow, but just hides it, leaving a blank space as a placeholder.
This does the trick for elements with absolute positioning, but not for
elements such as table rows, form fields, or text paragraphs.

Actually I think that there should be a "normal" value for every
property that is changeable at all.

Anyway if your point is, that the visibility property is meant for
toggling on and off rather than the display property, this sounds
reasonable to me. Under this point of view I should rather state that
the concept of visibility is not complete, that the "collapse" value
should actually apply for all kinds of elements, and not for table
elements only. (If there was any browser support for
visibility:collapse, though...)

Maybe I should post a feature request to ww*******@w3.org?
Thanks for your input.

Markus

[Spartanicus]

Markus Ernst <derernst@NO#SP#AMgmx.ch> wrote:

When toggling an element on and off by setting its display property via
DOM access, display:none is valid for all kinds of elements, but I can't
find anything about a generic value for toggling on again.
There is no such value, nor is one needed.
Furthermore, UAs do not recognize the same values. To make a table row
visible, IE wants display:block while FF wants display:table-row.

IE doesn't support the CSS 2 table model, plus it fails to ignore
unsupported CSS values in some situations.

You can "use" another IE bug to get around the combined effect of these
issues:

tr{display:none}
tr{display:table-row !important;display:block}

This works both in IE and proper browsers. Ask in a JS group to learn
how to do this using the DOM.

--
Spartanicus

[niels.froehling]

> When toggling an element on and off by setting its display property via

DOM access, display:none is valid for all kinds of elements, but I can't
find anything about a generic value for toggling on again.

If you allready use DOM make:

object.style.display = 'none'; // off
object.style.display = ''; // default or class-definition

If you use classes for switching, you allready know what's the way
back to the meant-to-be value; a (un)generalized multi-class approach
like:

a { display: block; }
.another { display: inline; }
a.another { display: table-cell; }

.turnoff { display: none; }
.turnon { display: ???; }

would be mad. ;^)
Or you have to depend on IE incompatible CSS:

.turnon { display: inherit; }

When you make JS-less dropdowns you should not have that problem at
all,
with the :hover you get some sort of restore-by-inherit for free.

Ciao
Niels

[Stan McCann]

Markus Ernst <derernst@NO#SP#AMgmx.ch> wrote in
news:43**********@news.cybercity.ch:

Stan McCann schrieb:

Am I missing something? I am looking for something like
display:normal or display:ua-default or whatever, that gets the
element rendered how the UA renders it if no display property is
set.

I am actually surprised I don't find anything about this problem,
anyway googling for it is not as easy, as "display" and "normal"
are very common words.

You may be looking for visibility:hidden, visibility:visible.
Worth a try?

No, as the visibility property does not remove the element from the
element flow, but just hides it, leaving a blank space as a
placeholder. This does the trick for elements with absolute
positioning, but not for elements such as table rows, form fields,
or text paragraphs.

It sounds like you tried it. I hadn't thought about visibility not
collapsing the space.
Actually I think that there should be a "normal" value for every
property that is changeable at all.
Have you tried inherit? I haven't tested this but it just might give
you "normal."
Anyway if your point is, that the visibility property is meant for
toggling on and off rather than the display property, this sounds
reasonable to me. Under this point of view I should rather state
that the concept of visibility is not complete, that the "collapse"
value should actually apply for all kinds of elements, and not for
table elements only. (If there was any browser support for
visibility:collapse, though...)

Maybe I should post a feature request to ww*******@w3.org?
Thanks for your input.

Some good points. Sure, send the request in.

--
Stan McCann, "Uncle Pirate" http://stanmccann.us/
Webmaster, NMSU at Alamogordo http://alamo.nmsu.edu/
Now blocking Google Grouper posts and replies.
http://blinkynet.net/comp/uip5.html

[Markus Ernst]

Thank you for your interesting approaches! Anyway I did not get them
working:

object.style.display = 'none'; // off
object.style.display = ''; // default or class-definition
'' did not work in FF (so I did not even try it in IE...).
If you use classes for switching, you allready know what's the way
back to the meant-to-be value; a (un)generalized multi-class approach
like:
Class switching is indeed the way to go, as classes can be set
element-specific:

..off { display:none }
div.on { display:block }
td.on, th.on { display:table-cell }
tr.on { display:table-row }

Of course a hack will be needed for serving display:block to IE (at
least until version 6, I did not test any IE7 yet).
Or you have to depend on IE incompatible CSS:

.turnon { display: inherit; }

display:inherit does not work for table elements, as the outer block
(from where the value is inherited) is of another type (a table cell
with display:inherit will be set to display:table-row).

Markus

[Markus Ernst]

Spartanicus schrieb:

When toggling an element on and off by setting its display property via
DOM access, display:none is valid for all kinds of elements, but I can't
find anything about a generic value for toggling on again.

There is no such value, nor is one needed.

I assume I understand why there is none needed - by knowing the element
type the default display value is known, too (under ideal circumstances,
though). Anyway I think that everything that can be changed dynamically
should be reversible to its original state - which is most comfortably
done by a 'normal' kind of value.
You can "use" another IE bug to get around the combined effect of these
issues:

tr{display:none}
tr{display:table-row !important;display:block}

Thank you for this hack! I try to avoid CSS hacks where possible, but if
necessary I will do it like this.

Markus

[Harlan Messinger]

Markus Ernst wrote:

Hi

When toggling an element on and off by setting its display property via
DOM access, display:none is valid for all kinds of elements, but I can't
find anything about a generic value for toggling on again.

The time-honored approach for restoring the previous value when you
don't know what it is at programming time: save it first, before setting
the new value.

var oldDisplay = el.style.display;
el.style.display = "none";

// later ...

el.style.display = oldDisplay;

[niels.froehling]

> Thank you for your interesting approaches! Anyway I did not get them

working:

object.style.display = 'none'; // off
object.style.display = ''; // default or class-definition
'' did not work in FF (so I did not even try it in IE...).

Then you make something /wrong/. :)
It works perfectly as seen in
http://www.paradice-insight.us/tests/display.html
Class switching is indeed the way to go, as classes can be set
element-specific:

.off { display:none }
div.on { display:block }
td.on, th.on { display:table-cell }
tr.on { display:table-row }
I don't really understand what's your problem then, you allready
do the right thing (TM)!
Of course a hack will be needed for serving display:block to IE (at
least until version 6, I did not test any IE7 yet).
If it's only for <div/> don't specify the display.
display:inherit does not work for table elements, as the outer block
(from where the value is inherited) is of another type (a table cell
with display:inherit will be set to display:table-row).
You're right, you need an additional element to inherit from. It's
miss-used as accumulator for your original display-value. But we've
found allready the better solution, don't we?
Markus

Ciao
Niels

[Spartanicus]

Markus Ernst <derernst@NO#SP#AMgmx.ch> wrote:

When toggling an element on and off by setting its display property via
DOM access, display:none is valid for all kinds of elements, but I can't
find anything about a generic value for toggling on again.

There is no such value, nor is one needed.

I assume I understand why there is none needed - by knowing the element
type the default display value is known, too (under ideal circumstances,
though).

Under all circumstances.

If you can produce a use case where the element cannot reasonably be
determined then you may have an argument for a 'normal' value feature
request for the display property.

--
Spartanicus

[Michael Winter]

On 03/02/2006 10:37, Markus Ernst wrote:

[snip]

object.style.display = 'none'; // off
object.style.display = ''; // default or class-definition

'' did not work in FF (so I did not even try it in IE...).

It does but, as Niels briefly noted, the computed value that results
from such an assignment depends on the default and author style sheets.
If a document-wide style sheet hides the element (which is arguably a
bad idea, anyway), assigning an empty string will not reveal it.

That is,

#example {
display: none;
}

<div id="example">...</div>

element.style.display = '';

(where element is a reference to the DIV element) will not work, whereas

<div id="example" style="display: none;">...</div>

or

<div id="example">...</div>

element.style.display = 'none';

followed by

element.style.display = '';

will.

The last example, where the element is hidden using only the DOM, is
much preferred (with added feature detection) as it doesn't have the
potential for rendering a document unusable where scripting support is
insufficient or unavailable.

[snip]

If you are still having problems, post to c.l.javascript.

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

[Markus Ernst]

Spartanicus schrieb:

I assume I understand why there is none needed - by knowing the element
type the default display value is known, too (under ideal circumstances,
though).

Under all circumstances.

If you can produce a use case where the element cannot reasonably be
determined then you may have an argument for a 'normal' value feature
request for the display property.

With ideal circumstances I meant, all browsers behaving as expected.
Anyway I see the points clear now, and of course IE misbehaviour is no
argument for a spec change request. Thank you for your comments!

Markus

[Markus Ernst]

ni*************@seies.de schrieb:

Then you make something /wrong/. :)
It works perfectly as seen in
http://www.paradice-insight.us/tests/display.html

Thank you, your example and Michael's comment make it perfectly clear to
me :-)

Markus

[Markus Ernst]

Michael Winter schrieb:

The last example, where the element is hidden using only the DOM, is
much preferred (with added feature detection) as it doesn't have the
potential for rendering a document unusable where scripting support is
insufficient or unavailable.

Thank you, this is an important point I usually think of, but did not
see in this case!

Markus

[Markus Ernst]

Harlan Messinger schrieb:

When toggling an element on and off by setting its display property
via DOM access, display:none is valid for all kinds of elements, but I
can't find anything about a generic value for toggling on again.

The time-honored approach for restoring the previous value when you
don't know what it is at programming time: save it first, before setting
the new value.

var oldDisplay = el.style.display;
el.style.display = "none";

// later ...

el.style.display = oldDisplay;

That's great! Thanks!
Markus