18041 sujets

Questions générales et questions de débutants

IE9 et Hover

Bonjour

J’utilise une navigation dans plusieurs sites Web qui ne fonctionne plus en IE9.

Voici un exemple, dans la CSS :

div#nav ul.level1 li.submenu:hover ul.level2,

En survolant une rubrique du niveau 1 de navigation, ça devrait faire apparaître une / des rubriques de niveau 2.

Dans la page :

<div id="nav">
<ul class="level1">
 <li class="submenu">Photos de famille
<ul class="level2">
<li><a href= ………….


Merci par avance de votre aide.

Francois
bonjour et merci de ta réponse.

J'avais mis un Post hier qui n'apparaît pas; je recommence donc.

La CSS:

/* bordeaux: #cc0000, vert: #006600, bleu: #333399, blanc: #ffffff */
body {background: #BC001D; color: #FFFFFF;
  behavior: url(csshover.htc); font-family: "Comic Sans MS", verdana, serif;  font-size: 12pt;} /* WinIE behavior call */
h1 {color: #FFFFFF; border-bottom: 1px solid; margin-bottom: 0; padding: 20px 0 20px 2%;}
h2 {color: #333399; padding: 10px 0 10px 5%;}
h3 {color: #333399; padding: 10px 0 10px 5%;}
#main {background: #FFFFFF; color: #BC001D; margin-left: 10em; padding: 10px 0 10px 5%;
  border-left: 0px solid; font-size: 12pt;}
div#nav {float: left; width: 10em; margin: -1px 0 0 -1px;
  background: #820010;}

div#nav ul {margin: 0; padding: 0; width: 10em; background: #EF8861;
  border: 1px solid; colors #820010;}

div#nav ul.level2 {background: #EF8861;}
div#nav ul.level3 {background: #EF8861;}
div#nav li {position: relative; list-style: none; margin: 0;
  border-bottom: 1px solid #CCC;}
div#nav li:hover {background: #EBB;}

div#nav li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}
div#nav li.submenu:hover {background-color: #EBB;}
div#nav li a { color: #820010; display: block; padding: 0.25em 0 0.25em 0.5em;
  text-decoration: none; width: 10em; border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}
div#nav>ul a {width: auto;}

div#nav ul ul {position: absolute; top: 0; left: 9.9em;
  display: none;}
