[Résolu] Pb CSS sous IE : longueur d'une div

Bonjour,

Voila deja 1an et demi que je m'inspire des forums d'Alsacreations et aujourd'hui j'ai besoin de vos conseils à tous.

J'ai un petit soucis avec des divs sous IE qui ne prennent pas la dimension souhaitée :

J'ai une div avec un bg qui englobe plusieurs autres bébés div (dont le nombre chanque en fonction du nombre d'éléments dans mon XML).
J'aimerai que la div prenne automatiquement la longueur adéquate nécessaire pour le nombre d'éléments.

Voici le schema (avec des noms explicites ^^):

<div name="maman" id="maman">
<div name="bebe" id="bebe1">bébé1</div>
<div name="bebe" id="bebe2">bébé2</div>
<div name="bebe" id="bebe3">bébé3</div>
</div>

Le nombre de div bébé est inconnu et variable, donc il m'est impossible d'imposer une largueur pour la div maman.

En réalité, c'est un script xsl qui génére le petit bout de code ci dessus en récupérrant les valeurs de chaque élément enfant... enfin voila ^^
Je travaille donc sur un fichier XSL.

Pensez vous qu'il est possible de corriger le problème?
en CSS ?
ou en calculant via le XSL la longueur de la div?
La formule serait : 13 + 90 * (le nombre d'éléments enfants) px
Mais je ne sais pas comment récupérer ce nombre...


J'espere vraiment que vous saurez m'aider

Pour vous aider à visualiser, voici schematiquement la structure.
En haut ce que je souhaite (et ce que j'obtient sous Firefox)
en bas ce que j'ai sous IE.



Merci d'avance.



J'ai oublié de spécifier qu'il y a une div similaire à sa droite.

Les deux div "maman" sont placées en Float left.

Si vous avez besoin de précision n'hésitez pas
Je reste connectée toute la journée ^^


Encore merci d'avance
Modifié par Puce (14 Aug 2007 - 10:59)

Salut.

Si les deux divs parents sont en float: left alors ils devraient pendre uniquement la taille dont ils ont besoin, non ?
Je pense qu'un bout de code pourrait nous aider à y voir plus clair.

C'est également ce que je pense.

Pour le bout de code, voici un morceau du html et du css:

<div name="bdd" id="bdd" class="category left overflow" style="width:50%">
	<div name="bdd_title" id="bdd_title" class="blue bold titre_cat">Bases de données</div>
	<div name="bdd_icons" class="overflow"  id="bdd_icons">
		<div name="bdd_common" id="bdd_common" style="width:200px" class="left common_list">
			<div class="suppl overflow">
				<div name="gestion" id="gestion" class="left common h_center">
					<img src="./images/icons/database.gif"/><br/>
					Gestion SQL
				</div>
				<div name="visu" id="visu" class="left common h_center">
					<img src="./images/icons/commander_sql.gif"/><br/>
					Visualisation
				</div>
			</div>
		</div>
		<div name="bdd_expert" id="bdd_expert" class="left expert_list" style="display: none;">
			<div class="suppl">
				<div name="phpma" id="phpma" class="left expert h_center">
					<img src="images/icons/php.gif"/><br/>
					PHPMyAdmin
				</div>
			</div>
		</div>
		<div name="affich_bdd_expert" id="affich_bdd_expert" class="affich_expert left" style="display: block;"/>
	</div>
</div>

.blue{color:#0068b1;}
.bold{font-weight:bold;}

.right {float:right;}
.left {float:left;}

.h_center{text-align:center;}
.h_centred{margin:0px auto;}

.h_left{text-align:left;}
.h_right{text-align:right;}

.overflow {overflow:auto;}

.titre_cat{
	margin:5px 0px;
	}

.common_list, div.common_list .suppl, .expert_list, div.expert_list .suppl {
	height:84px;
}

.common_list, .expert_list {
	margin:0px 3px 0px 0px;
	padding:1px 5px;
}

div.common_list .suppl, div.expert_list .suppl {
	margin: -1px -5px 0px 5px;
	padding: 1px 7px 0px 0px;
}


.common_list{
	background: url(./images/bg-common-icons.png) no-repeat left top;
}

	div.common_list .suppl{
		background: url(./images/bg-common-icons.png) no-repeat right top;
	}

.expert_list{
	background: url(./images/bg-expert-display-block.png) no-repeat left top;
	padding-left:20px;
}

	div.expert_list .suppl{
		background: url(./images/bg-expert-display-block.png) no-repeat right top;
	}

.common, .expert {
	width:86px;
	height:74px;
	background: url(./images/bg-icons.png) no-repeat left top;
	margin:3px 2px;
	padding:7px 0px 0px 0px;
}

.affich_expert{
	background: url(./images/bg-expert-display-none.png) no-repeat left top;
	width:20px;
	height:84px;
}

Voila donc tout ce qui concerne la zone de mon pb...

J'ai tout mis pour qu'il ne manque rien.

en fait sous IE, mes divs prennent par hérédité la largueur d'une de leur ancètre alors que sur mozilla ce n'est pas le cas.

sauriez vous comment éviter celà pour que les divs prennent automatiquement et uniquement la place dont elles ont besoin ?
(là mon background est 3 fois trop long ^^)

merci d'avance

Puce a écrit :
Voila donc tout ce qui concerne la zone de mon pb...

J'ai tout mis pour qu'il ne manque rien.

Ça ne ressemble pas vraiment à tes schémas. À vrai dire, ça ne ressemble pas à grand chose.
Pas de couleurs de fond, pas de bordure, aucun moyen d'identifier visuellement les différents éléments, et un gros bug de rendu dans Firefox (à cause d'un overflow:auto parasite, semble-t-il...). Pas évident de s'y retrouver.

Salut Puce,

Je ne vois pas trop où est le problème, moi non plus... Comme le dit CNeo un peu plus haut, si les divs sont en float left et sans largeur spécifiée, ils doivent prendre automatiquement la taille de leur contenu... Ils n'héritent pas de la taille d'un div ancêtre je pense. Qu'on soit sous FF ou sous IE.
Le problème est sûrement ailleurs dans le code, enfin je crois...

Dzana

J'ai isolé le problème dans un mini html spécifique pour traiter le problème.

Le voici :

<html>
<head>
	<link rel="stylesheet" type="text/css" href="./ma-feuille-de-style.css"/>
</head>
<body>
	<div name="categories_list" id="categories_list">
		<div>
			<div name="bdd" id="bdd" class="category left " style="width:50%;">
				<div name="bdd_title" id="bdd_title" class="blue bold titre_cat">Bases de donnees</div>
				<div name="bdd_icons" id="bdd_icons" class="">
					<div name="bdd_common" id="bdd_common" class="left common_list">
						<div class="suppl overflow">
							<div name="gestion_sql" id="gestion_sql" class="left common h_center">
								<img src="./images/icons/database.gif" class="icon"/><br/>
								Gestion SQL
							</div>
							<div name="visu" id="visu" class="left common h_center">
								<img src="./images/icons/visualisation.gif" class="icon"/><br/>
								Visualisation
							</div>
						</div>
					</div>
					<div name="bdd_expert" id="bdd_expert" class="left expert_list" style="display: block;">
						<div class="suppl overflow">
							<div name="phpma" id="phpma" class="left expert h_center">
								<img src="images/icons/php.gif" class="icon"/><br/>
								PHPMyAdmin
							</div>
						</div>
					</div>
					<div name="affich_bdd_expert" id="affich_bdd_expert" class="affich_expert left" style="display: block;"/>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Pour ce qui est du CSS, si vous visualisez difficilement cela doit surement être à cause du fait que j'utilise des images en background.

La div mère correspond à la div
<div name="bdd_common" id="bdd_common" class="left common_list">

puis à la div

<div name="bdd_expert" id="bdd_expert" class="left expert_list" style="display: block;">

Les divs filles sont toutes les divs de classe "common" et "expert".

Il y a une div de class "suppl" car celle ci m'est utile pour faire un cadre arrondi sur ma div mère à l'aide d'une image.

J'espère avoir pu vous éclairer un peu...

Eh oui moi aussi je suis d'avis qu'elles devraient se comporter comme vous le décrivez et comme je le souhaite d'ailleurs, mais vous pourrez tester avec ce petit html et le css que j'ai founi au dessus (remplacez les images des backgrounds par une couleur ca ne change rien à priori) : le resultat est parfait sous firefox mais sous IE
mouep ^^

Voici des screenshots (floutés ) de ce que je visualise.

Sous Firefox :


Sous IE :


Merci

Vous savez quoi ?

C'est bon problème résolu

Il faut en fait rajouter un "display:inline" au div qui posent problème pour qu'elles adaptent leur longueur sinon elle prenne par default 100% sur IE

Pas m'contente d'avoir enfin le remède

Merci d'avoir réfléchi au problème.

Bonne journée.