Jump to content

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


Recommended Posts

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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 :)

Link to post
Share on other sites

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. :)

Edited by moonwar
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...