28172 sujets

CSS et mise en forme, CSS3

[Résolu] IE6 ne voit pas left+right comme une définition de largeur

Bonjour,

Migrer un design défini en quirk mode vers le mode standard est une expérience pleine d'embuches et une nouvelle se pose (s'impose) à moi.

Pourquoi IE6 ne calcule-t il pas une largeur relativement à un parent dont la largeur est défini par left et right ?

Un code valant un long discourt:
<!doctype html> 
<html lang="fr"> 
<head> 
    <meta charset="utf-8"> 
    <title>Largeur defini par left et right inaplicable au fils pour IE6</title> 
    <style> 
		div.main { 
			width: 200px; 
			position: absolute;
			border: 2px solid red; 
		} 
		div#parent { 
			position: absolute;
			background: orange;
			left:0;
			right:50px;
		} 
		div#contenu { 
			width: 100%;
			background: gray;
		} 
    </style> 
</head> 
<body> 
 
<div class="main"> 
	<div id="parent"> div de parent
		<div id="contenu">div fille, width 100% -- 123 456 789</div>
	</div>
</div> 
</body> 
</html>

Et voici les résultats obtenu. Il est entendu que le mouton noir est IE6.
upload/11935-pbLeftRigh.PNG

La question à 1000 points est donc faire rentrer IE6 dans le rang sachant que l'espace à droite doit être conservé pour une autre div de largeur fixe, mais que je ne peux mettre en float:right car arrive plus tard dans l'HTML?
Modifié par LeeRoy (26 Aug 2009 - 18:59)
Réponse: IE6 ne comprend pas l'utilisation simultanée de left et right pour un élément positionné en absolu, ou l'utilisation simultanée de top et bottom. Pas de solution directe, il faut contourner.

Le code que tu présentes est, je suppose, un test simplifié? Est-ce que tu as une largeur fixe en pixels pour div.main, ou bien? Si largeur fixe, eh bien tu peux utiliser une largeur fixe pour div#parent également. Et pas de largeur sur div#contenu à priori (dans l'exemple que tu donnes, cette déclaration est inutile).
Autrement... il faut voir les contraintes exactes.
Mon cas réel est des plus classique puisque #parent est le contenu de la page à droit duquel vient une colonne de menu.
Le menu venant après dans l'HTML, il ne me semble pas con d'utiliser des positionnements absolus, mais #main a width:100% de la page, donc la largeur de #parent n'est pas fixe.

Étant donné qu'IE6 gère mal le left et right en absolu en mode strict (alors qu'il le fait en quirks, le comble) je vais aller relire les tuto de présentation en colonne pour voir comment régler mon problème sans tout casser.

Merci d'avoir une fois de plus éclairé ma lanterne.
Finalement, pour réellement régler mon problème je vais encore avoir besoin de conseils.

Comme je l'ai déjà précisé, j'ai une présentation en deux colonnes (sans problématique de pied de page) et je ne souhaite pas mettre celle de droite (de largeur fixe) en float pour qu'elle reste à la fin de mon HTML.

OR, je ne trouve pas la façon de faire, ni dans ma tête, ni sur le net.
Bon alors, faisons simple:
#conteneur {
  width: auto; /* Valeur par défaut, toute la largeur du viewport */
  position: relative;
}
#gauche {
  width: auto; /* Par défaut aussi. Je l'indique juste pour faire genre. */
  margin-right: 200px;
}
#droite {
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
}

Voilà. La structure est: un conteneur, deux enfants (dans l'ordre donné dans le CSS).

Éventuellement pour IE 6 et 7 il faudra s'assurer que le conteneur a bien le layout (cf. notion de HasLayout), sinon le placement exact de l'enfant positionné en absolu peut déconner un peu.
Simplier is better
Je l'avais oublié.

Je n'avais même pas pensé à mettre en absolue un seul des deux éléments.

Merci,
encore.
Sujet clos
Aller à