Problème CSS IE/FF

Version imprimable

Problème CSS IE/FF

Boujou tout le monde! :)

Alors voilà j'ai deux bug que je n'arrive pas à résoudre sur mon site.

www.sanair.fr.

Le premier bug intervient dans la section "Pour les particulier", partie "Exemples pour les particulier". Je pense que c'est une histoire de float... Sous FF impéccable, sous IE, le carousel est en bas...

Et le 2ème, c'est que je n'arrive pas à mettre la barre bleu de chaque page à la bonne largeur.
En fait, si je mets le width de #right jusqu'à 575 px, c'est bon! 576px, c'est au milieu, et au dela, c'est en bas lol :yaisse2:

Voici le 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
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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
 
body{
font: normal small Arial, Helvetica, sans-serif;
color: #000000;
text-align : center;
font-size:13px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:10px;
width:auto;
height: auto;
}
#accueil{
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: normal;	
	text-align:justify;
	text-decoration:none;
    float: left;
	width:570px;
 
}
#titre{
	text-decoration: underline;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-align:left;	
}
#border
{width:879px;
 
}
#header
{width:879px;
height:148px;
background-image:url(../images/logo-bg.gif); background-repeat:repeat-x;}
 
 
.name
{font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
color:#ffffff;
padding-top:40px;
text-align:left;
padding-bottom:3px;
padding-left:20px;
font-size:32px;}
.tag
{color:#000000;
text-align:left;
padding-left:22px;}
#links_bg
{width:879px;
background-image:url(../images/links-bg.gif); background-repeat:repeat-x;
height:47px;
line-height:45px;}
.sap2
{width:1px;
float:left;
background-image:url(../images/sap.gif); background-repeat:repeat-y;
height:45px;
font-size:1px;}
.toplinks
{width:119px;
float:left;
text-align:center;}
.toplinks a
{color:#804E14;
font-weight:bold;
text-decoration:none;}
.toplinks a:hover
{color:#000000;
text-decoration:none;}
 
 
#left
{width:199px;
border-right:1px solid #DEDEDE;
float:left;}
#center
{font-size:1px;
width:4px;
float:left;
height:100px;}
 
#right
{width:575px;
float:left;
 }
 
#gap
{width:4px;
height:168px;
font-size:1px;
float:left;}
 
#cat_heading
{background-image:url(../images/links-bg.gif); background-repeat:repeat-x; background-position:bottom;
height:39px;
margin-top:1px;
line-height:39px;
padding-left:10px;
font-size:11px;
text-align:left;
font-family:tahoma;
font-weight:bold;
color:#272D29;
text-transform:uppercase;}
#cat_heading2
{background-image:url(../images/bg.gif); background-repeat:repeat-x;
height:39px;
margin-top:5px;
line-height:39px;
padding-left:10px;
font-size:11px;
font-family:tahoma;
text-align:left;
font-weight:bold;
color:#ffffff;
text-transform:uppercase;}
#cat_heading3
{background-image:url(../images/bg-2.gif); background-repeat:repeat-x;
height:39px;
margin-top:5px;
text-align:left;
line-height:39px;
padding-left:10px;
font-size:11px;
font-family:tahoma;
font-weight:bold;
color:#000000;
text-transform:uppercase;}
 
