IE7 et top

Question

r4z

13 Aug 2007 à 11:17

Salut à tous, j'ai un petit problème depuis IE7 sur un site que je développe. En effet sur rollover une liste apparait, mais elle est mal positionnée sur IE7 (je précise que sur IE6 c'est ok, et firefox aussi). C'est la position Top qui est trop basse (environ une 50aine de pixels en trop :s).

Avez vous une idée?

Heyoan

13 Aug 2007 à 11:41

Salut r4z

,

As-tu un peu de code à montrer ? Smiley lol

r4z

13 Aug 2007 à 11:44

oui pas de problème, voici le CSS:

#calcCID {
	position:absolute;
	left:288px;
	top:19px;
	width:122px;
	height:37px;
	visibility:hidden;
	z-index:19;
}

Heyoan

13 Aug 2007 à 12:14

Par "un peu de code" je voulais "beaucoup de code" ! Smiley ravi

Parce que là c'est un peu dur ! Smiley murf

r4z

13 Aug 2007 à 12:20

alors le HTML qui correspond

<div id="calcCID" onMouseOver="affichMenu('carteId', 'calcCID', -1, -40);">
  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="1">
    <tr>
      <td align="left" valign="middle" class="tdMenuCIDhaut"><a href="carte_identite/bref.html" target="_self" class="lienMenu">En bref</a></td>
    </tr>
    <tr>
      <td align="left" valign="middle" class="tdMenuCID"><a href="carte_identite/historique.html" class="lienMenu">Evolution</a></td>
    </tr>
  </table>
</div>

