28221 sujets

CSS et mise en forme, CSS3

[Resolu] List-Item non reconnu par IE?

Pages :
Auriez-vous une idée de pourquoi les puces des deux premiers boutons (Accès Abonnés et Inscription) ne s'affichent pas sous IE?

trustxchange.com

J'ai cherché une bonne partie de la journée avec différent tests, et j'ai fait une rapide recherche dans le forum, mais j'abandonne pour aujourd'hui...

Voici le code CSS, rapidement :

#principaux{
display:block;
float:left;
margin-right:100px;
}

#principaux a{
display:list-item;
list-style-image:url(/images/puce.gif);
list-style-position:inside;
}


ça marche très bien dans Firefox, et ça marche très bien dans IE pour la page "FAQ" où j'ai utilisé le même code...

Alors je suis un peu perplexe. Smiley ohwell

Si vous avez déjà rencontré le pb, merci de vos éclairages Smiley smile
Sinon, c pas grave, je reprendrai la base, pour trouver la solution.

A+
Modifié le 21 Dec 2004 - 13:43
Et pourquoi ne pas attribuer la puce à un <li> au lieu de la forcer sur un <a href=""> ?

[#darkred]#principaux a{
display:list-item;
list-style-image:url(/images/puce.gif);
list-style-position:inside;
}[/#]

[#darkblue]#principaux li{
list-style-image:url(/images/puce.gif);
list-style-position:inside;
}[/#]

Il me semble que <h3> n'a pas été prévu pour reçevoir toute cette soupe :

<h3 id="menu">

<span id="principaux">
<map id="mapprincipaux">
<ul>
<li id="abonnes" title="Vous etes deja abonne et vous voulez utiliser trustXchange"><a href =" h ttp://www.trustxchange.com/abonnes.php">Accès Abonnés</a></li>
<li id="inscription" title="Inscrivez-vous a trustxchange"><a href ="  https://www.trustxchange.com/inscription.php">Inscription</a></li>
 
</ul>
</map>
</span>

<span id="menu2">
<map id="mapmenu2">
<ul>
  <li id="presentation"><a href =" h ttp://www.trustxchange.com/infos.php" title="Pourquoi choisir trustXchange ?">Présentation</a></li>
  <li id="tarifs"><a  href =" h ttp://www.trustxchange.com/tarifs.php" title="Pas de tarification compliquée avec trustXchange">Tarifs</a></li>
  <li id="guide"><a  href =" h ttp://www.trustxchange.com/guide.php" title="Un guide complet pour utiliser trustXchange">Guide</a></li>
  <li id="assistance"><a  href =" h ttp://www.trustxchange.com/assistance.php" title="Les moyens d'assistance de trustXchange">Assistance</a></li>
  <li id="faq"><a  href =" h ttp://www.trustxchange.com/questions.php" title="Les questions recurentes concernant trustXchange">FAQ</a></li>
  <li id="contact"><a  href =" h ttp://www.trustxchange.com/contact.php" title="Tous les moyens pour nous contacter">Contact</a></li>
</ul>
</map>

</span>

</h3>

Modifié le 21 Dec 2004 - 06:35
C clair!!
Je crois que g essayé de l'attribuer au LI.

Je vais rééssayer.

Pour l'explication, ce site est mon premier site en XHTML qui date de juin, et je suis en train de le reprendre et de l'améliorer, et effectivement, je ne vois pas pkoi le H3 est utilisé comme ça.
ça ne marche pas non plus et du coup, sous Firefox non plus.

Est-ce du au 

#menu li{
display:inline;
}


?

Mais si je l'enlève, ça met un bordel... Smiley ohwell
bah ! Il y a toujours la solution de la puce en background :

#principaux li { 
   background: transparent url("images/puce.gif") top left no-repeat; 
   padding: 0 0 0 18px; 
}
Oh la la...
Tu vas dire que j'abuse, mais la solution... ne marche que avec trustxchange...


#principaux a{ 
   background:transparent url(/images/puce.gif)0px 8px no-repeat; 
   padding: 0 0 0 18px;
}


