28220 sujets

CSS et mise en forme, CSS3

[Résolu] Padding infèrieur superflu d'un LI sous IE

Bonjour,
J'ai un probleme assez précis sur une marge infèrieur qui apparait dans IE
dans un <LI> comprenant une image. Firefox et les autres principaux browsers me l'affiche très bien par contre.
J'ai essayé d'ajouter une marge-bottom négative mais ça supprime le border
blanc infèrieur.
Est ce que quelqu'un sait comment arranger ça?

css

#menu_gauche {position: absolute; top:96px; left:0; width:145px; background-color:#AEB3BE;  border-top: 1px solid #fff}
	#menu_gauche dt {cursor: pointer; height: 21px;	background: #545E76; border-bottom: 1px solid #fff}
	dt#prog {height:23px;}


html

<dl id="menu_gauche">
		<dt id="prog"><img src="images/menu-g_prog.gif" width="145" height="23" /></dt><dt>...</dt>
<dd>...</dd>
</dl>

Modifié par herman31 (17 Jul 2005 - 16:35)
Si je me fie au bout de code CSS que tu montres, tu ne l'as pas répété pour l'élément dt. J'ai eu un problème semblable il y a peu et j'ai réussi en faisant cette répétition, les notions d'héritage pour certaines propriétés étant parfois un peu fantaisistes sous IE Smiley ohwell
J'ai essayé de la répéter mais rien n'y fait! Encore une enigme, IE est parfois trop handicapant. J'espere que le version 7 rattrapera ces defaillances et sera plus logique.
Merci quand même.
Tu prêches un convaincu. Ceci dit, je suis certain qu'on peut corriger quand même le problème. Soit avec un line-height soit une astuce quelconque, il faut vraiment de l'imagination pour arriver à un résultat similaire partout.
Tu as un lien où on pourrait jeter un oeil indiscret au code de façon plus globale ?
Modifié par Cyrano (16 Jul 2005 - 12:46)
herman31 a écrit :
Non pas de lien dsl. je me debrouillerais.

Ciao


hep! l'homme pressé ! Smiley cligne

Tu reviendras bien tout de même nous faire partager tes découvertes, histoire de clore ce fil par un résolu, n'est-ce pas ? Smiley ravi
Salut,
oui sans doute mais avant faut que j'arrive à trouver l'astuce
qui me permettra de resoudre ce maudit probleme. Smiley decu
Voila j'ai trouvé un moyen d"eviter la marge infèrieur en ajoutant une marge négative à l'image : dt#prog img {margin-bottom: -4px}
herman31 a écrit :

Voila j'ai trouvé un moyen d"eviter la marge infèrieur en ajoutant une marge négative à l'image : dt#prog img {margin-bottom: -4px}

hum... Smiley hum

Ça ne m'a pas l'air bien solide tout ça.
Utiliser des marges négatives pour solutionner ce type de problème me semble des plus hasardeux... Smiley ohwell

Un petit effort pour que ce sujet serve à quelque chose ?
Au passage, un code bien présenté augmente les chances qu'on s'intéresse à votre problème...

#menu_gauche {
	position: absolute;
	top: 96px;
	left: 0;
	width: 145px;
	background-color: #AEB3BE;
	border-top: 1px solid #fff
}

#menu_gauche dt {
	cursor: pointer;
	height: 21px;
	background: #545E76;
	border-bottom: 1px solid #fff
}

dt#prog {
	height: 23px;
}

<dl id="menu_gauche">
	<dt id="prog"><img src="images/menu-g_prog.gif" width="145" height="23" /></dt>
	<dt>...</dt>
	<dd>...</dd>
</dl>
Un peu d'histoire :

- 16 juillet, 12h 04 J'ai un problème, voici un bout de code...

- même jour, même heure, 25mn plus tard Non, j'ai pas d'url. Vous trouvez pas ? Tant pis...

Dommage... Il avait l'air intéressant, ce petit pixel en balade Smiley decu

Bah... l'homme pressé est tout de même revenu mettre [résolu] sur son sujet, c'est déjà ça Smiley cligne
Stephan a écrit :
a écrit :
Ça ne m'a pas l'air bien solide tout ça.


Stephan, ce n'est peut-être pas la meilleurs solution mais je n'ai trouvé que ça et je ne recherche pas forcément LA solution idéale!
C'est un hack comme un autre et je n'ai pas vraiment le temps de m'attarder dessus...

Oui ok le code était mal présenté, j'en prends note même si c'est ma façon
de présenter la plupart des propriétés.

Laurent si tu pouvais arrêter avec ton "homme préssé", ça serait pas mal. Smiley cligne
Modifié par herman31 (17 Jul 2005 - 22:27)
herman31 a écrit :

C'est un hack comme un autre et je n'ai pas vraiment le temps de m'attarder dessus...

Ah non. Ce n'est pas un hack, c'est une erreure de conception. Il y a forcément quelque chose qui cloche dans ton design. Et par ailleurs, pourquoi placer des images dans des <dt> ? Et pourquoi ton titre est « Padding infèrieur superflu d'un LI sous IE » ?

On ne te demande pas de trouver la solution idéale par toi-même. Simplement nous donner un minimum de matière pour pouvoir reproduire le problème. Il y a suffisamment de têtes pensantes ici pour trouver une solution viable...

M'enfin. Si c'est résolu. Smiley decu

/me dommage, il m'intriguait ce décalage Smiley murf
Modifié par Stephan (17 Jul 2005 - 23:20)
à mon avis son pb est le même que le mien

sous IE entre chaque <li> j'ai une décalage de 1-2pixel
alors que sous FF il n'y a aucun décalage inférieur

alors que le margin est à 0
html

<div id="principal">
<div id="contenu">
<ul>
	<li><a href="#">Assurances</a></li>
	<li><a href="#">Procédures sécurité</a></li>
</ul>
</div>
</div>

css
* {margin : 0px;padding : 0px;}
#principal div li {font-size : 0.8em;list-style-type : none;}
#principal div li a {width : 320px;display : block;color : #02797F;padding-left : 5px;text-decoration : none;background-color : #FFFFFF;border : solid 1px #b0ced0;border-left : solid 5px #008C95;}


j'ai pas réussi à résoudre ce pb

j'ai bien sur essayer le margin négatif mais sous FF du coup les <li> se chevaucher alors que sous IE c'était nickel

je ne sais pas s'il existe un hack pour cela
Salut,
Si justement il existe le !important pour ça, et c'est ce que j'ai utilisé n'ayant pas trouvé d'autres solutions.
Quand tu ecris 
li {margin-top: 0; margin-top: -4px}

C'est le dernière propriété qui est prsi en, compte par tous les browsers.

Par contre si tu écris 
li {margin-top: 0 !important; margin-top: -4px}

Logiquement c'est la propriété comprenant le mention !important qui est prioritaire mais comme explorer ignore le !important alors
il prends en compte le dernière aussi dans ce cas là.

Donc a toi d'exploiter cette defaillance d'IE pr leur différence.
Sujet clos
Aller à