problème de positionnement de calques css et IE 6Résolu

Question

Bonjour à vous, je viens vous voir encore une fois pour avoir vos conseils éclairés. En effet, comme l'énonce le titre, j'ai un soucis de positionnement de mes div sous IE6. Même si la version 7 est sortie, la version 6 et selon les statistiques, beaucoup utilisée (25%). Je vous donne l'url du site en question : [www.location-a-cauterets.com www.location-a-cauterets.com] Sous firefox et IE 7 y a aucun problème de positionnement. Cette question est je crois assez récurrente, mais trop souvent restée sans réponses. J'ai fait pas mal de recherche sans succès. J'ai trois calques à replacer en fait, tous contenant du flash. voir le screen : http://www.location-a-cauterets.com/IE6.JPG Ce que je voudrais c'est qu'au moins le site soit affiché correctement sous IE 6. JUste ça serait déjà grandiose. Je sais que c'est pas une mince affaire ça, mais si quelqu'un peut m'aider, ce serait cool. Et puis au cas où, le code de la page index : Location à Cauterets d'un appartement à moins de 400€, tarifs très compétitifs, description, www.location-a-cauterets.com, location à la montagne, location 65110 Location d'appartement à Cauterets de Type 3 pour une à cinq personnes entre 300€ et 400€ par semaine, très proche des télécabines et de la cure thermale, emplacement

[Or/index.php ] Visites

[Pages/Accueil.html ]

Location d'appartement à Cauterets de Type 3 pour une à cinq personnes à partir de 300€ la semaine. Voilà je vous remerci, et comme d'habitude, une ou plusieurs personnes me permettront d'avancer avec leurs conseils. Cordialement, et merci d'avance.

PetoleTeam · Accepted Answer

petite coquille

PetoleTeam · Answer

Bonjour, 
vite fait en regardant ton code... 

 
devrait plutôt être 
= "contenu">

Beaucoup trop de 
positions sont données en pourcentage, risque de mauvais positionnement lié à 
l'interprétation du flux dans le document. 

Un code allégé aurait été 
préférable pour une analyse...

Mets dans le style de tes div une border : 1px solid couleur  pour mieux te rendre compte de leurs positions dans le document

;O)

cs_Justkill · Answer

Merci de t'y intéresser Petoleteam. Si tu trouves qu'il y a trop de données en pourcentage c'est voulu et tout à fait normal. Je veux que mon site soit adaptable à l'écran de l'utilisateur, des div en taille fixene conviendraient donc pas. Je crois que le problème provient de mes conteneurs. La position relative n'est pas connu sous IE 6 si j'ai bien compris . Alors voilà mes questions. - Y a t'il un code javascript qui force IE 6 à faire des div avec une position relative? - Peut-on faire un codage "conditionnel" pour IE 6?? du style codage..... <--Endif > . Même si ce codage devra comporter des tailles fixes pour mes calques, et non des pourcentage. - Et vous comment faites vous pour gérer votre site sous IE6?? J'essaie que ce site soit visible par le maximum de personnes. Pour infos IE 6 et encore utilisé par 25% des internautes. Donc ce n'est pas négligeable. Cordialement.

cs_Justkill · Answer

Personne n'a une idée?? Je galère de trop!!!

PetoleTeam · Answer

Bonjour, tout d'abord je tiens à préciser que je n'ai plus IE 6 depuis peu, donc je ne peut pas tester... ----, La position relative n'est pas connu sous IE 6 si j'ai bien compris

par défaut la position des DIVs est relative et ce quelque soit le navigateur IE 6 compris. ----, Peut-on faire un codage \"conditionnel\" pour IE 6??

Oui en utilisant par exemple un commentaire conditionnel pour insérer une feuille de style ----, Et vous comment faites vous pour gérer votre site sous IE6??

