[Résolu][Internet explorer][Div width:auto]Taille égal au contenu

Bonjour,

J'aimerais faire une Div ayant la largeur la plus petite suivant son contenu.

Sous FF si j'ai "width:auto" pour le style de ma div, cela fonctionne correctement.
Sous IE la Div prend toute la largeur de la page, au lieu de prendre seulement la place nécessaire pour afficher ce qu'elle contient.

Y a t-il moyen d'avoir le même résultat sous IE que celui obtenu sous FF ?

Merci d'avance.
Modifié par YanK34 (02 Aug 2006 - 12:37)

Salut YanK,

« auto » est la valeur initiale ou par défaut de la propriété width. Si tu obtiens ce résultat avec Firefox ce n'est pas grâce à width:auto.

Un élément flottant ou positionné en absolu a par exemple un tel comportement (ainsi qu'une table). C'est le cas également avec Internet Explorer sauf dans certaines circonstances ou la boîte va contenir un élément doté de layout (par exemple avec la propriété height). Voir à ce sujet : « Largeur anarchique d'un élément avec Internet Explorer lorsque le bloc parent est flottant ou en positionnement absolu ».

Il peut y avoir moyen d'éviter cela. Le mieux serait que tu nous montre déjà le code qui te permet d'obtenir ce que tu souhaites avec Firefox.
Modifié par Alan (10 Jul 2006 - 16:59)

Ah oui pardon de ne pas avoir mis le code.
Voici ce que j'ai pour ma div :

.Madiv{
  width:auto;
  cursor:pointer;
	float:left;
	color : gray;
	height:33px;
	background-image:url('/img/toto.jpg');
	margin:0px 8px 0px 0px;
	padding:0px 0px 0px 0px;
	font-weight : bold;
	font-family: Verdana;
	font-size: 15px;
}

Puis dans ma div j'ai du texte du genre : "Ajouter des fichiers"

Le but étant de faire un bouton perso et que la div prenne la taille la plus petite pouvant contenir le texte (ici "Ajouter des fichiers").

Voici en premier le résultat sous FF puis dessous celui sous IE :


Peut être n'ai je pas utilisé la meilleur solution pour faire cela.

Comme je l'ai dit plus haut, le problème se pose avec IE selon que les éléments contenus dans la boîte sont dotés ou non de layout. Et comme là tu ne donnes que le code du bloc conteneur et non celui des éléments qu'il contient, on ne risque donc pas d'aller loin.

La plus efficace est de donner un exemple en ligne. Ca fait toujours gagner beaucoup de temps.
Modifié par Alan (10 Jul 2006 - 17:36)

Désolé.
J'ai sorti le code que j'ai pour un bouton voici ce que ca donne : ICI
A tester sous IE et FF pour voir la différence.
Encore désolé de ne pas l'avoir fait plus tôt.

Dans ce cas là c'est bien l'utilisation de la propriété height qui pose problème en dotant les éléments de layout. Tu peux plutôt utiliser « line-height » (propriété qui ne confère pas le layout).

Je n’ose pas trop le dire, mais je n’ai pas compris ta réponse.

et pourtant, tu l'as dit !

la propriété height de .BoutonMDocFin lui confère un layout, provoquant la prise de toute la largeur sur IE.

Enlève le height de .BoutonMDocFin, remplace le par line-height ou même padding, et ton problème sera résolu.

Je crois que j'y suis arrivé merci.

- J'ai remplacé tous les height par line-height.
- J'ai du changer mon padding-top et ajouter un padding bottom.

Mais ca l'air de marcher.
Encore merci à tous.