Css display aucun ne fonctionne pas

@media screen and (min-width: 900px) and (max-width: 1215px) {
 #menu {
      display:none;
   }
}

Ce n'est pas de travail, la div est toujours visible. Cependant, si je change la div pour <div class="menu"> au lieu de <div id="menu"> et le css :

@media screen and (min-width: 900px) and (max-width: 1215px) {
   .menu {
       display:none;
   }
}

il fonctionne. Pourquoi est-ce arrivé?

MODIFIER

C'est ce que l'Inspecteur dit:

element {
    display: block;
}
#listMenuTop {
    display: none;
}
#listMenuTop {
    display: none;
    margin-bottom: -14px;
    margin-top: 10px;
}

Mais les deux display:none sont croisés. D'où vient le display: block; vient-il ?

EDIT 2

J'ai trouvé le problème. Une fonction js est l'écrasement de la propriété css display:

document.getElementById('listMenuTop').style.display='block';

Ce que je veux faire est de cacher #listMenuTop lorsque l'écran >= 900px et lorsque l'écran < 900px pour être en mesure d'afficher/masquer #listMenuTop à partir d'un bouton. Le problème est que lorsque #listMenuTop est affichée sur un écran < 900px de ne pas cacher si je redimensionner l'écran pour plus de 900px, parce que js fonction est toujours d'écraser la propriété d'affichage.

Est-il possible que vous avez un autre #menu quelque part? Il ne devrait jamais être 1 ID de quelque chose sur une page.
Devrait fonctionner jsFiddle
pas de. je n'ai pas d'autre n ° de menu.
Probablement l'élément quand il a l'id, c'est écrasées par un autre sélecteur. Peut-être qu'il est un sélecteur avec plus de spécificité ou d'une autre sélecteur est défini après celui que vous avez mentionné. Vérifier avec les outils de développement.
Il devrait fonctionner. Vérifier la css de l'élément dans l'inspecteur dom. Ce qu'il ne montre?

OriginalL'auteur user2361682 | 2013-12-02

  1. 4

    Essayez plutôt ceci: 

    @media screen and (min-width: 900px) and (max-width: 1215px) { 
    #menu {   
        display:none !important;
    }   
}

    Grâce

    OriginalL'auteur Pradeep Pansari

  2. 1

    Depuis votre inspecteur a dit que vous avez des styles en ligne ajouté par Javascript (question de mise à jour):

    <div id="listMenuTop" style="display: block;"> ... </div>

    que votre CSS devrait ressembler à ceci:

     @media screen and (min-width: 900px) and (max-width: 1215px) {
      /* Following will override inline style */
      #listMenuTop[style] {
           display: none !important;
      }
 }
    Je ne voudrais pas suggérer à quelqu'un d'utiliser !important quand il est possible de fixer avec juste le sélecteur. Un plus spécifique sélecteur a plus de priorité
    C'est pourquoi le important n'est pas ma première réponse. Mais encore, si elle a été traitée comme !important premier lieu, que vous avez besoin de le remplacer même manière, les moyens !important.
    Encore s'il utilise !important il est préférable de retirer la !important sélecteur. Cependant, je vois que vous mis à jour votre code, modifier votre code une fois si je peux reprendre mon -1. Mais toujours penser à ne jamais utiliser !important.
    C'est juste de la pratique... je n'aurais jamais suggérons d'utiliser !important, mais parfois vous n'avez aucun contrôle sur les CSS, vous pouvez simplement ajouter de nouvelles (ce qui arrive souvent).

    OriginalL'auteur skobaljic