[Résolu] IE et puce perso avec css background[Modele boite IE inside]

Bonjour à tous,

j'ai essayé d'être le plus précis possible avec le titre mais je sais pas trop comment l'aborder.
J'ai un menu avec une puce personalisée qui apparait à l'état hover à gauche de mon élément de liste. Le problème que je rencontre avec IE est que cette puce doit "déborder" du bord gauche de la boite "div" dans laquelle est imbriquée la liste d'éléments. Pour cela j'ai joué avec une marge négative de l'élément <li> et j'ai ajouter un padding positif pour décaler le texte afin qu'il reste dans la boite div.

Le résultat est nickel sous FF comme d'hab, mais IE me coupe ma puce au niveau du bord gauche de ma boite div.

Pour un exemple : http://www.hamtaro.host-gratuit.net/index.php

Merci à vous pour les conseils.
Modifié par benny (12 Jun 2005 - 22:37)

personne ne peut m'aider?
je comprends pas pourquoi ma puce est coupée sous IE, j'ai essayé pas mal de chosessans succès, même un display block ne permet pas d'agrandir la zone hors du div conteneur.

J'ai édité le titre peut être que ça attirera plus de monde, j'arrive toujours pas à comprendre pourquoi sous IE ca coupe la puce et pas sous FF

Bonjour benny,

Comme je te vois abandonné (e) de tous, je vais essayé de t'aider :

Je pense qu'il s'agit du problème de modèle de boite standard et microsoft

Je te laisse voir comment modifier ton code ...



edit :

Après réflexion, en jouant avec la propriété :

list-style-position:inside;

peut-être ...
Modifié par Vero (12 Jun 2005 - 19:57)

Salut,

personnellement, je ne vois pas ce qui cloche avec IE...

D'autre part, si tu postais un extrait ciblé de ton code, ce serait peut-être plus facile de t'aider.

Merci de vos réponse, au moins je sais ce qui manque à mon post initial pour que vous puissiez m'aider. Comme je l'ai dis au départ c'est le menu qui cloche sous IE, particulièrement la puce qui apparait au survol des liens est coupée sur IE (voir avec FF pour voir la différence).

Le code correspondant est le suivant :

#sidebar div ul li a {
    margin-left: -13px;
	padding-left: 22px;
    color : white;
    text-decoration:none;
    font-weight:bold;
}

#sidebar div ul li strong a {
    background: transparent url(img/puce.gif) no-repeat left 50%;
}

#sidebar div ul li a:hover {
    margin-left: -13px;
	padding-left: 22px;
    background: transparent url(img/puce.gif) no-repeat left 50%;

Pour la partie HTML c'est une liste classique <ul> <li> imbriquée dans un div.

Merci.

Vero a écrit :
Bonjour benny,

Comme je te vois abandonné (e) de tous, je vais essayé de t'aider :

Je pense qu'il s'agit du problème de modèle de boite standard et microsoft

Je te laisse voir comment modifier ton code ...



edit :

Après réflexion, en jouant avec la propriété :

list-style-position:inside;

peut-être ...

Merci véro, j'ai déjà pris connaissance de cet excellent article d'openweb mais il ne m'as pas permis de résoudre mon problème. En général je poste pas de message à tout va où sans avoir fait des recherches avant ;).

Sinon pour l'idée du list-style position j'ai tenté sans succès, cette propriété css permet en fait de recaler la boite "liste" à l'intérieur du div conteneur pour qu'il dépasse ou non (inside,outside). Par défaut la propriété est sur ouside (et c'est ce que je veux >.<) ce qui lui permet de dépasser la boite conteneur or dans mon cas sous IE ça dépasses pas, ça coupe net au niveau du conteneur (la sidebar).
En tout cas merci j'ai approfondi mes connaissances des propriétés css des les listes

Re,

je n'ai pas de soluces, mais des remarques: lorsque tu agrandis le texte sous IE, la puce ne suit pas si le lien fait plus d'une ligne; je pense que cela vient de tes margin-left et padding-left en pixels. Peut-être une piste??

Sinon, aucun rapport peut-être, mais tes liens centraux changent d'apparence sous IE, mais pas sous FF...

Je pense: et en ajoutant un z-index à tes puces?
Modifié par bouquins (12 Jun 2005 - 21:34)

merci pour tes idées et remarque, pour les marges la réponse est "c'est pas ça" avec ou sans marges le problème reste le même si on agrandi la taille du texte, la différence c'est la position de la puce par rapport au texte.
Le z-index a été une de mes 1eres idées mais nan ca marche pas non plus la puce reste coupée.

Pour les liens centraux si tu fait allusion aux liens dans la div de droite (lire la suite etc) chez moi ils changent de couleur chez IE et FF (cela dis la différence est pas flagrante : noir, marron et violet).

benny a écrit :

Sinon pour l'idée du list-style position j'ai tenté sans succès, cette propriété css permet en fait de recaler la boite "liste" à l'intérieur du div conteneur pour qu'il dépasse ou non (inside,outside).
En tout cas merci j'ai approfondi mes connaissances des propriétés css des les listes

Ho, tu sais on apprend tous quelque chose chaque jour ... il y a tant à lire et à découvrir. Et c'est formateur d'essayer de donner un coup de main !


Je pensais qu'il pouvait y avoir un rapport entre le modèle de boite et la position de la puce : vue sa taille.

Mais je suis loin de la maîtrise du CSS !

A+

merci véro, n'empêche même si les idées n'étaient pas bonne la direction elle était bonne .
J'ai enfin trouvé la solution en hackant le parsing CSS de IE PC.
Le problème à la base est que IE voit la liste comme une boite imbriquée dans une autre boite (le div conteneur) et masque ce qu'il y a en dehors de la boite div conteneur. Ma solution c'est de retirer la partie qui m'intéresse (ici le lien du <li> avec la puce perso) du flux normal de la page grace à un hack IE PC seulement et à le positionner (le lien) en absolu.
Ce qui nous donne :

#sidebar div ul li a {
/* IE PC voit la fin de commentaire sur cette ligne \*/>
    position:absolute;
/* les autres browsers voient la fin de commentaire sur cette ligne */
    margin-left: -2ex;
	padding-left: 4ex;
    color : white;
    text-decoration:none;
    font-weight:bold;
}

Conséquence : seul IE pc lit le position: absolute; et sort la boite du flux.
Le seul point que je ne peut pas tester c'est IE mac même si normalement ca devrait passer.