Un respect au mieux des régles CSS garanti, dans bien des cas, une homogénéïté d'affichage sous les différents navigateurs... Commence peut être avec des dimensions fixes puis bascule petit à petit avec des pourcentages... Un petit lien pour plein d'info à lire... C'est en forgeant que l'on devient vachement fatigué... ;O)

cs_Justkill · Answer

OK merci à toi, c'est super cool!! Je vais tester le codage conditionnel, je voulais pas passer pas ça mais bon... Ce que je comprends pas c'est qu'il y a trois divs (menu, images et text avec effet) qui ne veulent pas se caller. Dans ces calques il n'y a que des fichiers flash. Les pourcentages ne sont pas compris sous IE6?

Donc je vais faire un codage conditionnel et je vais voir ce que ça donne. Je te tiens au jus, et s'il y a des pb je peux compter sur tes conseils??

Merci encore!!!

cs_Justkill · Answer

Bonsoir à vous, je vais répondre à ma propre question et même au-delà. Car j'espère (de tout coeur) que s'il y a une personne un jour dans cette situation, qu'elle puisse y remédier. Le problème d'IE6 et vraiment lourd et récurant. 

Je vais tenter de répondre à ces différentes questions :
- Comment ajuster et positionner les div sous IE6.
- Comment résoudre le problème des png non pris en compte sans un hack javascript.
- Fixer le fond car la propriété background-position: fixed; n'est pas reconnue.

 >Comment ajuster et positionner les div sous IE6.

Tout d'abord IE7 et Firefox 3 sont sortis, le problème ne se pose plus pour ceux-là.

J'ai donc un index.php général qui défini mes containers et le contenant. Mais pour IE 6, j'ai était obligé de créer une condition (je crois qu'on appel ça un hack javascript)

Donc ma page index.php de départ :

 
 
 
 
 
 Location d'appartement à Cauterets de Type 3 pour une à cinq personnes à partir de 300€ la semaine, très proche des télécabines et de la cure thermale 
 
 
 
 
 
 

 


AC_FL_RunContent = 0; 



  
 
 

 

 

  
    
    
     
  

 

  
    
    
     
  

Visites

  
    
    
    
    
  

 
 function setsize(h) { document.getElementById('contenu').style.height=h+'px'; }  
 

    

 

[Pages/Accueil.html ]
 
 
 
 


 

 
 
 
 
if (AC_FL_RunContent == 0) { 
alert("Cette page nécessite le fichier AC_RunActiveContent.js."); 
} else { 
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0','width','100%','height','100%','id','images','align','middle','src','images','quality','high','wmode','transparent','name','images','allowscriptaccess','sameDomain','allowfullscreen','false','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','images' ); //end AC code 
} 
 
 


 
 
 

 

 

 

Location d'appartement à Cauterets de Type 3 pour une à cinq personnes à partir de 300€ la semaine. 
 

 
 

 

 

 


Comme on peut le voir en rouge, le if lt IE7 permet de définir que "s'il y a une version antérieure à IE7 alors je lis ma feuille de style"

Dans la feuille de style en dessous (IE6.css) j'ai défini des critères que IE6 reconnait.
-Notamment un rajout de "div" devant chaque conteneurs pour que cela fonctionne.
-Et pour ma part, ( je sais pas si c'est pour tout le monde), si toutes mes valeurs sont en pourcentage, ça déconne de nouveau. Donc obligé de fixé une hauteur (ou une largeur) en valeur fixe.

 Voilà ce que donne ma feuille de style IE6.css avec mes contenants: 

html {
margin:0;
padding:0;
}

body {
background-color : white; 
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif; 
}

div#Menu {
    position:absolute;
    left:10px;
    top:45%;
    width:96%;
    height:150px;
    z-index:2;
    
}

div#contenu {
    position:absolute;
    margin-left:10px;
    top:60%;
    width:96%;
    height:95%;
    z-index:3;
font-family:Arial color:#000099; 
} 

