[Résolu] Position absolute interprétée bizarrement dans Firefox

Bonjour,

1er point :
J'essaie de positionner dans une zone centrale, 2 colonnes qui permettent à partir de pages asp de remplir la colonne de gauche avec une image avec un commentaire et la colonne de droite avec d'autres informations complémentaires. Evidemment, les 2 colonnes devraient commencer au même niveau, ce que j'ai réussi avec IE et Opera mais qui donne un résultat décalé avec Firefox.
Je pense que c'est le statut :

position:absolute;

de ma colonne de gauche qui pose problème puisque sous Firefox, j'ai la sentation qu'il le transforme en fixed. Et donc les images sont bloquées à l'écran, alors que sous IE elles défilent.

Si ce n'est pas clair, voici la page en question :http://www.magix.fr/new/tours-salon-scene/tours-salon-scene-tours1.asp

Code HTML :

<div id='fondcentrehaut'></div>
<div id='fondcentre'><div class='colonneimage'>
<p class='pvierge'><a class='imggauche' href='../img/salon/fichierlong.htm' target='_blank'><img src='../small/ako-005.gif'/></a></p>
<p class='txtgauche'>Ceci est un texte</p></div>
<div class='colonneinfos'><h1>James Bond présente</h1>
<h2><a class='fondrouge' href='../img/salon/fichierlong.htm' target='_blank'>BOITE TIROIR (salon)</a></h2>
<h3>Ceci est un sous titre</h3>
<p class='parag1'>Cette très joli boîte vous résoudra tous vos problèmes d'apparitions et disparitions diverses. Ouvrez la boîte : elle est vide. Fermez-la. Ouvrez-la à nouveau : elle est pleine.</p>
<p class='parag2'>2e résumé</p>
<p class='tech'>Diamètre : 4,6 cm - Epaisseur seulement 1,6 mm - Faces dorées - Tranche crantée pour une meilleure préhension.</p>
<p class='ref'>Ref : AKO-001 - Prix : 90 &euro; - <a class='btbas' href='page?choixtype=151'> Ajouter au panier</a> - <a class='btbas' href='../img/salon/fichierlong.htm' target='_blank'> + d'infos</a> - <a class='btbas' href='../video/video1.mov'> Vid&eacute;o</a></p>
</div>
</div>
<div id='fondcentrebas'></div>

Code CSS :

#centre .colonneimage {
	position: absolute;
	width: 140px;
	padding-left: -150px;
}

#centre .colonneinfos {
	margin-left: 150px;
}

Nota : Pour IE j'utilise la propriété margin-left pour obtenir le même résultat.

2e point :
Toujours sur la même page et toujours avec Firefox (même pb avec Opera), les 2 images de fond (qui apparaissent sous IE) ne s'affichent pas !

Code HTML

<div id="gauche"> 
    <h2>Recherche</h2>
    <ul id="menugauche">
      <li class="liniv1"><a href="#">CARTOMAGIE</a></li>
      <li class="liniv1"><a href="#">CLOSE-UP</a></li>
      <li class="liniv1"><a href="#">SALON/SC&Egrave;NES</a></li>
      <li class="liniv2"><a href="#">Grandes illusions</a></li>
      <li class="liniv1"><a href="#">ACCESSOIRES</a></li>
      <li class="liniv1"><a href="#">TOURS DIVERS</a></li>
      <li class="liniv1"><a href="#">LIVRES</a></li>
      <li class="liniv1"><a href="#">DVD FR</a></li>
      <li class="liniv1"><a href="#">DVD US</a></li>
      <li class="liniv1"></li>
    </ul>
      </div>
            <div id="droite">
       <h2>Panier</h2>
     <ul id="menudroite">
      <!-- #BeginLibraryItem "/Library/menudroit.lbi" -->		  <li class="liniv1d"><a href="#">NEWSLETTER</a> </li><li class="liniv1d"><a href="#">CATALOGUE PAPIER</a> </li><li class="liniv1d"><a href="#">NOUVEAUTES</a> </li><li class="liniv1d"><a href="#">MAGIX CLUB</a></li><li class="liniv1d"><a href="#">MAGIX-OKAZ</a></li><li class="liniv1d"><a href="#">D&Eacute;MONSTRATION</a></li><li class="liniv1d"><a href="#">COMMANDER</a></li><li class="liniv1d"><a href="#">QUI SOMMES-NOUS ?</a></li><li class="liniv1d"><a href="#">COMMANDE ETRANGER</a></li><!-- #EndLibraryItem --> 
    </ul>
      </div>

Code CSS :

#gauche {
	float: left;
	width: 150px;
	height: 610px;
	overflow: none;
	background-image:  url(../z_img/menu_gauche_rouge.jpg);
	background-attachment: fixed;
	background-position: top;
	background-repeat: no-repeat;
	padding-left: 1px;
}

#droite {
	float:right;
	width: 150px;
	height: 610px;
	overflow: none;
	padding-left: 1px;
	background-image:  url(../z_img/menu_droite_rouge.jpg);
	background-attachment: fixed;
	background-position: top;
	background-repeat: no-repeat;
}

Merci de toute aide.
Modifié par Blue James (27 Jul 2006 - 10:54)

Bonjour,
Pour ton premier problème, en appliquant une position:relative à l'élément parent de ta vignette, ton position:absolute fonctionnera mieux.

#fondcentre {
position:relative;
…
}

Problème en passant, une id est unique, remplace les par une class quand ton selecteur apparait plusieurs fois (exemple #fondcentre {} devient .fondcentre{})


Voire la FAQ -> Différence entre une id et une classe
Modifié par zzzazzz (26 Jul 2006 - 10:24)

Pour le problème n°2, je pense que cela vient de ca :

#gauche {
	float: left;
	width: 150px;
	height: 610px;
	overflow: none;
	background-image:  url(../z_img/menu_gauche_rouge.jpg);
	background-attachment: fixed;
	background-position: top; <----------------------- ici
	background-repeat: no-repeat;
	padding-left: 1px;
}

Explication, "background-position:" sans rien d'autre que top, sous-entend que la deuxieme valeur est center. Donc pour palier à cela je mettrai :

background-position:left top;

Dans cet ordre là ca j'ai vu des bugs apparaitre sur Firefox, me semble-t'il, si on inverse (à confirmer).
Modifié par zzzazzz (26 Jul 2006 - 10:33)

Merci.

Pour le point 1, je ne suis pas sur de comprendre le pourquoi de mettre l'élement parent en position relative mais en tous cas ça marche !!

Pour le point 2, c'était bien ça, sauf que Firefox et IE n'interpretent pas les postions left et top de la même manière... Va falloir que je positionne en position réelle, je pense.

Je vais aussi remplacer les div qui se répetent en class, c'est bien plus logique, effectivement.

Merci encore.