[resolu] Marge de l'element <li> avec IE

Bonjour ou bonsoir suivant le cas.

j'ai un léger problème de hauteur de l'élément <li> , qui varie entre IE et FF mais également entre un DTD XHTML 1 strct ou transitionnel.

Toutes mes marges sont a zero , et il 'y a pas d'image dedans.

Comme les exemples en ligne garantissent le retour de l'être aimé selon MPOP, voir cette page de test en ligne avec différents navigateurs.

L'élément <li> a un fond rouge , et l'element <a> lui a un fond blanc en :hover, pour mieux se rendre compte.

voici le HTML:

		<ul class="menu">
			
			<li><a href="index.php" accesskey="a" tabindex="1000" title="Retour à l'acceuil du site" id="menu1">Accueil</a></li>
			<li><a href="competences.php"  tabindex="2000" title="Les compétences de RoseGrenouille" id="menu3">Comp&eacute;tences</a></li>
			<li><a href="identite.php" tabindex="3000" title="Découvrir qui est RoseGrenouille" id="menu2">Profil d'entreprise</a></li>
			<li><a href="portfolio.php"  tabindex="4000" title="Portfolio contenant les réalisations de RoseGrenouille" id="menu5">Portfolio</a></li>
			<li><a href="ressources.php" tabindex="5000" title="Centre de ressources RoseGrenouille" id="menu4">Articles</a></li>
			<li><a href="contact.php" accesskey="m" tabindex="6000"	 title="Contactez RoseGrenouille" id="menu6">Contact</a></li>

		</ul>

et le CSS

.menu li {
margin:0;
padding:0;
background-color:red;
line-height:1px;
margin-bottom:2px;
font-size:1em;
}

.menu a {
display:block;
margin:0;
line-height:1.5em;
text-align:left;
text-decoration:none;
font-weight:bold;
padding:5px 1em;

}

je suis certain que l'explication est très simple mais je ne la vois pas !!

Rien vu de spécifique la dessus dans les tutos, ca ne me semble pas etre le modele de boite vu que tout est a zero en dimensions et marges, on est pas non plus dans la taille minimale mise par IE par défaut parce qu'on est plus grand que 20px, bref je suis un peu perdu dans le noir ....

Quelqu'un pour m'éclairer ? MERCI !!!!!!
Modifié par RoseGrenouille (08 Mar 2007 - 21:47)

Salut !

Je suis confronté exactement au même problème que toi mais pas tout à fait dans la même situation.
Dans mon cas, c'est un span que je met dans mes éléments li.

En résumé le problème semble se décrire sous cette forme : Pour ie PC, si on fixe à "block" la propriété "display" d'un élément "inline" contenu dans un élément li, cet élément li se voit octroyer une marge basse.

Il est à noter que si cet élément li possède un border-bottom, la marge disparait.


Pour revenir à ton cas, si c'est possible pour toi, peut-être peux-tu laisser ton lien en inline mais l'entourer par un div.

Antoine

je dis peut-être une connerie, mais si t'essaies d'enlever ton line-height de .menu a et que tu le précises bien dans .menu li { line-height: 1.3em }
Modifié par Sirob V (08 Mar 2007 - 15:57)

c'est encore le bug de super marge ie pour les li, il faut mettre un height:1% en commentaire conditionnel a ie. D'ailleur peut-être que ça evitera aussi les clignotement au hover sur tes liens (toujours sous ie).
Voir "le concept de haslayout dans ie win", lire entiérement le document de Laurent Denis sur le sujet, ça prend une heure, mais ça t'en fait gagner 20 par la suite.

Salut Antoine et vraiment merci pour l'explication.

Je ne connaissais pas ce comportement d'IE PC. Mais c'est effectivement ca qui foirait.

EN fait je n'ai pas retenu ton idée d'entourer mon <a> par un <div> parce que je trouve que les <div> sont a utiliser avec modération et que dans ce cas ci je n'ai pas d'image

Par contre , ton info sur le border-bottom est excellente. En fait j'ai affecté à mon élément <li> un border-bottom:1px solid #"macouleurdefond" et le tour est joué !

@ sirob : personne ne dis jamais de connerie ici ! j'ai essayé cette solution hier , le résultat est que la ligne grandit mais l'effet "margin-bottom" se conserve tout de même. Merci quand même d'avoir essayé !

J'ai rectifié le menu de test qui en ligne. Ce qui j'aurais besoin , c'est de savoir si ca fonctionne bien sous MAc aussi avec IE, FF et Safari.

A regarder ce bout de menu , je me suis aussi aperçu qu'il y a un effet de clignotement assez pénible sur IE 5.5 .

