Discussion :

[lolo.]

Bonjour tout le monde,

Présentation du problème :

J'ai réalisé l'interface pour un site web et je me suis donc mis au travail pour le coder.
J'ai pendant un moment buté sur le menu en javascript, mais à force de patience, j'ai réussi sous Internet Explorer et Mozilla à le mettre en place.

Par la suite j'ai déterminé un tableau pour le reste de m'a page. Et depuis m'a page de correspond absolument plus sous Mozilla et très bien sous Internet Explorer.

Lien de l'hébergement provisoire :
hébergement provisoire

Comme vous pouvez le remarquer, la mise en place sous Internet Explorer et Mozilla est totalement différente.

Mon problème est donc le suivant :

Comment arranger m'a feuille de style css pour obtenir sous Mozilla, le même résultat que celui présent dans le navigateur Internet Explorer?

Présentation du contenu Css :

Code css :

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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
/* body
--------------------------------------------------------------------*/
 
 
body {
	background:#3578b5 url(images/cote-gauche.png)  repeat-x;
	font-family:"times new roman","courrier new","lucida console";
	color:#ffffff;
	margin: auto;
	width: 1024px;
 
 
}
 
img 
{ 
    border:none;
}
 
 
 
 
 
 
#contenu
{
  margin-left: 5%;
}
 
 
 
 
 
 
 
 
#chmenu {
	margin-top: 0%;
	padding: 0%;
	height: 21px;
	background-color: #255480;
	margin: center;
	width: 895px;
 
}
 
ul#menu li ul
{
 	display:none;
 	height: 24px;
}
 
ul#menu li:hover>ul
{
	display:block;
}
 
ul#menu
{
	font-family:times new romans ,Helvetica, sans-serif;
	font-weight: bold;
	height: 21px;
	background-color: #255480;
	margin: 0%;
	padding: 0%;
	margin-top: 0%;
	float: center;
	display:block;
}
 
ul#menu li
{
	float:left;
	display:block;
}
 
ul#menu li a.menuprincipal 
{
	display:block;
    color: #46c343;
	padding-left: 50px;
	padding-right: 20px;
	padding-top: 0%;
	padding-bottom: 0%;
	text-decoration: none;
 
 
}
 
 
 
ul#menu li a.menuprincipal_fin
{
	display:block;
	color: #F8FFFF;
	padding-left: 7px;
	padding-right: 7px;
	padding-top: 0px;
	padding-bottom: 4px;
	text-decoration: none;
}
 
ul#menu li a.ssmenu
{
	font-family: times new romans, Arial, Helvetica, sans-serif;
	font-size: 11px;
	z-index:100;
	background-color: #255480;
	color: white; /* couleur texte sous menu */
	padding: 0px 10px 5px 0px;
	border: 1px white;
	text-decoration: none;
	text-align: center;
	margin-left: 20px;
	margin-top: -2px;
}
 
ul#menu li a.ssmenu-i
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
	z-index:100;
	background-color: #46c343;
	color: white;
	border: 1px white;
	padding: 5px 10px 5px 5px;
	text-decoration: none;
}
 
 
 
 
 
ul#menu li a.ssmenu:hover
{
	color: white;
	background: #46c343;
}
 
ul#menu li a.ssmenu-i:hover
{
	color: white;
	background: #46c343;
}
 
ul#menu ul
{
	position:absolute;
	float: left;
	list-style:none;
	margin:0px;
	padding:0px;
	width:150px;
	z-index:1;
}
 
ul#menu ul li a
{
	display:block;
	border-top: 0.5px solid white; /*Theme Change here*/
	border-bottom: 0.5px solid white;
	border-left: 0.5px solid white;
	border-right: 0.5px solid white;
	font:normal 11px times new roman;
	z-index:100;
	background-color: white;
	width: 150px;
}

Merci de pouvoir m'aider.

note: Si cela est nécessaire, je peux vous poster le code html.

Cordialement.

[lolo.]

Personne n'a une idée pour m'aider ?

[J_Lennon]

J'ai du mal à voir se qui ne vas pas. l'affichage sous firefox est identique à celui de Ie mise à part le menu ou l'on peu remarquer que sous ie, chaque sous - menu est encadré.

De plus ton interface est plutôt lourde, mais ca, c'est une autre affaire

Edit: okay j'ai rien dit.

c'est plutôt mal fait. tes images qui sont censées représenter le background doivent être assignées en background dans ton css et non en simple image.
"
/*tu définis la taille
width: 555px;
heigth: 33px;
background-image: url('./images/...');
ect....
"
Toute la mise en page doit être définis dans le .css, ainsi qu'il y est ou non du text ou des images, l'affichage doit être identique. Or si tu supprime toutes tes images, ton "kit graphique" ne sera plus.

[lolo.]

Bonjour,

Voici en image le problème :

Le résultat souhaité sous IE :


le Problème rencontrer sous Mozilla :


On peut donc voir que les bordures ne sont pas présentes dans Mozilla et qu'il y a un décalage.

Comment puis-je y remédier?

Cordialement.


Edite : je n'avais pas vue que tu avais complété t'as réponse

Pour faire ce que tu dis, je peux garder la disposition en tableau et simplement mettre une class ou id à chaque cellule du tableau pour définir l'image à mettre en fond?

J'utilise un tableau car avec des "Div" ( ce qui est mieux en soit, je n'y arrive pas.

[Dan_A]

Pour l'espace indésirable, ajoute
td img{display:block;}
Pour le reste, j'ai javascript désactivé...