Faire disparaître un div avec explorer

Bonjour,

j'ai fait un site en responsive et voilà que j'affichais mon menu mobile seulement quand l'écran avait une telle grandeur. Ça fonctionne numéro un partout sauf explorer 7-8. J'ai donc écrit display:none qui fonctionne habituellement partout, mais ça ne fonctionne pas. Mon menu mobile apparaît toujours.

div#menumobile {display:none;}

De plus, j'ai essayé de faire une feuille de style spécial pour IE en utilisant:

<!--[if lt IE 7]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" /><![endif]-->
<!--[if lt IE 8]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" /><![endif]-->

Encore une fois, ça n'a pas l'air de fonctionner. Je ne sais pas si c'est mon display none qui est non-fonctionnel ou bien mes if explorer.

En addition, sous explorer 7 seulement, les liens de mon menu en inline-block n'est plus un à côté de l'autre, mais bien un en dessous de l'autre. Avez-vous une solution pour ceci également?

div#menu { text-align:right; width:70%; float:left; margin-top:30px;}
div#menu  ul{list-style-type:none; width:100%; position:relative; z-index:100;}

div#menu ul li {display:inline-block; *display: inline; zoom: 1; /* ie6 ie7 hack */
 padding:8px; font:1.2em 'amaranthregular', arial; line-height:40px; }
div#menu ul li a {text-decoration:none; color:#000; -webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms s ease-in-out;
transition: all 200ms ease-in-out;
-o-transition: all 200mease-in-out;}
div#menu ul li a:hover {color:#2d9493; -webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;}

Un gros merci !
Modifié par sydgie (29 Apr 2014 - 19:39)

Bonjour,

Il y a des mobiles qui fonctionnent avec IE6/7 ???

Tu as la réponse à ta deuxième question :

div#menu ul li {display:inline-block; *display: inline; zoom: 1; /* ie6 ie7 hack */

Si, si, la partie en commentaire

Non je sais que ie6 et 7, aucun mobile les utilisent, mais pour éviter de faire 2-3 versions de mon site je voulais mettre mes div en lien avec le mobile en display:none. Là je crois vraiment que le problème vient de mes if, il n'entre pas dans la bonne feuille de style et j'ignore pourquoi.

Pour les inline, je vais enlever les commentaires et essayer, merci !

J'ai mis :

<!––[if (IE7)|(IE 8)]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" /><![endif]––>

Au lieu du code plus haut et ça va déjà mieux !

Mais le inline est encore sous forme de liste

Bon j'ai mis ceci: Si c'est ie7 ou 8 on met la feuille de style adapté ie, si c'est 9,10-11 ou pas explorer on met la feuille de style avec les media query,

<!––[if (IE7)|(IE 8)]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" /><![endif]––>
<!––[if gte IE 9]><link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" /><![endif]––>
<!––[if !IE]><link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" /><![endif]––>

Voici ce que sa me donne dans le déboguer de IE:


http://nsa34.casimages.com/img/2014/04/29/140429084324278871.jpg
http://nsa34.casimages.com/img/2014/04/29/140429084324278871.jpg

Quand je décoche display:inline-block qui apparaît 2 fois ça fonctionne. Alors IE va dans ma feuille de style pour mobile quand même et je ne sais pas pourquoi.

Est-ce que je suis clair ? o.0
Modifié par sydgie (29 Apr 2014 - 20:41)