div#Text {
    position:absolute;
    left:15%;
    top:0px;
    width:22%;
    height:50px;
    z-index:4;
} 
div#Images {
    position:absolute;
    left:10px;
    top:55px;
    width:60%;
    height:300px;
    z-index:5;
} 
div#Pub {
    position:absolute;
    left:48%;
    top:12%;
    width:40%;
    height:70px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    z-index:6;
} 
div#Or {
    position:absolute;
    left:66%;
    top:22%;
    width:21%;
    height:150px;
    z-index:7;
}
div#Compteur {
    position:absolute;
    left:80%;
    top:0%;
    width:15%;
    height:30px;
    z-index:8;
}

.Style4 { 
font-size: 14px; 
text-align:center; 
margin:2px 0px; 
padding:0px; 
font-weight: bold; 
color: #000000; 
} 
.Style7 {
    font-size: 13px;
    color: #0000FF;
    font-style: italic;
    font-weight: bold;
}

Et voilà un problème de résolu.

 Comment résoudre le problème des png non pris en compte sans un hack javascript. 

Et bien tout simplement avec le flash, une image JPG étant inscrutée dans le flash. 
On met ça en wmode  ="transparent" et c'est bon. On contourne le problème. Certe ça peut-être un peu plus lourd mais ça fonctionne.

>Fixer l'image de fond : la propriété background-position: fixed; n'est pas reconnue.

Et bien j'ai trouvé sur le net un petit hack javascript qui permet de faire celà. Le petit hic, c'est que l'image saute un peu lorsque que la page défile. Pour cause, ce hack permet de calculer les distances entre le haut et le bas, la gauche et la droite, et ajuste le background en conséquence.

Voilà le code de mon fichier fixed.js :

// fixed.js: fix fixed positioning and fixed backgrounds in IE/Win
// version 1.8, 08-Aug-2003
// written by Andrew Clover , use freely

