compatibilité de code avec IE 6 alignement

**pierrot2908** · 15/06/2009, 13h38

Bonjour,
J'ai un pb d'alignement avec ie6. Mon code marche bien sous chrome et firefox mais sous ie j'observe un décalage de 5 px environs sur la gauche je ne comprend pas bien pourquoi.
voici mon code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
/* 
document.write('<div  align = "right"> <a class = "hyper" href="http://www.c2c.fr">Retour C2C.fr | </a> <a class = "hyper" href="https://www.c2c.fr/index.php?page=Admin.Logout">Déconnexion</a> </div>');
/* taille de l'écran*/ 
var width = document.body.offsetWidth;
var height = document.body.offsetHeight;
 
/* Définition des couleurs*/
 
bgcolor = new Array;
bgcolor[0] = '#0033CC'; 
bgcolor[1] = '#33CC33'; 
bgcolor[2] = '#990066'; 
bgcolor[3] = '#FF6600'; 
bgcolor[4] = '#FFA500'; 
bgcolor[5] = '#BC8F8F'; 
bgcolor[6] = '#00FF00'; 
bgcolor[7] = '#FFB6C1'; 
bgcolor[8] = '#D2691E'; 
bgcolor[9] = '#ADFF2F'; 
 
zgcolor = new Array;
zgcolor[0] = '#33CCFF'; 
zgcolor[1] = '#33FF33'; 
zgcolor[2] = '#CC6699'; 
zgcolor[3] = '#FFCC33'; 
zgcolor[4] = '#FFA500'; 
zgcolor[5] = '#BC8F8F'; 
zgcolor[6] = '#00FF00'; 
zgcolor[7] = '#FFB6C1'; 
zgcolor[8] = '#D2691E'; 
zgcolor[9] = '#ADFF2F'; 
 
 
//document.write('')
 
//document.write('#hypertext { text-decoration: none; color:#ffffff; }')
//document.write('#topgauche { position:absolute; z-index:10; }')
//document.write('A:hover.ejsmenu {color:#000000; text-decoration:none;}')
document.write('<DIV class=popper id=topdeck></DIV> ');
 
 
/* Les liens qui sont rangés dans un tableau double entrée*/
zlien = new Array;
zlien[0] = new Array;
zlien[1] = new Array;
zlien[2] = new Array;
zlien[3] = new Array;
zlien[4] = new Array;
zlien[5] = new Array;
zlien[6] = new Array;
 
 
var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
if (nava) { skn = document.topdeck }
else if (dom) { skn = document.getElementById("topdeck").style }
else if (iex) { skn = topdeck.style }
skn.top = 28 + 78; // represente le décalage de la cellule du haut plus le décalage du menu par rapport au haut de la page
alert("position en y : "+ skn.top); 
function pop(msg,pos,col)
{
	//alert("le sous menu vas être placé à : " + pos + "px!");
	skn.visibility = "hidden";
	a=true
	skn.left = pos;
	var content ='<TABLE  BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#FFFFFF WIDTH = 220>';
	pass = 0;
	while (pass < msg.length)
		{
			//permet la modif des couleurs des cellules
			content += "<TR><TD BGCOLOR="+bgcolor[col]+" onMouseOver=\"this.style.background='"+zgcolor[col]+"'\" onMouseOut=\"this.style.background='"+bgcolor[col]+"'\" HEIGHT=20><FONT SIZE=2 FACE=\"Arial\">  "+msg[pass]+"</FONT></TD></TR>";
			pass++;
 
		}
	content += "</TABLE>";
	if (nava)
		{
			skn.document.write(content);
			skn.document.close();
			skn.visibility = "visible";
		}
	else if (dom)
		{
			document.getElementById("topdeck").innerHTML = content;
			skn.visibility = "visible";
		}
	else if (iex)
		{
			document.all("topdeck").innerHTML = content;
			skn.visibility = "visible";
		}
}
 
function kill()
{
	skn.visibility = "hidden";
}
 
