[resolu]Créer un layout sur IE

Bopnjour, j'ai un peu de mal avec une solution des tuto d'alsa:

je veux que la taille d'une balise ul prenne en compte la taille des balises li qu'elle contient alors qu'ils sont en float:

la solution "Alsa" pour IE6 et antérieur est:

...
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="dossier/ie.css" media="screen" />
<![endif]-->
<title>Document sans nom</title>
<style type="text/css">
<!--

ul {
list-style-type: none;
 margin:0px;  width:auto;overflow:auto;
}

et avec dans la page de style ie:

ul {
	overflow: visible;
	height: 1%;
	
	}

dans mon cas ça ne marche pas je ne comprends pas pourquoi la balise ul est toute écrasée : height 1%

voir image:


Je ne comprend pas pourquoi ça ne marche pas et où j'aurais pu faire une erreur
rendu FF




Rendu IE:

Modifié par simon250 (03 Mar 2007 - 17:16)

Je crois pas que c'est une histoire de layout ici mais plutôt une histoire de flux.

Sauf erreur, pour qu'un conteneur prenne la taille de son contenu flottant, il doit être lui-même flottant.

Dans ton cas, il faut mettre ton <ul> en float et, au besoin, l'entourer d'un <div> pas flottant.

C'est en tout cas la méthode que j'utilise.

Bonjour,

Si ton height est callé à 1%, ben il sera à 1% logique non ?
Essaye sans definir de height et overflow: hidden; par contre si tu as un souci avec ie précise width: 100%.

Bon courage

<nicolas> a écrit :
Sauf erreur, pour qu'un conteneur prenne la taille de son contenu flottant, il doit être lui-même flottant.

Bon ben si, erreur.
Par exemple, un conteneur viendra englober les flottants s'il définit un contexte de formatage, ce que l'on obtient avec un overflow: auto ou un overflow: hidden.
Qu'est-ce qu'un contexte de formatage ?

Ça fonctionnera avec tous les navigateurs récents, dont IE7, mais pas avec IE6. D'où la nécessité d'utiliser le HasLayout pour obtenir ce même effet (pour plus d'informations, voire en bas de cette page).

Mais attention à l'ordre dans lequel on donne les propriétés. Si les propriétés pour IE6 sont placées avant la feuille de style générique, elles peuvent être écrasées par celles de la feuille de style générique. En l'occurence :
- le height: 1% sera pris en compte ;
- le overflow: visible ne sera pas pris en compte, écrasé par le overflow: auto qui suit.

Solution simple : toujours déclarer les correctifs pour IE à la fin.

<nicolas> a écrit :
Dans ton cas, il faut mettre ton <ul> en float et, au besoin, l'entourer d'un <div> pas flottant.
C'est en tout cas la méthode que j'utilise.

Tu vas pouvoir apprendre une méthode plus rationnelle, alors.

ghost a écrit :
Si ton height est callé à 1%, ben il sera à 1% logique non ?

Pas forcément. Il ne sera callé à 1% que si le parent direct du bloc en height: 100% a une hauteur définie ne dépendant pas de son contenu.

ghost a écrit :
Essaye sans definir de height et overflow: hidden; par contre si tu as un souci avec ie précise width: 100%.

Le width: 100% peut être une alternative intéressante au couple height: 1%; overflow: visible;, effectivement.

Plus généralement, toute propriété/valeur conférant le layout au bloc en question fera l'affaire... mais chacun peut avoir ses effets indésirables.

Merci pour la méthode plus rationnelle

merci pour tant de réponses:
je ne peux pas mettre de with:100% car j'utilise des padding et que le width 100% changerait la taille de mon ul en fonction du navigateur IE/FF.
Modifié par simon250 (03 Mar 2007 - 17:13)

ok bingo la réponse était là:

Florent V a écrit :


Pas forcément. Il ne sera callé à 1% que si le parent direct du bloc en height: 100% a une hauteur définie ne dépendant pas de son contenu.

Le parent directe de mon ul avait un height:115px....

voila c'est résolu merci à tous.
Modifié par simon250 (03 Mar 2007 - 17:15)