div#nav ul.level1 li.submenu:hover ul.level2, 
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}
.bandbas   { text-align: center ; color: #009900; font-size: 6pt; font-style: italic }
.bandbasR  { text-align: right ; color: #009900; font-size: 6pt; font-style: italic }
.bandbasL  { text-align: left; color: #009900; font-size: 6pt; font-style: italic }
.bandhaut  { text-align: right ; color: #cccccc; font-size: 6pt; font-style: italic }
.navig     { text-align: left ; color: #cc0000; font-size: 12pt }


Un bon extrait de la Div de menu:

<div id="nav">
<ul class="level1">

 <li class="submenu">Photos de famille
  <ul class="level2">
   <li><a href="http://fcfamille1.free.fr/autre/" target="_blank">année 2011</a></li>
   <li><a href="http://fcfamille0.free.fr/autre/" target="_blank">année 2010</a></li>
   <li><a href="http://fcfamille9.free.fr/autre/" target="_blank">année 2009</a></li>
   <li><a href="http://fcfamille8.free.fr/autre/" target="_blank">année 2008</a></li>
   <li><a href="http://fcfamille7.free.fr/autre/" target="_blank">année 2007</a></li>
   <li><a href="http://fcfamille6.free.fr/autre/" target="_blank">année 2006</a></li>
   <li><a href="http://fcfamille5.free.fr/autre/" target="_blank">année 2005</a></li>
   <li><a href="http://fcfamille4.free.fr/autre/" target="_blank">année 2004</a></li>
   <li><a href="http://fcfamille3.free.fr/autre/" target="_blank">année 2003</a></li>
</ul>
 </li>

 <li class="submenu">D'autres sites de famille
  <ul class="level2">
   <li><a href="http://picasaweb.google.fr/deathwindfr/" target="_blank">Aaaa / Bbbbbb</a></li>
.............


En espérant que ça aide.

Francois
Eh, ça fonctionne effectivement bien mieux avec la Dtd en loose.

Merci de votre aide efficace.

Une question: pourquoi pas de Comic sans MS? parce que toute le monde peut ne pas avoir cette police là?

Francois
a écrit :
Eh, ça fonctionne effectivement bien mieux avec la Dtd en loose.

C'est surtout que dans ton ancien doctype il y avait écrit doctype au lieu de html (de mémoire ^^)

Pour le comic sans, outre le fait qu'elle soit sur-utilisée pour tout n'importe quoi, elle été de base destinée à des logiciels pour enfant et à une connotation "fantaisiste". Du coup sur un site "sérieux" (ou un document administratif, si si j'en ai vu ...) ça enlève tout le coté sérieux du message ce qui dommage quand le message est bien écrit. Elle est également typographiquement pauvre, pas de déclinaison en italic , les navigateurs doivent donc en forcer le rendu.

Pour le fait qu'elle ne soit pas sur les pc, je crois que de ce coté là tu as moins de souci à te faire, elle vient de base avec windows il me semble, il n'ya que les utilisateurs de mac qui la verront pas.
Modifié par InpIxelItrust (10 May 2011 - 09:09)
Merci de vos réponses qui m'éclairent sur la réputation de Comic sans MS que je ne connaissais pas.

Il est vrai, en particulier, que cette police ne fait pas sérieux.

Francois
Laurie-Anne a écrit :
Pour Comic Sans, il faut ajouter qu'elle est difficile à lire (et universellement détestée).


Rhooo on va pas relancer le débat ( que j'ai découvert hier soir ... )

Assez d'accord avec http://www.leblogdebango.fr/2011/04/pourquoi-la-comic-sans-ms-est-elle-la-typo-la-plus-haie-au-monde/

et surtout http://www.comicsanscriminal.com/

Moi je l'aime bien mais pas à toutes les sauces ( j'avais pas encore trouvé de jolies polices pour les goûters d'anniversaire ) ( c'est vrai que certains ont exagéré ... cf http://www.comicsanscriminal.com/ 5ème slide

Mais là pour ce site elle ne convient pas il faut bien l'avouer ... Smiley cligne
A votre avis, quelle(s) police(s) pourrait convenir à mon site, sans vouloir rouvrir une polémique infinie?

Francois
Arialia > Tu n'en a pas marre de troller ?


François > Helvetica (ou arial) et Verdana sont des valeurs sure sur le web.

Sinon, grace à @font-face, il est possible d'utiliser bien d'autres polices (notamment celles proposée par Google). Pour la lecture sur écran, les sans serif sont recommandées.
Modifié par Laurie-Anne (10 May 2011 - 11:57)
Salut, juste au passage :

Laurie-Anne a écrit :
Pour la lecture sur écran, les sans serif sont recommandées.


Pas forcément. Georgia est standard et justement conçue pour la lecture à l'écran.

Mais je plussoie sur @font-face : voir également Font-squirrel
Modifié par audrasjb (10 May 2011 - 12:00)
Sinon oui Georgia est pas mal , dans la même famille la dernière de Microsoft "Cambria" est vraiment superbe mais hélas peu disponible sur les systèmes autre que Seven , en plus sa licence est moins sympa que celle des polices originelles de Windows 95.

Les webs fonts sont un principe très sympa : si la police n'est pas installée sur l'ordinateur alors elle sera téléchargée et utilisée ( sauf indication contraire de l'utilisateur )

font-squirrel propose des kits font-face tout fait avec même les exemples d'utilisation ...
J'ai modifié mes polices pour: Georgia, Helvetica, verdana en suivant l'essentiel de vos conseils.

Une autre question: que signifie pratiquement sans serif?

Comment l'appliquer à mon choix de polices?

Francois
Sujet clos
Aller à