/*@cc_on
@if (@_win32 && @_jscript_version>4)

var fixed_positions= new Array();
var fixed_backgrounds= new Array();
var fixed_viewport;

// Initialisation. Called when the  tag arrives. Set up viewport so the
// rest of the script knows we're going, and add a measurer div, used to detect
// font size changes and measure image sizes for backgrounds later   

function fixed_init() {
  fixed_viewport= (document.compatMode=='CSS1Compat') ?
    document.documentElement : document.body;
  var el= document.createElement('div');
  el.setAttribute('id', 'fixed-measure');
  el.style.position= 'absolute';
  el.style.top= '0'; el.style.left= '0';
  el.style.overflow= 'hidden'; el.style.visibility= 'hidden';
  el.style.fontSize= 'xx-large'; el.style.height= '5em';
  el.style.setExpression('width', 'fixed_measureFont()');
  document.body.insertBefore(el, document.body.firstChild);
}

// Binding. Called every time an element is added to the document, check it
// for fixed features, if found add to our lists and set initial props   

function fixed_bind(el) {
  var needLayout= false;
  var tag= el.tagName.toLowerCase();
  var st= el.style;
  var cst= el.currentStyle;
  var anc;

  // find fixed-position elements
  if (cst.position=='fixed') {
    needLayout= true;
    fixed_positions[fixed_positions.length]= el;
    // store original positioning as we'll overwrite it
    st.position= 'absolute';
    st.fixedPLeft=   cst.left;
    st.fixedPTop=    cst.top;
    st.fixedPRight=  cst.right;
    st.fixedPBottom= cst.bottom;
    st.fixedPWidth=  fixed_parseLength(cst.width);
    st.fixedPHeight= fixed_parseLength(cst.height);
    // find element that will act as containing box, for convenience later
    st.fixedCB= null;
    for (anc= el; (anc= anc.parentElement).parentElement;) {
      if (anc.currentStyle.position!='static') {
        st.fixedCB= anc;
        break;
    } }
    // detect nested fixed positioning (only ancestor need move)
    st.fixedNest= false;
    for (anc= el; anc= anc.parentElement;) {
      if (anc.style.fixedNest!=null)
        st.fixedNest= true;
        break;
    }
  }

  // find fixed-background elements (not body/html which IE already gets right)
  if (cst.backgroundAttachment=='fixed' && tag!='body' && tag!='html') {
    needLayout= true;
    fixed_backgrounds[fixed_backgrounds.length]= el;
    // get background offset, converting from keyword if necessary
    st.fixedBLeft= fixed_parseLength(cst.backgroundPositionX);
    st.fixedBTop=  fixed_parseLength(cst.backgroundPositionY);
    // if it's a non-zero %age, need to know size of image for layout
    if (st.fixedBLeft[1]=='%' || st.fixedBTop[1]=='%') {
      st.fixedBWidth= 0; st.fixedBHeight= 0;
      fixed_measureBack(el);
    }
  }
  if (needLayout) fixed_layout();
}

// Layout. On every window or font size change, recalculate positioning   

// Request re-layout at next free moment
var fixed_delaying= false;
function fixed_delayout() {
  if (fixed_delaying) return;
  fixed_delaying= true;
  window.setTimeout(fixed_layout, 0);
}

var fixed_ARBITRARY= 200;

function fixed_layout() {
  fixed_delaying= false;
  if (!fixed_viewport) return;
  var i, el, st, j, pr, tmp, A= 'auto';
  var cb, cbLeft, cbTop, cbRight, cbBottom, oLeft, oTop, oRight, oBottom;
  var vpWidth=fixed_viewport.clientWidth, vpHeight=fixed_viewport.clientHeight;

  // calculate initial position for fixed-position elements [black magic]
  for (i= fixed_positions.length; i-->0;) {
    el= fixed_positions[i]; st= el.style;
    // find positioning of containing block
    cb= st.fixedCB; if (!cb) cb= fixed_viewport;
    cbLeft= fixed_pageLeft(cb); cbTop= fixed_pageTop(cb);
    if (cb!=fixed_viewport) { cbLeft+= cb.clientLeft; cbTop+= cb.clientTop; }
    cbRight= fixed_viewport.clientWidth-cbLeft-cb.clientWidth;
    cbBottom= fixed_viewport.clientHeight-cbTop-cb.clientHeight;
    // if size is in %, must recalculate relative to viewport
    if (st.fixedPWidth[1]=='%')
      st.width= Math.round(vpWidth*st.fixedPWidth[0]/100)+'px';
    if (st.fixedPHeight[1]=='%')
      st.height= Math.round(vpHeight*st.fixedPHeight[0]/100)+'px';
    // find out offset values at max size, to account for margins
    st.left= A; st.right= '0'; st.top= A; st.bottom= '0';
    oRight= el.offsetLeft+el.offsetWidth; oBottom= el.offsetTop+el.offsetHeight;
    st.left= '0'; st.right= A; st.top= '0'; st.bottom= A;
    oLeft= el.offsetLeft; oTop= el.offsetTop;
    // use this to convert all edges to pixels
    st.left= A; st.right= st.fixedPRight;
    st.top= A; st.bottom= st.fixedPBottom;
    oRight-= el.offsetLeft+el.offsetWidth;
    oBottom-= el.offsetTop+el.offsetHeight;
    st.left= st.fixedPLeft; st.top= st.fixedPTop;
    oLeft= el.offsetLeft-oLeft; oTop= el.offsetTop-oTop;
    // edge positioning fix
    if (st.fixedPWidth[1]==A && st.fixedPLeft!=A && st.fixedPRight!=A) {
      tmp= el.offsetLeft; st.left= A; st.width= fixed_ARBITRARY+'px';
      tmp= fixed_ARBITRARY+el.offsetLeft-tmp+cbLeft+cbRight;
      st.left= st.fixedPLeft; st.width= ((tmp0;) {
    st= fixed_positions[i].style;
    viewportX= (st.fixedNest) ? 0 : scrollX;
    viewportY= (st.fixedNest) ? 0 : scrollY;
    if (st.fixedCLeft!='auto') st.left= (st.fixedCLeft+viewportX)+'px';
    if (st.fixedCTop!='auto') st.top= (st.fixedCTop+viewportY)+'px';
    viewportX= (st.fixedCB==null || st.fixedCB==fixed_viewport) ? 0 : viewportX;
    viewportY= (st.fixedCB==null || st.fixedCB==fixed_viewport) ? 0 : viewportY;
    st.right= (st.fixedCRight-viewportX+1)+'px'; st.right= (st.fixedCRight-viewportX)+'px';
    st.bottom= (st.fixedCBottom-viewportY+1)+'px'; st.bottom= (st.fixedCBottom-viewportY)+'px';
  }

  // align fixed backgrounds to viewport
  for (i= fixed_backgrounds.length; i-->0;) {
    el= fixed_backgrounds[i]; st= el.style;
    viewportX= scrollX;
    viewportY= scrollY;
    while (el.offsetParent) {
      viewportX-= el.offsetLeft+el.clientLeft;
      viewportY-= el.offsetTop +el.clientTop;
      el= el.offsetParent;
    }
    st.backgroundPositionX= (st.fixedBX+viewportX)+'px';
    st.backgroundPositionY= (st.fixedBY+viewportY)+'px';
  }

  // call back again in a tic
  if (!fixed_patching) {
    fixed_patching= true;
    window.setTimeout(fixed_patch, fixed_PATCHDELAY);
  }
}

// Measurement. Load bg-image into an invisible element on the page, when
// loaded write the width/height to an element's style for layout use; detect
// when font size changes

function fixed_measureBack(el) {
  var measure= document.getElementById('fixed-measure');
  var img= document.createElement('img');
  img.setAttribute('src', fixed_parseURL(el.currentStyle.backgroundImage));
  measure.appendChild(img);
  el.style.fixedBImage= img;
  if (img.readyState=='uninitialized')
    img.attachEvent('onreadystatechange', fixed_measureBackImage_ready);
}

function fixed_measureBackImage_ready() {
  var img= event.srcElement;
  if (img && img.readyState!='uninitialized') {
    img.detachEvent('onreadystatechange', fixed_measureBackImage_ready);
    fixed_layout();
  }
}

var fixed_fontsize= 0;
function fixed_measureFont() {
  var fs= document.getElementById('fixed-measure').offsetHeight;
  if (fixed_fontsize!=fs && fixed_fontsize!=0)
    fixed_delayout();
  fixed_fontsize= fs;
  return '5em';
}

// Utility. General-purpose functions

// parse url() to get value inside

function fixed_parseURL(v) {
  v= v.substring(4, v.length-1);
  if (v.charAt(0)=='"' && v.charAt(v.length-1)=='"' ||
      v.charAt(0)=="'" && v.charAt(v.length-1)=="'")
    return v.substring(1, v.length-1);
  else return v;
}

// parse length or auto or background-position keyword into number and unit

var fixed_numberChars= '+-0123456789.';
var fixed_ZERO= new Array(0, 'px');
var fixed_50PC= new Array(50, '%');
var fixed_100PC= new Array(100, '%');
var fixed_AUTO= new Array(0, 'auto');

function fixed_parseLength(v) {
  var num, i;
  if (v=='left'  || v=='top')    return fixed_ZERO;
  if (v=='right' || v=='bottom') return fixed_100PC;
  if (v=='center') return fixed_50PC;
  if (v=='auto')   return fixed_AUTO;
  i= 0;
  while (i

PetoleTeam · Answer

Bonjour, 
C'est toi qu'il faut remercier car peu de 
gens prennent le temps de poster la réponse de façon aussi compléte... 
;O)

Problème de positionnement de calques css et IE 6

8 réponses

Votre réponse

Discussions similaires