[résolu] Position Fixed et IE7

Bonjour à tous,

J'ai un div "conteneur" divisé verticalement par deux div. A gauche le div_contenu, à droite le div_lightbox comprenant 4 listes "ul".

Le premier "li" de chaque liste sert de lien pour ouvrir une galerie s'y rapportant. Le reste de la liste étant en position "display:none". Donc invisible.

A mon div_lightbox j'ai mis un positionnement "fixed". Ce qui le positionne à l'opposé de sa place prévue soit dans le coin supérieur gauche du conteneur, superposé au div_contenu.
Ce qui tout à fait normal sauf pour IE7. Celui-ci positionne mon div_lightbox contre le bord droit du div_contenu.

Mon problème est que lorsque je mets une marge gauche de 785px pour remettre mon div_lightbox à sa place initiale (à droite du div_contenu), IE7 repousse mon div_lightbox à droite, en-dehors de l'écran.

Certainement une problème ridicule à l'image de mes connaissances.
Une idée ?

Voici mon css:

#div_contenu{
	margin: 0;
	margin-top: 30px;
	padding: 0;
	display: table;
	width: auto;
	color: #ffffff;
	clear: both;
	}
#texte_contenu{
	margin: 0;
	padding: 0;
	width: 75%;
	float: left;
	background-color: #000000;
	line-height: 1.4em;
	}
-------------------------------------
#div_lightbox{
	padding: 0;
		display: ;
	height: 170px;
		float: ;
		position: fixed;
		margin-left: 785px;
	}
.menu_lightbox{
	margin: 0 0 15px 0;
	padding: 0;
	width: 170px;
	list-style: none;
	background-color: #000000;
	border: 1px solid #666666;
	}
#vignette_1, #vignette_2, #vignette_3, #vignette_4{
	color:#fff;
	margin: 0;
	padding: 0;
	width: auto;
	list-style-position: inside;
	list-style: none;
	}
#vignette_1:hover,  #vignette_2:hover, #vignette_3:hover, #vignette_4:hover{
	background-color: #333333;
	}
#vignette_1{
	background-image: url(../img/vignettes/vignette_01.gif);
	background-repeat: no-repeat;
	}
#vignette_2{
	background-image: url(../img/vignettes/vignette_02.gif);
	background-repeat: no-repeat;
	}
#vignette_3{
	background-image: url(../img/vignettes/vignette_03.gif);
	background-repeat: no-repeat;
	}
#vignette_4{
	background-image: url(../img/vignettes/vignette_04.gif);
	background-repeat: no-repeat;
	}
#vignette_1 a, #vignette_2 a, #vignette_3 a, #vignette_4 a{
	text-align: center;
	padding-left: 30px;
	line-height: 40px;
	display: block;
	color: #636363;
	text-decoration: none;
	}
#vignette_1 a:hover, #vignette_2 a:hover, #vignette_3 a:hover, #vignette_4 a:hover{
	color: #FFFFFF;
	text-decoration: underline;
	}
.liste_cachee{
	display: none;
	}

-----------------------------------------------------------------------