et la fonction js (qui était déjà présente et que je n'aime pas trop):

function affichMenu(objetReference, calqueMenu, decalageX, decalageY, decalageOutX, decalageOutY)
{
	// Compatibilité Menu du bas
	if (!decalageOutX)
		decalageOutX = (-85);
	if (!decalageOutY)
		decalageOutY = (-160);
		
	// Gestion des arguments optionnels
	if (!decalageX)
		decalageX = 0;
	if (!decalageY)
		decalageY = 0;
	
	// Definition des objets calques
	var calqueMenuOut = calqueMenu + "Out";
	var pixel = " px";
	
	// Définition du Navigateur Client
	Navigateur = NavCheck();		
	// Netscape 4
	if(Navigateur.ns4)
	{
		//alert('NETSCAPE 4');
		var menu = window.document.layers[calqueMenu];
		var menuOut = window.document.layers[calqueMenuOut];
		var objet = window.document.layers[objetReference];
	}
	// Internet Explorer
	else if(Navigateur.ie)
	{
		//alert('IE');
		var menu = window.document.all[calqueMenu];
		var menuOut = window.document.all[calqueMenuOut];
		var objet = window.document.all[objetReference];
	}
	// W3C - Navigateur compatible DOM
	else if(Navigateur.dom)
	{
		//alert('DOM');
		var menu = window.document.getElementById(calqueMenu);
		var menuOut = window.document.getElementById(calqueMenuOut);
		var objet = window.document.getElementById(objetReference);
	}
	
	// Recupération des coordonnées
	var posX = findPosX(objet);
	var posY = findPosY(objet);
	
	// Gestion des décalage optionnels
	decalageX = (decalageX*1); // Force un type INTEGER
	decalageY = (decalageY*1); // Force un type INTEGER
	var newPosX = posX + (decalageX);
	var newPosY = posY + (decalageY);
	
	// Positionnement du menu réel
	var coordonneesX = newPosX + pixel;
	var coordonneesY = newPosY + pixel;
	menu.style.left = coordonneesX;
	menu.style.top = coordonneesY;
	
	// Positionnement du menu de détection de sortie
	posOut_X = newPosX + (decalageOutX);
	posOut_Y = newPosY + (decalageOutY);
	menuOut.style.left = posOut_X + pixel;
	menuOut.style.top = posOut_Y + pixel;
	
	// Affichage du claque
	menu.style.visibility = "visible";
	menuOut.style.visibility = "visible";
}

est ce mieux?

Heyoan

13 Aug 2007 à 12:40

Re'

à priori ton javascript modifie le positionnement en fonction du navigateur . Il faudrait voir la fonction NavCheck() mais, à tout hasard, est-ce que le script ne serait pas un peu trop "vieux" auquel cas IE7 n'aurait pas été prévu ? Smiley murf

Quoi qu'il en soit, les scripts qui se basent sur la détection du navigateur sont de toutes façons à éviter : que se passe-t-il si javascript est désactivé ou quand une nouvelle version d'un navigateur arrive sur le marché ? Smiley rolleyes

r4z

13 Aug 2007 à 12:52

oui jcomprend bien mais je ne vois pas comment remplacer ce truc...je ne suis vraiment pas fan des menus déroulants à l'origine, mais là je suis dans l'obligation de le laisser :s

ghost

13 Aug 2007 à 14:59

Bonjour,

Une petite page en ligne peut être?

r4z

13 Aug 2007 à 14:59

voici la fonction navcheck() (qui me répugne un peu, et qui tu avais raison ne prends pas ie7 en compte):

function NavCheck()
{ 
	this.ver=navigator.appVersion
	this.agent=navigator.userAgent
	this.dom=document.getElementById?1:0
	this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
	this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
	this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
	this.ie=this.ie4||this.ie5||this.ie6
	this.mac=this.agent.indexOf("Mac")>-1
	this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
	this.ns4=(document.layers && !this.dom)?1:0;
	this.NC=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
	return this
}

à tu une idée de la ligne à ajouter pour qu'il soit pris en compte?

Heyoan

13 Aug 2007 à 15:59

En fait, en jetant un oeil à la fonction affichMenu, il me semble bien que la fonction NavCheck ne sert à rien...

J'aurais essayé ça :

function affichMenu(objetReference, calqueMenu, decalageX, decalageY, decalageOutX, decalageOutY)
{
	// Compatibilité Menu du bas
	if (!decalageOutX)
		decalageOutX = (-85);
	if (!decalageOutY)
		decalageOutY = (-160);
	// Gestion des arguments optionnels
	if (!decalageX)
		decalageX = 0;
	if (!decalageY)
		decalageY = 0;
	// Definition des objets calques
	var calqueMenuOut = calqueMenu + "Out";
	var pixel = " px";
	
[b]
	// Recherche des Eléments
	if(document.getElementById)	{
		var menu = window.document.getElementById(calqueMenu);
		var menuOut = window.document.getElementById(calqueMenuOut);
		var objet = window.document.getElementById(objetReference);
	} else if (document.all) {
		var menu = window.document.all[calqueMenu];
		var menuOut = window.document.all[calqueMenuOut];
		var objet = window.document.all[objetReference];
	} else if (document.layers) {
		var menu = window.document.layers[calqueMenu];
		var menuOut = window.document.layers[calqueMenuOut];
		var objet = window.document.layers[objetReference];
	} else {
		alert("Impossible d'utiliser ce fichu script !!!");
	}[/b]
	
	// Recupération des coordonnées
	var posX = findPosX(objet);
	var posY = findPosY(objet);
	// Gestion des décalage optionnels
	decalageX = (decalageX*1); // Force un type INTEGER
	decalageY = (decalageY*1); // Force un type INTEGER
	var newPosX = posX + (decalageX);
	var newPosY = posY + (decalageY);
	// Positionnement du menu réel
	var coordonneesX = newPosX + pixel;
	var coordonneesY = newPosY + pixel;
	menu.style.left = coordonneesX;
	menu.style.top = coordonneesY;
	// Positionnement du menu de détection de sortie
	posOut_X = newPosX + (decalageOutX);
	posOut_Y = newPosY + (decalageOutY);
	menuOut.style.left = posOut_X + pixel;
	menuOut.style.top = posOut_Y + pixel;
	// Affichage du claque
	menu.style.visibility = "visible";
	menuOut.style.visibility = "visible";
}

A+

r4z

16 Aug 2007 à 14:07

Merci pour ton aide, mais ça n'a rien changé malheureusement Smiley decu

Modifié par r4z (16 Aug 2007 - 14:08)

Heyoan

16 Aug 2007 à 14:20

Et bien décidément il ne reste plus que la solution de la page en ligne Smiley cligne

!

r4z

16 Aug 2007 à 14:40

Heyoan a écrit :
Et bien décidément il ne reste plus que la solution de la page en ligne !

la version qui est en ligne fonctionne, car le menu déroulant nétait pas au même endroit. dans ma version je n'ai pas touché au code mais simplement changé les coordonnées de top et left (en absolute). Dans ff ça fonctionne et pas dans IE c'est bizarre quand même

r4z

21 Aug 2007 à 15:16

Re ! après les vacances on réfléchit toujours mieux, j'ai un peu mieux analysé ce code qui m'énerve et en fait cela venait d'un repositionnement qui sert à je ne sait quoi... mais bon, j'ai trouvé que ça venait de ça Smiley smile

:

// Positionnement du menu réel
	/*var coordonneesX = newPosX + pixel;
	var coordonneesY = newPosY + pixel;
	menu.style.left = coordonneesX;
	menu.style.top = coordonneesY;*/

merci en tout cas pour votre aide

Sujet clos

CSS et mise en forme, CSS3

IE7 et top