[résolu] Largeur sous IE | width:auto contre positionnement absolu

Hello,

je fais appelle à vous pour un problème dont je suis incapable de résoudre. J'ai un menu a plusieurs niveaux ou chaque li contient une image et un div. J'ai choisi de positionner l'image de manière absolue plutot que d'utiliser le flottement. Ce choix n'influence pas mon problème. Les div garde une largeur automatique pusqu'ils sont allignés sur la droite et doivent occuper tout l'espace de l'élément parent. Malheureusement sous IE6 comme IE7, les div ne se positionnent pas par dessus les images en position absolue mais après... Si j'attribue une taille aux div tout va bien mais c'est pas ce que je recherche.

rendu recherché:
http://img215.imageshack.us/img215/8631/psffvm5.png

rendu IE:
http://img254.imageshack.us/img254/2016/psiefs3.png

HTML:

<ul id="testTree" classs="drag-drop-tree">
	<li class="drag-drop-tree-node">
		<img class="drag-drop-tree-node-handle" src="portal/images/tree/movearrow.gif"/>
		<div id="pageCategory_3" class="mainDiv">Layout pages test</div>
		<ul class="mainUl">
			<li id="node3" class="drag-drop-tree-node">
				<img class="drag-drop-tree-node-handle" src="portal/images/tree/movearrow.gif"/>
				<div id="pageMenuItem_3" class="selected">Page One</div>
			</li>
			<li id="node4" class="drag-drop-tree-node">
				<img class="drag-drop-tree-node-handle" src="portal/images/tree/movearrow.gif"/>
				<div id="pageMenuItem_4">Page Two</div>
			</li>
		</ul>
	</li>
</ul>

CSS:

.drag-drop-tree li {
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: relative;
	vertical-align:middle;
}

.drag-drop-tree ul {
	padding: 0;
	margin: 0;
	padding-left: 20px;
	position: relative;
}

.drag-drop-tree ul.mainUl {
	margin: 0 0 15px; 0
}

.drag-drop-tree-node-handle {
	cursor: pointer;
	position: absolute;
	left: 5px;
	top: 3px;
 }

.drag-drop-tree li div {
	margin: 0 0 0 20px;
	padding: 3px 0 3px 5px;
	position: relative;
	right: 0;
	cursor: pointer;
	width: auto;
}
 
.drag-drop-tree li div.mainDiv {
	font-weight: bold;
	margin: 0 20px 5px 20px;
	padding: 0 0 5px 0;
	border-bottom: 2px solid #B5B5B5;
}


.drag-drop-tree li div.selected { 
	background-color: white;
	border-top: 1px solid #b5b5b5;
	border-left: 1px solid #b5b5b5;
	border-bottom: 1px solid #b5b5b5;
}

j'ai entendu parler de largeur anarchique d'éléments sous IE lorsque le parent direct est flottant ou positionner en absolu et qu'il n'a pas de taille déclarée mais je n'ai pas trouvé de solution puisque je ne peut pas attribuer de taille a l'élément parent (ca dépend ou se trouve le div dans la menu, comme je fais du drag and drop j ai pas envie de tout calculer a chaque fois)

need help quoi.. merci
Modifié par MrHankey (25 Apr 2008 - 08:40)

Bonjour MrHankey,

Au risque de dire une bétise (ce ne sera pas la dernière... ), ne s'agit-il pas dans ce cas d'un remplacement de la puce des list item ?
Si tel est le cas, pourquoi ne pas définir cette puce via l'attribut list-style-image, ou en background de tes list item ?
Quelques précisions ici : http://openweb.eu.org/articles/puces_images/

A priori, je dirai que cela ne devrait pas géner le "Drag&Drop" mais je peux me tromper...

Si je n'ai rien compris à ta problèmatique, mille excuses

Cdt,
Sylvain

je n'avais pas pensé à ca c'est vrai, mais il me faut un element HTML pour y appliquer un evènement javascript pour le drag&drop

personne a une idée?

en plus j'emploie prototype et script.aculo.us pour le drag & drop, je viens de découvrir que quand j'en fait, le problème disparait au drop... pourtant script.aculo.us ne fait qu'utiliser les fonctions absolutize et relativize de prototype en gros mon li passe en mode absolute pendant le drag&drop et revient en position relative après et la mon li déplacé prend un layout correct... je comprend rien

Bonjour MrHankey,

Est-il possible de voir une page de test, j'ai du mal à visualiser ce que tu tente de faire avec tes listes ?

Juste le minimum, avec du faux texte au besoin si le contenu est confidentiel

ok bon j'ai fait un page de demo en concervant la partie javascript que tu puisses tester et peut etre comprendre ce qui m'échappe... le script modifie le dom donc vaut mieux le visulise avec firebug

le lien:
http://www.speedyshare.com/714181440.html

Arggg...ça m'ennerve !!!
Je ne parviens à rien au niveau des css, et je ne suis pas assez doué au niveau des scripts

Etrange : une fois que tu as effectué un déplacement, l'image se place comme tu le souhaites (IE6 et IE7)
Un spécialiste es css/javascript traine-t-il dans la salle ?

Sorry pour la non aide

Cdt,
Sylvain
Modifié par 6l20 (24 Apr 2008 - 23:42)

koala64 a écrit :
Salut,
Il faut mettre un zoom:1; sur ton .drag-drop-tree li.

Nia nia nia et puis arrêtes avec ce sourire !!!

Je n'y aurai jamais pensé, je ne sais pas pourquoi, je pensais que c'était "réservé" à IE6 et ces histoires de haslayout....la route est longue

Well done...