[Résolu] Superposition de 2 blocs sous IE

Bonjour,

Je suis en train d'intégrer un mini site, possédant une colonne à gauche et un contenu à droite. Dans ma maquette, le contenu a droite possède une ombre débordant par dessus le menu de gauche. Sous FF, opéra et safari, pas de soucis, j'ai réussi à faire se chevaucher les éléments en les "floatant".

Par contre, impossible de les faire se chevaucher sous IE, que ce soit le 6 ou le 7 (cf screenshot). L'élément de droite se décale systématiquement sous l'élément de gauche. Pourtant, le bloc de droit est en float right. Je me suis renseigné sur le HSLayout, etc... mais rien à y faire, impossible de les faire se chevaucher sans que le bloc de droite reparte en bas
J'ai une css spécifique à ces navigateurs.

/* Bloc gauche*/

#gauche {
	width:194px;
}


/* Bloc droit */

#droite{
	float:right;
	width: 758px;
	padding:0;
	margin:0;
}

Y a t-il une propriété css que je ne connaitrais pas et qui m'échappe ???

Ahhh le positionnement sous IE...

Merci d'avance pour vos réponses

Romain

Bonjour,

Avec ce que tu donnes, ça va être difficile de t'aider efficacement.

Peux-tu coller un peu plus de code ou fournir <meilleur solution>une page en ligne</meilleur solution> ?

Sinon ! Deux idées :

1°) Appliquer un margin-left à la colonne de gauche OU un margin-right à la colonne de droite, et cela seulement pour IE via les commentaires conditionnels. Si problème de superposition il y a, z-index et positionnement relatif tu utiliseras.

2°) Il faudrait voir la tête des contenus dans ces deux colonnes, mais... on est des fous on inverse : colonne de gauche flottante et colonne de droite dans le flux + margin-left. Attention dans ce cas tu devras sans doute inverser l'ordre de tes colonnes dans le code XHTML (élément flottant toujours en premier).

A noter que si la hauteur de la colonne de droite est toujours supérieure à la hauteur de la colonne de gauche on pourrait utiliser du positionnement absolu pour la colonne de gauche...

Je précise quand même, pour te rassurer, que ce problème n'est pas normal.
Ça aurait été seulement sur IE6, rien d'inquiétant (on aurait pu penser au bug 3px Jog ou à celui du double-margin, entre autres). Mais IE7 aussi... à mon avis c'est la faute au haslayout (tes principaux conteneurs ont des largeurs définies ? ton doctype est correct ? ...).

A bientôt.

EDIT : Pas sûr que ma solution 1°) fonctionne, ça risque de faire "sauter" la mise en page plutôt qu'autre chose. Dans le même esprit il faudrait plutôt utiliser du positionnement relatif pour "décaler" les colonnes. Par exemple :

#gauche {
[...]
position:relative;
left:...px;

Modifié par BeliG (06 Mar 2009 - 12:49)

Merci bien pour tes pistes, je vais essayer de creuser ça ce week end !

Merci d'avance !

[Edit] : Soucis résolu ! En fait, en mettant mon bloc de gauche en float left associé a une position absolute, les deux blocs se superposent juste comme il faut !

Merci beaucoup !!!
Modifié par roml (09 Mar 2009 - 10:32)

roml a écrit :
[Edit] : Soucis résolu ! En fait, en mettant mon bloc de gauche en float left associé a une position absolute, les deux blocs se superposent juste comme il faut !

Attends attends, un positionnement absolu + un flottant pour la colonne de gauche ?!

Peux-tu redonner l'adresse du site, on va en discuter.