Je ne comprends plus rien à ce code.
Il est hanté...
Ya plein de trucs qui ne marchent pas, je pense que si j'arrive à en résoudre un, tous les autres suivront.
Dois y avoir un code qui fout la merde...
Pourquoi :

#principaux a{ 
   background:transparent url(/images/puce.gif)0px 8px no-repeat; 
   padding: 0 0 0 18px;
}

Et pas :

#principaux li{ 
   background:transparent url(/images/puce.gif) 0 50% no-repeat; 
   padding: 0 0 0 18px;
}

?
Pour ça ?

upload/499-erreur.jpg

Ne crois pas que je veuille faire l'inverse de ce que tu me conseilles Smiley smile

Je fais des tests et je laisse ce qui est le moins perturbant si qqn passe sur le site...
Je vais déjà assez de tests comme ça Smiley smile

Et puis sur le LI, ça change rien sur IE... c zarb tt ça.
Et ton DOCTYPE, tu veux en parler ?

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//dreamclic//DTD XHTML 1.1 plus Dream 1.0//EN"
    "http://www.dreamclic.com/DTD/xhtml11-dream.dtd">

Anyway, le prologue fait passer IE en mode "quirk".

T'as essayé avec un DOCTYPE plus... ...standard ?

Lire : Le DOCTYPE qu'il vous faut
Modifié le 21 Dec 2004 - 12:06
J'ai appris en effet, que les puces ne marchait pas sur des éléments flottant dans IE.

Je viens donc de tester en enlevant le float, mais ça ne marche pas non plus.

De plus, à présent, ce ne sont plus des puces, mais des background, donc le problème est différent et ça ne marche toujours pas sous IE.

ça doit être tout bête, mais je ne trouve tjs pas.
DOCTYPE modifié...

J'ai déjà essayé de comprendre le doctype et surtout le prologue XML dans un autre topic, mais j'en suis ressortie plus embrouillée qu'avant.
Malgré tous les URL qu'on m'a donné à lire.

Je l'ai enlevé, ça ne change rien.

Il y a 2 bloccadreorange?
Ah oui, oui oui je suis en train de le faire ça, c pr ça...
Je ne sais pas ce que tu as changé, mais exception faite de la puce, le reste de la page est maintenant identique dans Firefox et IE (il ne l'était pas).

C'est peut être le prologue ou le DOCTYPE. Anyway !

Reste ton problème de puce ! Smiley lol
Modifié le 21 Dec 2004 - 12:36
Oui, ça j'ai changé pas mal de choses depuis hier.
C'est pas trop un problème pour que ce soit pareil entre les deux navigateurs...

Sauf pour ces puces... en haut.

Je pense qu'en reprenant tout depuis le début, je trouverai une solution, mais le problème c'est que je n'ai pas trop le temps... ça devait être juste un petit rafraîchissement du site...
johanna33 a écrit :
J'ai appris en effet, que les puces ne marchait pas sur des éléments flottant dans IE.


Euh... j'ai écris dans le vent ??

Sur les liens que je t'ai donné juste au dessus, il y a la solution pour les puces sur les éléments flottant, sous IE et sur les vrais navigateurs.
Tu peux réessayer avec : 

#principaux li{
list-style-image:url(images/puce.gif);
list-style-position:inside;
}

Pour voir si ça fonctionne sans le prologue et avec le nouveau DOCTYPE.
Mais j'ai essayé ces solutions...

Ne croyez pas que j'attende que la solution me tombe sur un plateau...
J'ai essayé pas mal de trucs, mais je ne peux pas les laisser en ligne puisque le site est référencé et visité...

Alors mes tests sont rapides, et quand je vois que ce n'est pas lisible, j'arrête.

Ecoutez, merci de votre aide.
Si ça vous embête laissez tomber, je vais chercher encore un peu, et après tant pis. IE n'aura pas les puces.

De plus, ok pour la solution des puces, mais avec le background pkoi ça marche pas?

Edit --> stephan j'essai ta solution après manger
Modifié le 21 Dec 2004 - 12:47
johanna33 a écrit :

Edit --> stephan j'essai ta solution après manger


Smiley eek ... rohh non, même pas envie de répondre...
Pages :
Sujet clos
Aller à