28221 sujets

CSS et mise en forme, CSS3

IE et display: block [peut aider]

Bonjour,

Un petit problème relevé sur leque j'ai bûché un bon bout de temps.

Prenons un menu formé d'une liste:

[#darkblue]<ul>
	<li>[#darkgreen]<a href=[#blue]"#"[/#]>[/#]Item 1[#darkgreen]</a>[/#]</li>
	<li>[#darkgreen]<a href=[#blue]"#"[/#]>[/#]Item 2[#darkgreen]</a>[/#]</li>
	<li>[#darkgreen]<a href=[#blue]"#"[/#]>[/#]Item 3[#darkgreen]</a>[/#]</li>
	<li>[#darkgreen]<a href=[#blue]"#"[/#]>[/#]Item 4[#darkgreen]</a>[/#]</li>
</ul>[/#]


Pour une raison quelconque, on souhaite avoir ses liens (balise a) en "display:block;". Pas compliqué :
[#darkblue]
[#darkorchid]ul a [/#]{
	display: [#red]block[/#];
}[/#]


Sous Firefox 1.0 (motorisé Gecko), pas de problème, le résultat attendu est au rendez-vous. Par contre, sous IE6 (SP2), on a de gros espacements verticaux supplémentaires. Le résultat est observable sur cette page de test (Avec le proloque XML - idem). À voir sous Firefox 1.0 et sous IE6 (et sous d'autres si possible, pour retour d'impressions).

Une solution trouvée sur Internet ( Smiley google est ton ami) est la suivante : il faut mettre les éléments de la liste (li) en "display: inline;":
[#darkblue]
/* (...)*/
[#darkorchid]ul li [/#]{
	display: [#red]inline[/#];
}[/#]


Cette solution, visible sur cette seconde page de test (Avec le proloque XML - idem)

Dégat collatéral :la puce disparaît avec les deux navigateurs. Plutôt logique.

La question est "pourquoi ?" De ce que j'observe, j'en déduis qu'IE, au lieu de comprendre "bloc = dimensionnable, pas en ligne, padding, margin et border applicables, etc", il comprend "bloc = retour à la ligne" !?

En attente d'explications et en espérant que ça aide quelqu'un.

@+, HoPHP
Modifié par HoPHP (20 Feb 2005 - 22:14)
Pour garder les puces moi tu peux faire cela mais je ne sais pas si cela répond à ton problème
ul#styled {
			display: block;
		}
		ul#styled li a {
			display: inline;
		}


En fait au lieu de dire que les liens sont sur le ul tu dis qu'ils se trouvent sur les li cela reviens au même dans un menu.
Mais encore une fois je ne sais pas si j'ai bien compris le problème.
En fait, le problème apparaît quand on met le lien (a) en display:block; (parce qu'on veut le dimensionner ou parce qu'on désire qu'il prenne toute la largeur (ou autre spécificité des blocs) ). C'est la condition de départ.

"ul" et "li" sont des balises bloc, alors que a est une balise inline. Donc, ta déclaration n'a aucun effet !

@+, HoPHP
En effet, le diplay:inline n' a aucun effet mais mettre le a sur li permet de récupérer les puces et l'espacement correct (par contre pb pour le rollover). C'est deja ca de pris !
Modifié par gilles6975 (21 Feb 2005 - 10:00)
Je ne comprends pas ce que tu veux dire par "mettre le a sur le li", désolé.

@+, HoPHP
Modifié par HoPHP (21 Feb 2005 - 10:04)
Je viens de comprendre le problème ! (enfin je crois cette fois ci)
En fait ce qui te gene c'est que si tu mets diplay: block il y a des marges supplémentaires sur ie.
En fait en spécifiant la taille de "ul a" cela semble diparaitre.

J'ai essayé avec cela 
ul a
{
   color: #000;
   background-color:#f90;
   display: block;
   width: 200px;
   height: 20px;
}


je sais pas si cela résoud ton problème ?

de toute façon si c'est pas ca je pars me cacher rouge de honte Smiley cavapa
Essaye de mettre des :
margin: 0;
padding: 0;

dans ul et li

laisse les display: block; pour A

Sous IE, il affecte un padding par défaut je crois.
Ce n'est pas un padding, parce que si je l'annule, il ne se passe rien.

J'ai tenté d'appliquer 
ul, li, a {
    border: 0;
    padding: 0;
    margin: 0;
}

mais l'espace demeure !
Par contre, mettre un
border: 1px solid red;

fait disparaître l'espacement !

Plutôt déroutant, non ?

@+, HoPHP
Modifié par HoPHP (21 Feb 2005 - 11:43)
ce qu'il faut faire pour déterminer l'origine du problème, met des bordures de couleurs différentes sur UL, LI et A et vois ce qui provoque le problème.
il semblerait que se soit un "bug" d'IE...

donc, ce que tu fait, tu fixes une largeur à la balise A.
Modifié par anthony (21 Feb 2005 - 12:00)
OK, OK, t'as raison !

En mettant un 
width: 100%;
ça fonctionne !

La question demeure: Pourquoi ?

@+, HoPHP
HoPHP a écrit :
La question demeure: Pourquoi ?

en fait, IE est vraiment buggués vu le nombre de critiques et dans ce cas présent, il a mal calculé la largeur maximale de la fenetre.
L'ajout d'un border à forcé IE à refaire un calcul.
1px de plus change toute la donne.
Sujet clos
Aller à