[CSS] Affichage dans different navigateur

Version imprimable

21/04/2005, 16h46
Shakta

[CSS] Affichage dans different navigateur

Bonjour a tous,

Je desirais savoir comment forcer(c un grand mot) l'affchage de css pour que tous les navigateur surtout IE afffiche les css en entier.

Je m'explique j'ai fais un menu ou il y des borders. Opera est le seul navigateur qui m'affiche toutes mes bordure alors que IE et FireFox n'affiche que partiellement mais bordure.

Vous devez vous douter que c embrassant vu que Opera est le navigatuer le moins utiliser.

Si qqun aurais un debut de repose ou une ressource permettant de forcer les navigateurs a afficher l'exactitude de ma feuille css.

Merci d'avance .

Shakta
21/04/2005, 17h23
beeboo

Si tu pouvais nous donner ton code ça nous aiderait. Car, en général, si ça marche pas, c'est que le code a une couille quelque part.

Bon vu que mon menu est enorma voici un bout

partie html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="Menu"><!--Menu-->
	<a id="m" href="#" onMouseover="DisplayMenu(1,0)">MENU1</a>
</div>
 
<div id="1"><!-- MENU_1 -->
	<a href="#" onMouseover="DisplayMenu(1,11)" >SousMenu1</a><br>
	<a href="#" onMouseover="DisplayMenu(1,12)" >SousMenu2</a><br>
	<a href="#" onMouseover="DisplayMenu(1,13)" >SousMenu3</a><br>
</div>
	<div id="11"><!-- SousMenu1 -->
		<a href="#" onclick="" >Lien1</a><br>
		<a href="#" onclick="" >Lien2</a><br>
		<a href="#" onclick="" >Lien3</a>
	</div>
 
	<div id="12"><!-- SousMenu2 -->
		<a href="#" onclick="" >Lien1</a><br>
		<a href="#" onclick="" >Lien2</a><br>
	</div>
	<div id="13"><!-- SousMenu3 -->
		<a href="#" onclick="" >Lien1</a><br>
		<a href="#" onclick="" >Lien2</a><br>
		<a href="#" onclick="" >Lien3</a>
	</div>

Partie Css

Code:

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
body{
	font-family : Arial;
	font-size : 12px;
	color : #000000;
}
A:link
{
    text-decoration: none;
	font-family: Arial;
	font-size: 12px;
	color: #003399;
}
 
A:visited
{
    text-decoration: none;
	font-family: Arial;
	font-size: 12px;
	color: #003399;
}
 
A:active
{
    text-decoration: none;
	font-family: Arial;
	font-size: 12px;
	color: #003399;
}
 
 
.Menu
{
	font-family: Arial;
	font-size: 12px;
	position: absolute;
	left : 0px;
	top : 65px;/*	width : 700;
	height : 20;
	clear : both;
	z-index: 2;
	overflow: visible;*/
 
}
 
.ongletActif {
	margin: 0px 2px 2px 2px; /* marges intérieures */
	padding: 2px 5px 5px 5px; /* marges extérieures */
	background-color: #E9EDF7; /* le fond de l'onglet actif est blanc*/
	border-bottom: 3px solid #5E86C3;
	vertical-align: middle;
 
}
.ongletPassif {
	margin: 0px 2px 2px 0px; /* marges intérieures */
	padding: 2px 5px 5px 5px; /* marges extérieures */
	background-color: #F5F6FA; /* le fond de l'onglet actif est blanc*/
}
.AffNot
{
	visibility: hidden;
}
 
.C1 
{	position: absolute;
	left: 0px;
	top: 90px; /*float :none;*/
	visibility: visible;
 
	background-color: #E9EDF7;
	padding: 1px 5px 2px 5px;	
	border-bottom: solid 1 #5E86C3;
	border-left: solid 1 #5E86C3;
	border-right: solid 3 #5E86C3;
	border-top: solid 1 #5E86C3;
}
 
