Re: Optgroup </optgroup> and display: none style ...

Discussion in 'HTML' started by Jukka K. Korpela, Oct 11, 2008.

  1. Koteczek wrote:

    > <optgroup label="ABCDEF" style="display: none;" id="hidden">
    > <option ....>something 1</option>
    > <option ....>something 2</option>
    > </optgroup>
    > ....
    > </select>
    > And the problem is as follows:
    > FireFox = correct rendering, ABCDEF does not show up - it is hidden
    > by 'display none' is't it?

    Since you declare the _element_ <optgroup> to have display: none, it should
    not be displayed, by CSS specifications, when your style sheet is applied.
    The <option> elements are subelements of <optgroup>, so they should not be
    displayed either, and any declaration for them cannot override this; see

    So Firefox is wrong if it does what you say. I'm too lazy to check this,
    especially since you didn't post a URL.

    > M$ Explorer = displays this optgroup like others, it does not respect
    > display none style at all, like the style was not there! :-(

    Such things may happen. Remember the usual CSS Caveats.

    > Opera 9.6 = does not display <options> within the optgroup but
    > "empty" optgroup IS being displayed. I hide optgroup and its content
    > not only the content! That is crazy....

    Crazy it may be - you haven't described what you are really doing and
    haven't included a URL - but Opera's behavior, if described correctly here,
    would be closest to the specs of the three, though not conformant.

    > I must have it like the code = this one optgroup must be hidden and I
    > display it when I want via JavaScript.

    Then you need to gain totalitarian control over the world so that you can
    force everyone to browse with both CSS and JavaScript support enabled.

    Jukka K. Korpela, Oct 11, 2008
    1. Advertisements

  2. Ari Heino

    Ari Heino Guest

    Koteczek kirjoitti seuraavasti:
    > I DO NOT want this optgroup to be visible to the user when he loads the
    > page.
    > I want to display these options only when certain JS event happens.

    I tested your code. Have you noticed that though the last option is not
    visible, you can still select it with arrow keys (in FF also)?
    I don't know is that a new problem for you. The display: none doesn't
    make it non-existent to any browser. Maybe you know this already, just
    making sure.
    To the given problem, I have no ideas. I'm not an expert.

    Ari Heino, Oct 17, 2008
    1. Advertisements

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Adrienne Boswell
    Oct 18, 2008
  2. length power
    Rustom Mody
    Apr 10, 2014