function placeSSMenu(width,decalage){
	var place = ((screen.width-800)/2) + decalage;
	//alert("le menu sera placé à " + place);
	return place; 
}
 
 
document.onclick = kill;
document.write('<div class = "loc" align = center>');
document.write('<TABLE  BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#FFFFFF WIDTH=800><TR><TD><TABLE CELLPADING=0 CELLSPACING=0 BORDER=0 WIDTH=800 HEIGHT=28><TR>')
document.write('<TD WIDTH=200 ALIGN=center BGCOLOR='+bgcolor[0]+' onMouseOver="this.style.background=\''+zgcolor[0]+'\';pop(zlien[0],'+placeSSMenu(width,0)+',0)" onMouseOut="this.style.background=\''+bgcolor[0]+'\'"><A style=" text-decoration:none ;  font-weight:bold ; color : black; " onClick="return(false)" onMouseOver="'+placeSSMenu(width,0)+',0)" href=# ><FONT SIZE=1 FACE="Verdana">PROSPECTS</FONT></a></TD>')
document.write('<TD WIDTH=200 ALIGN=center BGCOLOR='+bgcolor[1]+' onMouseOver="this.style.background=\''+zgcolor[1]+'\';pop(zlien[1],'+placeSSMenu(width,200)+',1)" onMouseOut="this.style.background=\''+bgcolor[1]+'\'"><A style="text-decoration:none ; font-weight:bold;  color : black;"onClick="return(false)" onMouseOver="'+placeSSMenu(width,200)+',1)" href=# ><FONT SIZE=1 FACE="Verdana">TEGS</FONT></a></TD>')
document.write('<TD WIDTH=200 ALIGN=center BGCOLOR='+bgcolor[2]+' onMouseOver="this.style.background=\''+zgcolor[2]+'\';pop(zlien[2],'+placeSSMenu(width,400)+',2)" onMouseOut="this.style.background=\''+bgcolor[2]+'\'"><A style="text-decoration:none ; font-weight:bold ; color : black;"onClick="return(false)"  onMouseOver="'+placeSSMenu(width,400)+',2)" href=# ><FONT SIZE=1 FACE="Verdana">OPC</FONT></a></TD>')
document.write('<TD WIDTH=200 ALIGN=center BGCOLOR='+bgcolor[3]+' onMouseOver="this.style.background=\''+zgcolor[3]+'\';pop(zlien[3],'+placeSSMenu(width,600)+',3)" onMouseOut="this.style.background=\''+bgcolor[3]+'\'"><A style="text-decoration:none ; font-weight:bold ; color : black;"onClick="return(false)" onMouseOver="'+placeSSMenu(width,600)+',3)" href=# ><FONT SIZE=1 FACE="Verdana">ADMINISTRATION</FONT></a></TD>')
document.write('</TR></TABLE></TD></TR></TABLE><div>')

si vous avez besoin du css je peux vous le passer aussi merci d'avance

**Lideln75** · 15/06/2009, 17h19

Sans voir la CSS, difficile... Et à gauche de quoi ?

Si jamais tu as un élément en float, il y a un bug connu sous IE, qui s'appelle "le bug des 3px".

C'est tout ce que je peux te dire pour le moment... Un truc : essaie de mettre des couleurs de fonds différentes (et bien visibles) à tes éléments pour le debug, c'est pratique.

(ne pas oublier que les tables c'est bon uniquement pour le listing, et encore...)

**pierrot2908** · 15/06/2009, 17h44

merci pour ta réponse.
En faite ici l'objectif est de faire un menu dynamique. j'ai mais case du menu générale qui sont positionnée correctement et je voudrais lorsque je passe la souris sur l'une de ces case avoir au dessous une table qui s'affiche avec le sous menu voila. Ss firefox tout s'aligne correctement mais sous IE pb. j'ai du mal à comprendre...

**E.Bzz** · 15/06/2009, 17h56

Bonjour,
comme déjà dit, sans le CSS, point de salut !

Même si quelqu'un a le temps de récupérer ton code pour reproduire le problème, il ne pourra pas le voir sans le CSS que tu lui associes.

L'idéal serait de nous donner un lien où l'on puisse constater le problème ...

Et enfin : ce script "date" un peu

Les tableaux ne devraient effectivement être utilisés que pour afficher ... des tableaux (de données)

A+

compatibilité de code avec IE 6 alignement

JavaScript

Discussions similaires

Partager

Partager