.C2 
{
	left: 60px;
	top: 90px; /*float :none;*/
	position: absolute;
	background-color: #E9EDF7;
	padding: 1px 5px 2px 5px;	
	border-bottom: solid 1 #5E86C3;
	border-left: solid 1 #5E86C3;
	border-right: solid 3 #5E86C3;
	border-top: solid 1 #5E86C3;
	visibility: visible;
}
 
.C11, .C12, .C13 
{
	left: 80px;
	top: 90px; /*float :none;*/
	visibility: visible;	
	position: absolute;
	background-color: #E9EDF7;
	padding: 1px 5px 2px 5px;	
	border-bottom: solid 1 #5E86C3;
	border-left: solid 1 #5E86C3;
	border-right: solid 3 #5E86C3;
	border-top: solid 1 #5E86C3;
	visibility: visible;
}

Je crois que cela vient des mon css mais j'avoue ne pas etre un pro .
j'ai tester sur trois navigateur seul Opera donne le bon resultat.

J'esperes que c assez clair , si vous avez beoin du javascript dite le.

Merci d'avance car moi je block 8O

21/04/2005, 22h27
beeboo

A première vue je ne vois pas de caca dans l'html ni dans le css, peut-être cela vient-il du code javascript et de l'utilisation des objets DOM. Les navigateurs ne réagissent pas toujours de la même façon. Montre un peu le code de DisplayMenu et des évetuelles fonctions associées, peut-être qu'on trouvera qqchose dedans.

Tiens ,
si tu trouves bravo, et je suis preneur . Moi j'ai cherché pendant trops longtemps, je suis sur une autre piste.

Code:

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
function DisplayMenu(Id, Id_ED)
{
	var tabMenu = new Array("m");
	var tabED = new Array("11","12","13");
	var actif = 0;
 
	if(DisplayMenu.arguments[0] == 0)
	{
 
	for(i=0; i<tabMenu.length; i++)
   	{
   	   actif = i+1;
 
   	 document.getElementById(tabMenu[i]).className = "OngletPassif";
   	 document.getElementById(actif).className = "AffNot";
 
   	}
 
   	for(j=0; j<tabED.length; j++)
   	{
   		document.getElementById(tabED[j]).className = "AffNot";
   	}
	}
	else
	{
	 	for(i=0; i<tabMenu.length; i++)
   	{
   		actif = i+1;
   		if(actif == Id)
   		{	
   			document.getElementById(tabMenu[i]).className = "OngletActif";
   			document.getElementById(actif).className = "C"+actif;
   		}
   		else
   		{	
   			document.getElementById(tabMenu[i]).className = "OngletPassif";
   			document.getElementById(actif).className = "AffNot";
   		}
   	}
 
    if(parseInt(DisplayMenu.arguments[1]) == 0)
    {
 
    	for(k=0; k<tabED.length; k++)
   		{
   			document.getElementById(tabED[k]).className = "AffNot";
   		}
    }         
    else(DisplayMenu.arguments[1] != 0)
    { 
    	var CLASS = "init";
     	for(j=0; j<tabED.length; j++)
   		{
   			if(parseInt(tabED[j]) == parseInt(DisplayMenu.arguments[1]))
   			{	
   				CLASS =  "C"+tabED[j];
   				document.getElementById(tabED[j]).className = CLASS;  }
   			else
   			{	document.getElementById(tabED[j]).className = "AffNot";  }
   		}
    }
  }  
 
}

le problème vient du css ie et ffx n'interprètent pas les border si tu ne spécifies pas de dimensions, bref
Code:

1 2 3 4 border-bottom: solid 1px #5E86C3; border-left: solid 1px #5E86C3; border-right: solid 3px #5E86C3; border-top: solid 1px #5E86C3;

22/04/2005, 11h12
Shakta

Merci Pluch666

Comme quoi se sont toujours les petit detail qui sont jamais visible