En fait l'element <a> (qui possede un text:align:left) ne semble pas prendre toute la largeur de l'element parent qui est <li>. Il faut donc survoler le mot et non la ligne pour avoir l'effet associé a la pseudo-classe :hover associé à l'élément <a>.

La ou ca se complique , c'est que pour :hover, j'ai choisi un text-align:right.
Comme le comportement est le même avec :hover, la encore seul le mot et non pas toute la ligne a le comportement.

Alors avec un mot comme "identification des macroinvertébrés " ca roule, mais avec "code" ca roule plus du tout , et il se produit un effet de scintillement logique car quand on passe la souris sur le lien aligné a gauche, celui-ci "s'echappe vers la droite" ponctuellement et sort du :hover !

Edit tardif : @ MAtMat : bon ben je pense que tu viens de répondre !

@matmat: je n'aurais pas le temps de repasser au travers du concept du "haslayout" qui s'il est vrai qu'il fait gagner du temps et aussi super abstrait, en tout cas pas aujourdhui .

le height 1% avec commentaire conditionnel ne fonctionne pas, dans mon cas le border 1px reste donc la meilleure solution a a mon sens pour mon probleme.

Quand au clignotement des liens,tjs sur IE 5.5 PC je l'ai tenté mais ca reste un peu night fever et un peu comme il veut ( genre la premiere ligne <li>, elle ne "clignote" pas, c'est a dire que ou que l'on passe le pointeur sur l'element <li>, le :hover s'applique. Par contre les lignes suivantes c'est le joyeux scintillement décrit plus haut !

je vais me tenter un truc un peu bete de style <ul><li></li></ul><ul><li></li></ul><ul><li></li></ul>
juste pour voir si tous les <li> prennent ce comportement la....

affaire a suivre

Content que le border-bottom te convienne !

Pour ce qui est du comportement de ton menu sur MAC, je te rassure, tout se passe bien. Testé sous FF, IE, Safari, Netscape, camino !

Je vais me renseigner sur le concept du "haslayout" car dans mon cas, je ne peux utiliser la technique du border-bottom...

Pour ce qui est du clignotement de tes liens, je ne pense pasa que ce soit du à ton texte-align. En effet, ton lien est affiché en bloc, quoiqu'il advienne du texte à l'interieur (a gauche ou a droite), le lien lui, est toujours un rectangle qui ne change pas d'emplacement...


Antoine

Edit : je suis nouveau sur le forum, savez-vous s'il est possible de suivre l'évolution des post via une notification par email ?
Modifié par RockMakesMeSweat (08 Mar 2007 - 17:47)

RockMakesMeSweat a écrit :
Edit : je suis nouveau sur le forum, savez-vous s'il est possible de suivre l'évolution des post via une notification par email ?

Hello et bienvenue.

Pour répondre précisément à cette question :
http://forum.alsacreations.com/ad-1-36-Comment-utiliser-toutes-les-capacites-de-ce-forum-.html

Merci Raphaël !

Bon, l'étape MAc étant passée on touche au but!

pour ce qui est du scintillement, je suis d'accord avec toi , Antoine, le lien prend toute la place du DIV parent puisqu'il est en display:bloc.

On peut d'ailleurs tres bien le verifier en mettant un background-color a l'element <a> , et le restitution de l'element sur IE Win 5.5 montre que le bloc fait effectivement toute la largeur.

Sauf que......seul le texte est reactif et pas la boite !

c'est comme s'il y avait un sous element <p> non ecrit dans <a> et que le hover ne fonctionnait que sur <p> ( bon l'allusion est douteuse mais c'est ca que fait le rendu !!!)

et en plus sans compter l'histoire de la premire ligne qui elle adopte un comportement normal !

Bref .....

RoseGrenouille,

A partir de ton code, j'ai réussi à perdre l'effet disco-mirrorball en enlevant le width=100% contenu dans ul ! Toutefois je ne parviens pas encore à avoir tout la case de ton menu reactive au rollover.
Cela dit, ça doit être possible car quand je pars d'un code simpliste te l que le suivant, j'y arrive :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">	
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
		body{
			background-color: #ff0000;
		}
		ul{
			margin: 0;
			padding: 0;
			background-color: #00ff00;
		}
		li{
			margin: 0;
			padding: 0;
			list-style-type: none;
			background-color: #0000ff;
			border-bottom: solid 1px #0000ff
		}
		a{
			display: block;
			margin: 0;
			padding: 0;
			background-color: #cccccc;
			text-align: left;
		}
		a:hover{
			text-align: right;
		}
		</style>
	</head>
	<body>	
		<ul>
			<li><a href="">Item 1</a></li>
			<li><a href="">Item 2</a></li>
			<li><a href="">Item 3</a></li>
			<li><a href="">Item 4</a></li>
		</ul>
	</body>
</html>