.leftlinks
{padding-left:10px;
line-height:25px;
text-align:left;
font-size:12px;
height:25px;}
.leftlinks a
{color:#514F4E;
font-weight:bold;
text-decoration:none}
.leftlinks a:hover
{color:#000000;
text-decoration:none;}
.sap3
{height:1px;
font-size:1px;
border-bottom:1px solid #E3E3E3;}
.heading-bg
{background-color:#2f3370;
height:35px;
font-size: 16px;
text-align:left;
line-height:35px;
color:#ffffff;
font-weight:bold;
clear:left;
padding-left:15px;}
.main
{padding-left:10px;
text-align:left;
border-left:1px solid #DEDEDE;
border-right:1px solid #DEDEDE;
padding-right:10px;
float:left;
width:552px;
padding-top:10px;
padding-bottom:10px;}
 
 
a{text-decoration:none;}
 
#bottom
{height:40px;
background-color:#D8D9D8;
line-height:40px;
clear:left;
width:879px;}
 
#s-left
{width:143px;
color:#C4092D;
font-size:11px;
font-family:tahoma;
font-weight:bold;
text-transform:uppercase;
padding-left:10px;
padding-top:10px;
float:left;}
.s-left2
{color:#ffffff;
font-size:11px;
font-family:tahoma;
font-weight:bold;
text-transform:lowercase;}
 
.sap
{width:1px;
float:left;
height:30px;
color:#303030;
text-align:center;}
.bottomlink
{width:153px;
height:30px;
text-align:center;
color:#303030;
float:left;}
.bottomlink a
{color:#303030;
text-decoration:none;}
.bottomlink a:hover
{color:#000000;
text-decoration:underline;}

Merci!:aie:

12/05/2008, 19h30
snaxisnake

:( Personne ne peux m'aider ?

Cela ne viens peut être pas du CSS ? :aie:

Merci:yaisse2:
12/05/2008, 21h42
Candygirl
Bonsoir,
Citation:
Envoyé par snaxisnake

Code:

1 2 3 4 5 #right {width:575px; float:left; }

Code:

<div style="border-bottom:1px solid #DEDEDE; border-left:1px solid #DEDEDE; float:left; width:779px;">

Code:

<img src="./animaccueil/P1000680.JPG"/>
L'image que tu mets dans #droite fait 650px, soit plus que les 575 déclarés dans #right. IE6, qui n'accepte pas que le contenu déborde de son conteneur (contrairement à FF et IE7), agrandit donc ton #droite à 650px.

Du coup, #gauche (200px) + #center (4px, le virer et utiliser un margin) + #droite(650px) = 854px, soit plus que les 779 déclaré pour le contenteneur. Donc IE6 n'a pas la place de les mettre côtes à côtes et place le #right en bas. Il faut que tu revoies tes largeurs...

Ok merci Candygirl! Cela fonctionne pour le deuxième bug! :yaisse2:

Mais reste toujours le premier dans "Exemples d'installation", où la visionneuse ce trouve en bas avec IE...

Peut être ce la vient du CSS de la page...

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
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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
 
body{
font: normal small Arial, Helvetica, sans-serif;
color: #000000;
text-align : center;
font-size:13px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:10px;
width:auto;
height: auto;
}
#accueil{
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: normal;	
	text-align:justify;
	text-decoration:none;
    float: left;
	width:650px;
 
}
#titre{
	text-decoration: underline;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-align:left;	
}
#border
{width:855px;
 
}
#header
{width:855px;
height:148px;
background-image:url(../images/logo-bg.gif); background-repeat:repeat-x;}
 
 
.name
{font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
color:#ffffff;
padding-top:40px;
text-align:left;
padding-bottom:3px;
padding-left:20px;
font-size:32px;}
.tag
{color:#000000;
text-align:left;
padding-left:22px;}
 
#links_bg
{width:855px;
background-image:url(../images/links-bg.gif); background-repeat:repeat-x;
height:47px;
line-height:45px;}
.sap2
{width:1px;
float:left;
background-image:url(../images/sap.gif); background-repeat:repeat-y;
height:45px;
font-size:1px;}
.toplinks
{width:119px;
float:left;
text-align:center;}
.toplinks a
{color:#804E14;
font-weight:bold;
text-decoration:none;}
.toplinks a:hover
{color:#000000;
text-decoration:none;}
 
 
#left
{width:200px;
border-right:1px solid #DEDEDE;
float:left;}
 
#center
{font-size:1px;
width:4px;
float:left;
height:100px;}
 
#right
{width:650px;
float:left;
 }
 
#gap
{width:4px;
height:168px;
font-size:1px;
float:left;}
 
#cat_heading
{background-image:url(../images/links-bg.gif); background-repeat:repeat-x; background-position:bottom;
height:39px;
margin-top:1px;
line-height:39px;
padding-left:10px;
font-size:11px;
text-align:left;
font-family:tahoma;
font-weight:bold;
color:#272D29;
text-transform:uppercase;}
#cat_heading2
{background-image:url(../images/bg.gif); background-repeat:repeat-x;
height:39px;
margin-top:5px;
line-height:39px;
padding-left:10px;
font-size:11px;
font-family:tahoma;
text-align:left;
font-weight:bold;
color:#ffffff;
text-transform:uppercase;}
#cat_heading3
{background-image:url(../images/bg-2.gif); background-repeat:repeat-x;
height:39px;
margin-top:5px;
text-align:left;
line-height:39px;
padding-left:10px;
font-size:11px;
font-family:tahoma;
font-weight:bold;
color:#000000;
text-transform:uppercase;}
 
