Résoudre un problème z-index et float sur IE6

Bonjour à tous, voici mon premier post et déjà un problème !

Je viens de terminer un site qui s'affiche sans problèmes sous IE7, Opéra, Firefox... Mais pas sur IE6 ! Je suis conscient que le problème vient de l'utilisation d'un float contenu dans une div superposée par z-index...Mais je n'ai trouvé de solution nulle part !

Vous voyez dans l'image ce qu'on obtient partout sauf dans IE6 : dans ce dernier, mon filigrane est au-dessus de mes vignettes (celles-ci sont évidemment en float)... Mes vignettes sont dans textover... Il y a dans textover d'autres éléments non placés en float qui eux apparaissent bien au-dessus du filigrane... Que faire ?

- une feuille de style alternative pour IE6 ?
- un hack ?
- changer de structure ?

<div id='conteneur'>
<div id='content'>
<div id='filigrane'></div>
<div id='textover'>
<div class='vignette'></div>
<div class='vignette'></div>
<div class='vignette'></div>
<div class='vignette'></div>
</div></div></div>

#conteneur
{
	width: 800px;
	height: 575px;
	position: relative;
	margin: 0 auto;
}

#content
{
width: 750px;
padding-top: 20px;
padding-bottom: 66px;
margin-left: 20px;
}


#textover
{
	z-index: 2;
	position: relative;
}

#filigrane
{
	background-image: url(filig.gif);
	background-repeat: no-repeat;
	width: 343px;
	height: 373px;
	position: absolute;
	bottom: 0px;
	right: 20px;
	z-index: 1;
}

.vignette
{
	float: left;
	margin-left: 30px;
	margin-bottom: 10px;
}

<modération>Merci d'éviter les images trop larges qui déforment le forum (utiliser "Générer un aperçu" en insérant l'image)</modération>
Modifié par webrunner (24 Feb 2007 - 12:01)

J'ai résolu mon problème de façon détournée, mais j'aimerais connaître la validité de ma méthode :

J'ai modifié

.vignette

{
	float: left;
	margin-left: 30px;
	margin-bottom: 10px;
}

en y ajoutant

z-index:3;
position: relative;

Là tout fonctionne ! Mon filigrane est bien en dessous de tout mes objets contenus dans textover...

Je mettrai ce post en [résolu] lorsqu'on m'aura confirmé que cette méthode est correcte... Merci d'avance !
Modifié par webrunner (24 Feb 2007 - 11:43)

Lol j'ai parlé un peu vite, cette méthode fonctionne dans ce cas précis, mais je l'ai testée avec d'autres éléments float de mon site et il y a de petits problèmes sur Firefox... J'ai donc utilisé ce très vilain hack :

_position: relative;
z-index:3;

à tous les endroits où IE6 me créait des problèmes au-dessus du filigrane... Cette méthode rend le css invalide, mais permet de contrer tous les problèmes IE6/IE5 car seul ceux-ci comprennent le _position: relative;

webrunner a écrit :
Que faire ?

- une feuille de style alternative pour IE6 ?
- un hack ?
- changer de structure ?

bonjour
Pourrais-tu donner l'url du site en question ?
Sinon, les hacks sont à éviter. Par contre tu peux faire une feuille de style contionnelle (et non alternative ) ... enfin changer de structure n'est pas la solution car celà est souvent le fait de IE6 plus que d'une mauvaise structure XHTML en soit (toutefois n'ayant pas vu tout ton code, il est impossible de dire si c'est le cas ici)

ouaips, j'ai beau avoir testé je ne vois pas vraiment le problème parce que j'ai un peu du mal à comprendre à dire,
comme le dit gunner sans avoir vu le site ... c'est difficile !
en tout cas, après différents tests je réussi à faire ce que je veux des différents éléments placés en absolute.
Les éléments float placés dans une div placée en absolute, prennent sa profondeur.Après ton filigrane placé lui aussi en absolute se promène dans la profondeur que tu auras décidée.
Après si tu veux gérer une vraie transparence il te faut servir de css prioritaire, ou pas encore officielle, du genre :
filter:alpha(opacity=50);
opacity: 0.5;// ---> IE
-moz-opacity:0.5; // ---> firefox
Mais bon, j'ai pas vraiment capté le problème.
Modifié par lefelinherbivore (25 Feb 2007 - 23:22)