Peut-etre pourrais-tu en partant de ce code et en rajoutant les éléments étape par étape, identifié l'étape qui conduit au problème.

Matmat, grand merci pour ta piste sur le haslayout qui m'a permis de régler mon problème en fixant un height: 1% à mon span. (RoseGrenouille, peut-etre devrais-tu utiliser ça à la place du border-bottom (ça te permet si besoin de te passer de bottom)).



Antoine
Modifié par RockMakesMeSweat (08 Mar 2007 - 18:59)

RockMakesMeSweat a écrit :
Toutefois je ne parviens pas encore à avoir tout la case de ton menu reactive au rollover.

Devinez ? Il suffit de doter la boîte de l'élément <a> de layout

Mais c'est bien sûr !
Merci Laurent !!

RoseGrenouille, essaie ça :

.menu a {
display:block;
line-height:1.5em;
text-align:left;
text-decoration:none;
font-weight:bold;
padding:5px 1em;
font-size:1em;
background-color:white;
width:auto;
height: 1%;
}

Par contre Laurent, pourquoi dans la portion de code de base que j'ai donnée, il me semble que rien ne fixe la propriété en question haslayout a true, pourtant tout semble se passer normalement ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">	

	<head>

		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

		<style type="text/css">

		body{

			background-color: #ff0000;

		}

		ul{

			margin: 0;

			padding: 0;

			background-color: #00ff00;

		}

		li{

			margin: 0;

			padding: 0;

			list-style-type: none;

			background-color: #0000ff;

			border-bottom: solid 1px #0000ff

		}

		a{

			display: block;

			margin: 0;

			padding: 0;

			background-color: #cccccc;

			text-align: left;

		}

		a:hover{

			text-align: right;

		}

		</style>

	</head>

	<body>	

		<ul>

			<li><a href="">Item 1</a></li>

			<li><a href="">Item 2</a></li>

			<li><a href="">Item 3</a></li>

			<li><a href="">Item 4</a></li>

		</ul>

	</body>

</html>

Ahhhhhhhhhh c'est encore le layout et les non-dits de Microsoft.

Décidemment tous mes problèmes viennent depuis 6 mois au moins de ce genre de truc.....

Bon effectivement en donnant un layout:true a <li> ca me regle le problème d'effet de marge dans ma hauteur de ligne et en mettant la mêmem chose à <a> , ca regle effectivement le probleme du scintillement.

Antoine en passant le width:100% pour <a> , a mon avis ne sert a rien puisque c'est deja un bloc qui part defaut a un width:auto et qui donc va prendre toute la place disponible jusqu'aux limites de son parent qu'est <li>.

