Compatibilité avec IE8 et FireFox de la balise <li> et <ul>

[moonwar]

Bonjour,

Je viens de passer en IE8 et je me rends compte que mon site (qui etait compatible avec IE7) n'a ... heu ... aucune ... forme.

Le probleme est les <li> et <ul> . ils sont completement à gauche! Le probleme est aussi observé sur FireFox. Comment faire pour assurer la compatibilité avec la balise <li>?

Merci pour votre aide.

[baulet]

bonjour moon,

déja il faudrait que tu nous donne un lien...

malheureusement si ton site s'affiche mal sous firefox et sous ie8, il y a toutes les chances que ton code soit érroné...

[lorem_ipsum]

Salut,

pour évitter ce genre problème avec les réglage par défaut de chaque navigateur, j'utilise une css qui fait un reset sur toutes les balises.

Tu peux la trouver ici

Bon courage.

[nalrem]

J'ai noté aussi de grosses différences d'interprétations entre les vieux navigateur : ff2-premières versions/ie7 et les nouveaux : ie8/ff3 quand on imbriquait de nombreuses balises li/ul.

Mais ton soucis semble différent. Il peut sans doute être corrigé si on peut avoir du code.

[br1o]

Salut, à première vue, il s'agit peut-être de la différence entre ie5, ie6 et ie7 adeptes du margin-left: 40px pour le décalage des listes, et les autres navigateurs qui avaient opté pour un padding-left: 40 px. Dans ce cas, tu peux utiliser un reset CSS comme ul {margin:0;padding:0} et ensuite spécifier tes propres valeurs de margin ou de padding pour tes éléments de liste.

[moonwar]

Merci pour vos réponses,

Voila le lien (à visiter sous FF et IE8 option non compatible avec IE7)

Pour les ul, voila le code avec explication en cas ou...

ul#menu 
{			   
  margin	:   0;			  /* Marge extérieur nulle */
  padding   :   1px 1px 0;	  /* Marge intérieur à 1px sauf pour le bas */ 
  width	 :   145px;		  /* Largeur de notre liste */
  font-size :   12px;		  /* Taille de notre police */
  border	:   1px solid #EBEBEB;  /* Application d'une bordure */ 
  border-left-width :   0px;  /* Marge gauche nulle */
}


ul#menu li a {
  display		   :   block;			 /* Définition sous forme de block */
  width			 :   auto !important;	 /* Pour IE */						
  width			 : 	100%;  /* Idem */
  padding		   :   4px;   /* le reste, tlm le connait */
  text-decoration   :   none;			 
  color			 :   #050B74;			  
  background-color  :   #FBFBFB;			
  border-right	  :   1px solid #EBEBEB; 
  border-bottom	 :   1px solid #EBEBEB; 
}		

ul#menu li a:hover {
  text-decoration   :   underline;			  
  color			 :   #D90000;			  
}

Pour le li:

li.orange { list-style-image: url("/alb/li.gif"); }
li.viole  { list-style-image: url("/alb/li1.gif"); }
li.bleu   { list-style-image: url("/alb/cube_bleu.gif"); }
li.jaune  { list-style-image: url("/alb/cube_jaune.gif"); }

Merci pour votre aide.

[thierryB]

Ton site est impeccable chez moi. J'utilise la dernière version de Firefox pour Mac.

[moonwar]

Salut,

Voila les impris-ecrans

Merci

[baulet]

bonjour,

tu as quelques erreurs de codage dans le html et la css...

valides ton site sur W3C (http://www.w3.org/), et tout rentrera dans l'ordre, je pense.

par ex. la propriété de .small, tu as mis un petit o (lettre o) au lieu d'un zéro 0

color: #oB3A8A

ceci dit, bon courage, c'est deja un beau site

[moonwar]

Pffouuuuuu , je crois que j'ai reglé qlq problemes pour ne pas dire la totalité.

Merci baulet pourle compliment, ca fait toujours plaisir de se faire dire que son site est beau merci encore.

Voila pour ceux que ca peut aider ... on sait jamais.

- Pour les <li>, j'ai ajouté le code qui suit, cela n'a aucun effet sur IE, mais pour FF et safari, ca enleve les boutons noirs (li par defaut).

  list-style-type   :  none;

- Les <li> n'ont pas un margin left de 0 sous FF, donc j'ai ajouté pour le <ul>:

{padding:0px;}

J'ai eu une petite deformation sour IE, mais pas trop grave car j'ai reglé le probleme sous FF et Opera.

- Pour ce qui est des div imbriqués, j'ai utilisé les boites de div z-index. (compatible IE. FF, Opera et Safari)

Merci pour votre aide.

Modifié 18 Août 2009 par moonwar