11

I want to display a div with the following restrictions:

  • automatically hide under 1024px width
  • can be toggle by button under 1024px width, but if I click somwhere (not inside the div) the activeDiv class should be removed

I have a dummy example at codepen

So the following problems occured:

  • In IE10 the toggle button just not work (not hide/show the div) I check with the developer tools, but no sign of the display: initial
  • In Chrome 29 the div appeard next the button not under it. (Firefox is the same)
    I know that the default display for div is block, but this css is not only for div tags that's why I try to use initial.
Community
  • 1
  • 1
Péter
  • 2,161
  • 3
  • 21
  • 30
  • The `initial` keyword isn't [supported](http://msdn.microsoft.com/en-us/library/hh781508%28v=vs.85%29.aspx#keywords) in any version of IE – Adrift Sep 17 '13 at 13:24
  • Ohh. I didn't know that. But that page claims that the 'auto' is supported and still not working with that. – Péter Sep 17 '13 at 13:57

2 Answers2

34

initial does not mean "the default value of a given property for a given element". It means "the default value of a given property as defined by the spec". The initial value of display is inline, not block, as stated here. This is regardless of what sort of element you apply it to. And as already mentioned, IE does not support the initial keyword.

If you want an element to be displayed as a block, use display: block. If you want it to be displayed inline, use display: inline. If you want it to use whichever is the browser default for it, do not set the display property at all.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    I thought that the default value for display is block for the div tags. I try to override the value given by 'div' class (unfortunate name I know that now) if the width under 1024px with class activeDiv. – Péter Sep 17 '13 at 14:04
  • 1
    It is, but that's not what `initial` means. – BoltClock Sep 17 '13 at 14:33
  • 1
    So there is no value to set the original default value back? Like 'default' or something? If I change the default value I can't reset it? – Péter Sep 17 '13 at 17:44
  • 1
    @Péter No, unfortunately there isn't. – Alexander Presber May 04 '16 at 12:46
  • 1
    More about this can be found at https://stackoverflow.com/q/8228980/28324. TL;DR: the new CSS [`revert`](https://www.w3.org/TR/css-cascade-4/#valdef-all-revert) keyword is supposed to pick the default value for the element, but it is not well-supported yet. – Elias Zamaria May 01 '19 at 22:20
0

what do you mean by this?

this css is not only for div tags

display:initial is CSS3 and not supported by IE10. If no display-rule is specified it can inherit from, it will fall back to display:inline.

display:block;
display:initial;

provides a fallback display:block.

urz0r
  • 462
  • 3
  • 8
  • The chrome also messing with the initial. The div appears next to the button, not under it. Under 'this css is not only for div tags' I mean that that div is just an example, and intend to use these classes on other elements for example 'span' which is inline by default. – Péter Sep 17 '13 at 13:59