Voici mon HTML

  <div id="div_lightbox">
      <div class="menu_lightbox">
        <ul id="vignette_1">
            <li><a href="img/1.jpg" rel="lightbox[Téâtre-Opéra]" title="Images Téâtre-Opéra">Théâtre-Opéra</a></li>
            <li class="liste_cachee"><a href="img/1.jpg" rel="lightbox[Téâtre-Opéra]" title="Images Théâtre-Opéra">image #1</a></li>
          <li class="liste_cachee"><a href="img/2.jpg" rel="lightbox[Téâtre-Opéra]" title="Images Théâtre-Opéra">image #2</a></li>
          <li class="liste_cachee"><a href="img/3.jpg" rel="lightbox[Téâtre-Opéra]" title="Images Théâtre-Opéra">image #3</a></li>
          <li class="liste_cachee"><a href="img/4.jpg" rel="lightbox[Téâtre-Opéra]" title="Images Théâtre-Opéra">image #4</a></li>
          <li class="liste_cachee"><a href="img/5.jpg" rel="lightbox[Téâtre-Opéra]" title="Images Théâtre-Opéra">image #5</a></li>
        </ul>
      </div>
        
      <div class="menu_lightbox">
        <ul id="vignette_2">
            <li><a href="img/1.jpg" rel="lightbox[Ciné-TV-Pub]" title="Images Ciné-TV-Pub">Ciné-TV-Pub</a></li>
            <li class="liste_cachee"><a href="img/1.jpg" rel="lightbox[Ciné-TV-Pub]" title="Images Ciné-TV-Pub">image #1</a></li>
          <li class="liste_cachee"><a href="img/2.jpg" rel="lightbox[Ciné-TV-Pub]" title="Images Ciné-TV-Pub">image #2</a></li>
          <li class="liste_cachee"><a href="img/3.jpg" rel="lightbox[Ciné-TV-Pub]" title="Images Ciné-TV-Pub">image #3</a></li>
          <li class="liste_cachee"><a href="img/4.jpg" rel="lightbox[Ciné-TV-Pub]" title="Images Ciné-TV-Pub">image #4</a></li>
          <li class="liste_cachee"><a href="img/5.jpg" rel="lightbox[Ciné-TV-Pub]" title="Images Ciné-TV-Pub">image #5</a></li>
        </ul>
      </div>
        
      <div class="menu_lightbox">
        <ul id="vignette_3">
            <li><a href="img/1.jpg" rel="lightbox[Photo]" title="Maquillage pour Photo">Photo</a></li>
            <li class="liste_cachee"><a href="img/1.jpg" rel="lightbox[Photo]" title="Images Photo">image #1</a></li>
          <li class="liste_cachee"><a href="img/2.jpg" rel="lightbox[Photo]" title="Images Photo">image #2</a></li>
          <li class="liste_cachee"><a href="img/3.jpg" rel="lightbox[Photo]" title="Images Photo">image #3</a></li>
          <li class="liste_cachee"><a href="img/4.jpg" rel="lightbox[Photo]" title="Images Photo">image #4</a></li>
          <li class="liste_cachee"><a href="img/5.jpg" rel="lightbox[Photo]" title="Images Photo">image #5</a></li>
        </ul>
      </div>
        
      <div class="menu_lightbox">
        <ul id="vignette_4">
            <li><a href="img/1.jpg" rel="lightbox[Défilés]" title="Maquillage pour Défilés">Défilés</a></li>
            <li class="liste_cachee"><a href="img/1.jpg" rel="lightbox[Défilés]" title="Images Défilés">image #1</a></li>
          <li class="liste_cachee"><a href="img/2.jpg" rel="lightbox[Défilés]" title="Images Défilés">image #2</a></li>
          <li class="liste_cachee"><a href="img/3.jpg" rel="lightbox[Défilés]" title="Images Défilés">image #3</a></li>
          <li class="liste_cachee"><a href="img/4.jpg" rel="lightbox[Défilés]" title="Images Défilés">image #4</a></li>
          <li class="liste_cachee"><a href="img/5.jpg" rel="lightbox[Défilés]" title="Images Défilés">image #5</a></li>
        </ul>
      </div>
  </div>

Merci à tous.
DonVtt
Modifié par donvtt (08 Nov 2010 - 10:05)

Bonjour,
dans l'utilisation de fixed, il n'y a pas de déclaration pour left et top, c'est ce qui doit poser problème à ie7
(enlever au passage les déclarations display et float vides... on ne sait jamais )

Bonjour lacsap,

Merci pour ta réponse.

a écrit :
dans l'utilisation de fixed, il n'y a pas de déclaration pour left et top

Ta réponse à deux sens pour moi: Je ne peux pas mettre de left/top avec "fixed" ou je n'ai pas mis de left/top ?

Attention je n'utilise pas un left mais margin-left. Je cherche à me positionner quant au conteneur et non au bord du navigateur.

Cela dit même sans margin-left (juste avec "position: fixed") IE7 s'obstine à positionner mon div_lightbox par rapport au div_contenu (voisin) et non au conteneur (parent) comme il devrait.

Le menu LightBox était avec un float et table. Je les ai garder pour me souvenir du code au cas où je dois revenir en arrière. Sinon ils disparaitront.

Tout fonctionne impeccablement sous :FF3.6/ Opéra10/ Chrome et Safari4. Pourquoi pas IE7 ?


Je précise que la page est ok XHtml 1.0 strict (excepté le DTD).

Une autre piste ?
DonVtt

pardon pour la réponse tardive...
avec fixed il me semble bien qu'il FAUT définir top et left pour ie7 pour que cela fonctionne correctement
pour positionner par rapport à un conteneur, je pense qu'il faut voir du côté du positionnement relatif
Pour moi fixed c'est pour positionner par rapport à la fenêtre... je suis même étonné que cela fonctionne sur les autres... cela vient peut-être du positionnement "table" que je n'utilise pas...

Je te conseille d'essayer avec absolute et relative...

Je ne peux malheureusement pas t'aider plus que cela !

Bonjour lacsap et les autres,

Me revoici enfin, mais avec la solution.

La position fixed requiert un positionnement avec left et top. Une fois un left ajouté même IE7 rentre dans les rangs et positionne mon bloc comme les 4 autres navigateurs précités.

Cependant, comme ma page est centré au beau milieu de l'écran, si je réduit la page, mon bloc reste planté à droite (à cause du left) et sort du bloc conteneur alors que le reste du site se tasse sur la gauche.
Mon site se déforme et ce n'est absolument pas le but recherché.

La solution est donc de combiner un left de x px + un margin-left.
Le Left pour amener mon bloc environ au milieu de ma page et, avec margin-left, achever le positionnement pour amener mon bloc plus à droite à l'endroit souhaiter et que mon site ne se déforme pas quand je réduit la page.

Voilà. C'était aussi bête. Mais je n'ai aucun mérite, la solution à été trouvée en postant sur un autre forum.

Pour admirer le résultat et voir le code voici le lien du site.

http://www.maquillarts.com/professionnel.html

Merci à tous pour votre aide. Je passerai plus tard pour clore le sujet.

DonVtt.