.leftlinks
{padding-left:10px;
line-height:25px;
text-align:left;
font-size:12px;
height:25px;}
.leftlinks a
{color:#514F4E;
font-weight:bold;
text-decoration:none}
.leftlinks a:hover
{color:#000000;
text-decoration:none;}
.sap3
{height:1px;
font-size:1px;
border-bottom:1px solid #E3E3E3;}
.heading-bg
{background-color:#2f3370;
height:35px;
font-size: 16px;
text-align:left;
line-height:35px;
color:#ffffff;
font-weight:bold;
clear:left;
padding-left:15px;}
.main
{padding-left:10px;
text-align:left;
border-left:1px solid #DEDEDE;
border-right:1px solid #DEDEDE;
padding-right:10px;
float:left;
width:552px;
padding-top:10px;
padding-bottom:10px;}
 
 
a{text-decoration:none;}
 
#bottom
{height:40px;
background-color:#D8D9D8;
line-height:40px;
clear:left;
width:879px;}
 
#s-left
{width:143px;
color:#C4092D;
font-size:11px;
font-family:tahoma;
font-weight:bold;
text-transform:uppercase;
padding-left:10px;
padding-top:10px;
float:left;}
.s-left2
{color:#ffffff;
font-size:11px;
font-family:tahoma;
font-weight:bold;
text-transform:lowercase;}
 
.sap
{width:1px;
float:left;
height:30px;
color:#303030;
text-align:center;}
.bottomlink
{width:153px;
height:30px;
text-align:center;
color:#303030;
float:left;}
.bottomlink a
{color:#303030;
text-decoration:none;}
.bottomlink a:hover
{color:#000000;
text-decoration:underline;}
 
img
 {border: none;}

... ou de la visionneuse, mais je ne pense pas...

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
 
/* Horizontal Carousel */
#horizontal_carousel {
  float: left;
  width: 650px;
  height: 240px;
  margin-bottom: 10px;
  position: relative;
}
 
#horizontal_carousel .container {
  float: left;
  width: 500px;
  height: 240px;
  position: relative;    
  overflow: hidden;
}
 
#horizontal_carousel ul {
  margin: 0;
  padding:0;
  width: 100000px;
  position: relative;
  top: 0;
  left: 0;
  height: 240px;
}                      
 
#horizontal_carousel ul li {
  width: 200px;
  height: 240px;
  text-align: center; 
  list-style:none;   
  float:left;
}
 
#horizontal_carousel .previous_button {
  float:left;  
  width: 36px;
  height: 240px;
  background: url(prototype-ui/horizontal/left.png);
  z-index: 100;
  cursor: pointer;
}
 
#horizontal_carousel .previous_button_over {
  background: url(prototype-ui/horizontal/left_over.png);
}
 
#horizontal_carousel .previous_button_disabled {
  background: url(prototype-ui/horizontal/left_disabled.png);
  cursor: default;
}
 
#horizontal_carousel .next_button {
  float:left;  
  width: 36px;
  height: 240px;
  background: url(prototype-ui/horizontal/right.png);
  z-index: 100;
  cursor: pointer;
}
 
#horizontal_carousel .next_button_over {
  background: url(prototype-ui/horizontal/right_over.png);
}
 
#horizontal_carousel .next_button_disabled {
  background: url(prototype-ui/horizontal/right_disabled.png);
  cursor: default;
}

13/05/2008, 08h38
Candygirl

Le css est censé être le même que celui des autres pages, à part les ajouts pour la visionneuse.

Ta visionneuse génère des erreurs javascript sur Firefox et sur IE. Je te propose, dans un premier temps, d'aller poster sur le forum javascript pour avoir un script fonctionnel puis, revenir ici au besoin.

Au passage, tu souffres d'une "divite" sévère ;) Tu devrais utiliser un balisage plus approprié; des h1,h2,... pour tes titres, etc...