Bon maintenant que <a> et <li> ont le layout , c'est bon mais j'ai une marge (sur toutes les versions d'IE) qui s'est rajouté a gauche , comme si le fait d'avoir conféré le layout a indiqué a la liste de faire un retrait par défaut.

j'ai mis margin et padding a 0 sur <ul>, <li> et <a> mais rien n'y fait....

On avance on avance....
Modifié par RoseGrenouille (08 Mar 2007 - 19:56)

Bon, j'ai été lire le doc sur le haslayout sur blog & blues, et j'ai chopé mal a la tête.

C'est très intéressant, super intéressant même mais comme le but du jeu est d'essayer d'avancer, je me suis remis au travail et j'ai trouvé quelque chose qui fonctionne.

Inconditionnel de la sémantique | Attention ! tu pourrais ne pas être très content !

Récapitulons pour ceux qui liraient ce post et ne veulent tout se taper depuis le haut .

Le comportement des elements <li> contenant des <a> peut parfois etre anarchique essentiellement avec IE, car ce dernier peut leur conférer ou non le layout , dépendemment de plein de paramètres que nous ne rappellerons pas ici.

J'avais un souci de hauteur de ligne sur IE 5.5 qui me créait une sorte de margin-bottom tout seul et le fait de conférer le layout en indiquant height:1% ( dimension explicite) l'a réglé .

Ensuite j'avais le souci que mon conteneur <a> en display block ne voulait pas réagir au comportement :hover sur tout le conteneur mais seulement sur la partie ou apparaissait du texte.
J'ai la aussi rajouté une dimension explicite pour lui conférer a lui aussi le layout. et la bingo !!!

Sauf que bingo se promène toujours avec super bingo et me voila avec une marge gauche d'a peu pres 2,47 em 1/4 que rien de facile ou sans commentaires conditionnels ne semble pouvoir résoudre.

Quand on y réfléchit , mettre des dimension explicites pour IE pour conférer le layout alors qu'on fait tout un site avec un design fluide et des polices en em peut sembler en terme de pure logique quelque peu abracadabrant, surtout quand ce pixel affecté a height ne se traduit pas du tout par un pix de plus mais par un lien qui fonctionne correctement. Ca revient un peux a changer d'autoradio pour réparer un moteur par exemple.

Je sais on ne l'a pas choisi et donc il faut faire avec.....mais quand même , juste pour la logique j'aime pas bien cela.

Alors, revenons a nos moutons. c'est l'élément <li> qui nous pose problème . Il est écrit dans tous les bons tutoriels qu'un menu est une suite logique d'éléments que l'on peut ( doit ? ) placer dans une liste .......et ensuite prendre des techniques de Gijoe pour gérer , forcer ou enlever le layout.

vous savez quoi ? : j'ai enlevé la liste ......pour ne garder que les liens avec un display : block et le width de mon choix .......et CA MARCHE !!!

Oh bonheur , plus de layout, de dimensions explicites, de marges farfelues a compenser par de la bidouille et le tout semble fonctionner partout !

J'ai un peu le sentiment d'avoir fauté qd même en trahissant le Grand esprit de la Sémantique

oups: en fait il y a quand meme une dimension explicite pour le a:hover sinon ca clignote sous IE5.5.

RoseGrenouille a écrit :

Quand on y réfléchit , mettre des dimension explicites pour IE pour conférer le layout alors qu'on fait tout un site avec un design fluide et des polices en em peut sembler en terme de pure logique quelque peu abracadabrant

oui, c'est la raison pour laquelle on gère principalement le haslayout à l'aide de zoom: 1, qui est sans aucun effet sur la mise en page (et une CSS IE en commentaires conditionnels).

RoseGrenouille a écrit :


J'ai un peu le sentiment d'avoir fauté qd même en trahissant le Grand esprit de la Sémantique

fauté... non, je suppose que tu t'es plus une jeune vierge.

Mais loupé un ou deux épisodes essentiels de tout ce fichu schbintz à propos des standards du Web, oui, certainement. Par exemple, la séparation de la structure et de la présentation

Dreamweaver, c'est bien, aussi.
Modifié par Laurent Denis (08 Mar 2007 - 21:16)

a écrit :
fauté... non, je suppose que tu t'es plus une jeune vierge.

oups....la grenouille est rose, mais c'est un mâle !

Euh pour ce qui est du reste, les épisodes des saison 2,3 et 4 et 5 je les ai vus, c'est la saison 1 qui me manque un peu.... tu sais quand M. Bill et son renard Fox vivent des aventures dans la jungle des standards .....

Oui Dreamweaver c'est bien aussi.....mais j'avoue que je n'ai pas suivi le rapport avec le reste

Bon , il faut tenir , on est que jeudi.....je pense que ce sujet est en grande partie résolu !

C'est pas forcément que c'est mal, c'est surtout que c'est dommage, parceque c'est pas si compliqué et que du coup ton résultat est moins bon.
Visuelement c'est pareil, mais pour un navigateur non graphique, ou une autre feuille de style ce n'est pas pareil, tu as tout tes liens les uns colés aux autres.

La démarche pour ie peut-être la suivante:

Tu fais ta page sans te soucier d'ie, tu fais de ton mieux pour que ça soit clair et propre.

Ensuite tu regarde sous ie,

Si c'est vraiment la catastrophe tu changes de design

Si il y a des petits décalages, tu soupirs, tu touche a rien e tu attends ie12.

Si tu as des doubles marges, des contextes de formatage non respecté, des li super grand, des elements décalés tu leur rajoutes un layout. Pour vérifier que c'est vraiment ça tu mets zoom:1 sur tout ces élements de travers, si ça marche tu fais une feuille de style a part pour ie6 et tu fais un truc comme ça:

.menu li, .menu a, .mapage, .elementdetraver{height:1%}

En géneral tu as toujours besoin d'une feuille de style pour ie, c'est pas méchant. Tu perdras plus de temps a essayé de pas en faire qu'a en faire une.

Là tu as pu résoudre ton probléme, mais le prochain tu vas mettres encore 2 autre heures, alors que si tu en fais une et que tu connais les prinicipaux problémes d'ie, tu dors mieux.
Modifié par matmat (08 Mar 2007 - 21:58)

Non je rigolais en disant que c'est mal.....

je sais bien que c'est bien mieux dans une liste mais des fois qu'est ce qu'on est content quand tout marche de la même manière partout !!!!

Il va falloir que je me fasses une feuille de style pour IE, je ne le sais que trop....je reste juste avec l'idée que l'on a fait quelque chose de bien compliquée la ou le plus simple aurait tres bien fonctionné....!

mais comme je l'ai di plus haut , on va vivre avec....

D'ailleurs , mes bugs d'affichage ne venait qu'avec IE 5.5 et si je regarde l'ensemble des sites que je gère au niveau des stats , c'est même pas 1% des utilisateurs ....mais c'est une question de principe!