display:normal?

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Markus Ernst

    display:normal?

    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

    #2
    Re: display:normal?

    Markus Ernst <derernst@NO#SP #AMgmx.ch> wrote in
    news:43e1f00a$1 _1@news.cyberci ty.ch:
    [color=blue]
    > 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.[/color]

    You may be looking for visibility:hidd en, visibility:visi ble. 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.

    Comment

    • Markus Ernst

      #3
      Re: display:normal?

      Stan McCann schrieb:[color=blue]
      >[color=green]
      >>Am I missing something? I am looking for something like
      >>display:norma l 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.[/color]
      >
      >
      > You may be looking for visibility:hidd en, visibility:visi ble. Worth a
      > try?[/color]

      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:coll apse, though...)

      Maybe I should post a feature request to www-style@w3.org?
      Thanks for your input.

      Markus

      Comment

      • Spartanicus

        #4
        Re: display:normal?

        Markus Ernst <derernst@NO#SP #AMgmx.ch> wrote:
        [color=blue]
        >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.[/color]

        There is no such value, nor is one needed.
        [color=blue]
        >Furthermore, UAs do not recognize the same values. To make a table row
        >visible, IE wants display:block while FF wants display:table-row.[/color]

        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:tabl e-row !important;disp lay:block}

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

        --
        Spartanicus

        Comment

        • niels.froehling@seies.de

          #5
          Re: display:normal?

          > When toggling an element on and off by setting its display property via[color=blue]
          > 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.[/color]

          If you allready use DOM make:

          object.style.di splay = 'none'; // off
          object.style.di splay = ''; // 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

          Comment

          • Stan McCann

            #6
            Re: display:normal?

            Markus Ernst <derernst@NO#SP #AMgmx.ch> wrote in
            news:43e23246$1 _2@news.cyberci ty.ch:
            [color=blue]
            > Stan McCann schrieb:[color=green]
            >>[color=darkred]
            >>>Am I missing something? I am looking for something like
            >>>display:norm al 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.[/color]
            >>
            >>
            >> You may be looking for visibility:hidd en, visibility:visi ble.
            >> Worth a try?[/color]
            >
            > 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.[/color]

            It sounds like you tried it. I hadn't thought about visibility not
            collapsing the space.
            [color=blue]
            > Actually I think that there should be a "normal" value for every
            > property that is changeable at all.[/color]

            Have you tried inherit? I haven't tested this but it just might give
            you "normal."
            [color=blue]
            > 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:coll apse, though...)
            >
            > Maybe I should post a feature request to www-style@w3.org?
            > Thanks for your input.[/color]

            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.

            Comment

            • Markus Ernst

              #7
              Re: display:normal?

              Thank you for your interesting approaches! Anyway I did not get them
              working:
              [color=blue]
              > object.style.di splay = 'none'; // off
              > object.style.di splay = ''; // default or class-definition[/color]

              '' did not work in FF (so I did not even try it in IE...).
              [color=blue]
              > 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:[/color]

              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).
              [color=blue]
              > Or you have to depend on IE incompatible CSS:
              >
              > .turnon { display: inherit; }[/color]

              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

              Comment

              • Markus Ernst

                #8
                Re: display:normal?

                Spartanicus schrieb:[color=blue][color=green]
                >>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.[/color]
                >
                >
                > There is no such value, nor is one needed.[/color]

                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.
                [color=blue]
                > You can "use" another IE bug to get around the combined effect of these
                > issues:
                >
                > tr{display:none }
                > tr{display:tabl e-row !important;disp lay:block}[/color]

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

                Markus

                Comment

                • Harlan Messinger

                  #9
                  Re: display:normal?

                  Markus Ernst wrote:[color=blue]
                  > 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.[/color]

                  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.displa y;
                  el.style.displa y = "none";

                  // later ...

                  el.style.displa y = oldDisplay;

                  Comment

                  • niels.froehling@seies.de

                    #10
                    Re: display:normal?

                    > Thank you for your interesting approaches! Anyway I did not get them[color=blue]
                    > working:
                    >[color=green]
                    >> object.style.di splay = 'none'; // off
                    >> object.style.di splay = ''; // default or class-definition[/color]
                    >
                    > '' did not work in FF (so I did not even try it in IE...).[/color]

                    Then you make something /wrong/. :)
                    It works perfectly as seen in

                    [color=blue]
                    > 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 }[/color]

                    I don't really understand what's your problem then, you allready
                    do the right thing (TM)!
                    [color=blue]
                    > 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).[/color]

                    If it's only for <div/> don't specify the display.
                    [color=blue]
                    > 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).[/color]

                    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?
                    [color=blue]
                    > Markus[/color]

                    Ciao
                    Niels

                    Comment

                    • Spartanicus

                      #11
                      Re: display:normal?

                      Markus Ernst <derernst@NO#SP #AMgmx.ch> wrote:
                      [color=blue][color=green][color=darkred]
                      >>>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.[/color]
                      >>
                      >> There is no such value, nor is one needed.[/color]
                      >
                      >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).[/color]

                      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

                      Comment

                      • Michael Winter

                        #12
                        Re: display:normal?

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

                        [snip]
                        [color=blue][color=green]
                        >> object.style.di splay = 'none'; // off
                        >> object.style.di splay = ''; // default or class-definition[/color]
                        >
                        > '' did not work in FF (so I did not even try it in IE...).[/color]

                        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.d isplay = '';

                        (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.d isplay = 'none';

                        followed by

                        element.style.d isplay = '';

                        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.

                        Comment

                        • Markus Ernst

                          #13
                          Re: display:normal?

                          Spartanicus schrieb:[color=blue][color=green]
                          >>
                          >>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).[/color]
                          >
                          >
                          > 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.
                          >[/color]

                          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

                          Comment

                          • Markus Ernst

                            #14
                            Re: display:normal?

                            niels.froehling @seies.de schrieb:[color=blue]
                            >
                            > Then you make something /wrong/. :)
                            > It works perfectly as seen in
                            > http://www.paradice-insight.us/tests/display.html[/color]

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

                            Markus

                            Comment

                            • Markus Ernst

                              #15
                              Re: display:normal?

                              Michael Winter schrieb:[color=blue]
                              >
                              > 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.[/color]

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

                              Markus

                              Comment

                              Working...