[Résolu (sauf un petit point)] Liens de type bloc dans une liste

Bonjour à tous,

J'aimerais savoir d'où provient la grandeur de l'espace entre les liens de ce menu sous IE (sous firefox, aucun probleme).

CSS :

1) Par défaut

	#contenu ul a {
	border-bottom : 1px solid #BBB;
	display : block;
	}
	#contenu ul li{
	margin : 0.5em 0;
	list-style-type : square;
	margin-left : 1em;
	}

( 2) + Juste pour le menu

	div#menu a {
	margin : 0 5px;
	padding : 0 10px;
	display : block;
	border : 1px solid #CCC;
	}

)

XHTML

<ul id="navigation">
	<li><a href="index.php" title="Revenir vers la page d'accueil" accesskey="1">Accueil</a></li>
	<li><a href="articles.php" title="Voir la liste des articles">Articles</a></li>
	<li><a href="programmes.php" title="Voir la liste des Programmes">Programmes</a></li>
	<li><a href="admin.php" title="Acceder à l'administration">Admin</a></li>
</ul>

URL
http://test.neddertroll.net

Merci !
Modifié par Dark elf (31 Aug 2005 - 00:23)

Bonjour Dark elf !

Si tu places tous les <li> en ligne, l'espace disparait.

<ul>
<li></li><li></li><li></li><li></li>
</ul>

Pourquoi ? Bonne question...

? oO

Je vais essayer..

Sacré nom de dieu, tu as raison
C'est une erreur connue ou tu as bidouillé pour trouver ?

...Si quelqu'un peut répondre à la question "pourquoi ?", ça serait pas de refus

En tout cas, merci Stephan.. au moins ça prouve que ça vient pas du tout de moi. Ca m'embete de mettre tous les <li> à la suite
Modifié par Dark elf (24 Aug 2005 - 18:27)

Le coupable s'appelle haslayout : c'est un état de certains éléments, propre à IE Windows, qui est à l'origine d'une grande partie des bugs CSS de celui-ci. Ici, c'est l'absence de cet état qui provoque le bug.

Voir http://www.brunildo.org/test/IEWlispace.php (en italien) et http://www.satzansatz.de/cssd/onhavinglayout.html (en anglais)

Diverses propriétés appliquées aux éléments <li> et/ou <a> peuvent les doter de layout et régler le bug:
- width ou height
- float ou position:absolute
- display: inline-block
- border (élément li)
- zoom: 1 (pratique, car sans aucun effet indésirable, mais à placer dans une CSS en commentaire conditionnel, car invalide CSS2)
Modifié par Un vacancier (24 Aug 2005 - 18:41)

Dark elf a écrit :

C'est une erreur connue ou tu as bidouillé pour trouver ?

On en avait déjà discuté ici :
http://forum.alsacreations.com/topic.php?fid=4&tid=1186

Je ne sais pas quelle est la meilleure façon de régler ce bug...

Si j'ai le temps plus tard

ha ? merci, je vais lire ça

Donc, si je met un width : 100% sur mes liens, ça pourrait regler le probleme.
Je vais faire des tests.

Le plus innofensif semble être ceci :

	div#menu a {
	margin : 0 5px;
	padding : 0 10px;
	[b]display : inline-block;[/b]
	border : 1px solid #CCC;
	}

En effet
C'est bien mieux que mon width qui posait quelques problemes.

Une derniere chose.
SOus IE, le Texte de mon footer est enorme, je viens de m'en apercevoir.
Je me demande si cela ne vient pas de mon

font-size : smaller

?

Dark elf a écrit :
En effet
C'est bien mieux que mon width qui posait quelques problemes.

Une derniere chose.
SOus IE, le Texte de mon footer est enorme, je viens de m'en apercevoir.
Je me demande si cela ne vient pas de mon

font-size : smaller

?

Sans en être totalement certain, je pense qu'IE ne supporte pas ces valeurs.
<edit />
Après vérification, IE6 supporte les valeurs « smaller » et « larger ».

À mon avis, mieux vaut utiliser le pourcentage, mais je dis peut-être cela parce que je n'ai jamais utilisé « smaller » et « larger »
Modifié par Stephan (24 Aug 2005 - 20:10)

Bon, je vais mettre un pourcentage..
heu une question, en fait 0.5em = 50%

Heu, bon, faut que j'arrete de faire du hors sujet dans mon sujet

bah... Tu peux toujours continuer de polluer ton propre sujet, mais un p'tit Résolu serait apprécié dans ton titre

En effet

Je reviens sur ce sujet pour vous demander pourquoi mes liens de type bloc, ne font pas 100% de la taille disponible (comme sous Firefox et Ie), sous Opera ?

Un lien pour que l'on puisse voir « in situ » ?

Version d'Opera ?

Pour Opera, je viens de le télécharger à l'instant (je profite du fait qu'il soit gratuit sans pub exceptionnellement aujourd'hui)..
Pour le lien, c'est toujours celui du début du sujet. A moins que tu ne parles d'un screenshot ?
Modifié par Dark elf (31 Aug 2005 - 01:21)

Essais ceci :

	div#menu a {
	margin : 0 5px;
	padding : 0 10px;
	display: block !important;
	display : inline-block;
	border : 1px solid #CCC;
	}

<edit />
Oups, je viens de constater que IE souffre du même problème
Modifié par Stephan (31 Aug 2005 - 04:56)

Ceci alors :

	div#menu a {
	margin : 0 5px;
	padding : 0 10px;
	width : 118px; 
	display : block !important;
	display : inline-block;
	border : 1px solid #CCC;
	}

Résultat non garanti dans les versions 5 d'IE (modèle de boite erroné).

Il y a toujours le Box Model Hack...

div#menu a {width: 150px; voice-family: "\"}\""; voice-family: inherit; width: 118px;}

Mais je commence à me demander si ce n'est pas un peu complexe tout ça pour le résultat.
Modifié par Stephan (31 Aug 2005 - 05:34)

Oui..je trouve aussi

Si on tente de s'accorder avec tous les navigateurs, j'ai l'impression que soit on abandonne pas mal de de détails graphiques, soit on bousille son code

Pour IE5, tant pis. Ca reste très lisible, c'est mon seul but avec les navigateurs ne respectant pas les normes. Seulement, je croyais que Opera les respectait beaucoup mieux, d'ou ma question en fait.

Au passage, je m'interrogeait sur la valeur inline-block, et je ne la voie nulle part dans les recommandations css2 (ici)
Modifié par Dark elf (31 Aug 2005 - 11:07)

Souvent, quand on essaye de réconcilier tous les navigateurs, on en arrive à quelque chose de complexe comme ceci. C'est souvent le signe que l'on s'y est mal pris dès le départ. Il semble que la définition d'un width: 118px; (voir le post d'Un vacancier) pour l'élément <a> ait rendu inutile l'ajout d'un inline-block pour IE/Win.
Le code nettoyé serait donc :

	div#menu a {
	display: block;
	width : 118px;
	padding : 0 10px;
	border : 1px solid #CCC;
	margin : 0 5px;
	}

À vérifier...

En ce qui concerne la valeur inline-block, c'est une anticipation raisonnable de CSS 2.1.

Merci pour les précisions.

Quand au "code nettoyé", je n'aime pas bien avoir des tailles aussi précises (118 pixels). Il suffit de changer un truc pour ne plus s'y retrouver, et avec le modele erroné des boites, on a souvent des surprises..

Je vais quand même y réfléchir.