Bordures de tableaux sous IE

Version imprimable

Bonjour, voila j'ai créé une page en xHTML/CSS qui contient des tableaux. Sous firefox tout s'affiche correctement, par contre sous IE je n'ai pas les bordures de droites :S j'ai éssayé pas mal de solutions, rien a faire.

Je laisse mon code :

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
<style type="text/css" media="all">
BODY {
	MARGIN:0px 0px 0px 0px;
	PADDING:0px 0px 0px 0px;
	background-image: url(<a href="http://www.adarinnovations.com/images/bg.gif);" target="_blank">http://www.adarinnovations.com/images/bg.gif);</a>
	background-repeat:repeat-x;
	BACKGROUND-COLOR:#FFFFFF;
	text-align:center;
}
table {
	border:0px;
	border-collapse:collapse;
	width:100%;
	margin:auto;
}
td {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#464646;
	background-color:#FFFFFF;
	border:1px solid #000000;
	padding:5px;
}
.fonce { border:0; padding-left:0; }
.title { font-size:14px; color:#2A4EB4; }
</style>
<title>Les lunettes du futur</title>
<body>
<br>
<table>
  <tr>
    <td>
    <div style="float:left; padding-right:20px;"><img src="http://www.adarinnovations.com/images/adar.gif" alt="Adar Innovations" border="0" /></div>
    Sarl ADAR Innovations<br />
    13, Imp Théodore Lenotre<br />
 
    31500 Toulouse<br />
    <strong>Siret :</strong> 498 475 334 00013</td>
    <td width="220"><strong>Contact :</strong> Mr PADER St&eacute;phane<br />
      <strong>Email : </strong>stephane@adarinnovations.com<strong><br />
 
T&egrave;l :</strong> +339 53 47 07 88<br />
<strong>URL :</strong> http://www.adarinnovations.com</td>
  </tr>
</table>
<br />
<table><tr><td class="title" style="text-align:center; padding:10px;"><p><strong>Fiche de Quotation : Les lunettes du futur </strong> (R&egrave;f RARG2-D)</p></td></tr></table>
 
<br />
<table>
  <tr>
    <td colspan="2" align="center" valign="middle"> <div style="position:absolute; width:350px; height:300px; background-color:#0000CC; float:left; margin:0; padding:0; left:5px;">
    IMAGE 350px max</div>
    <div style="margin-left:360px; text-align:left;">
      <p class="title"><u><strong>Sp&eacute;cifications Techniques :</strong></u></p>
      <p align="justify">tdhdghdgh df hdgh dg hdf hdhg dg hdf hdfhdf hdf hdfh df hgdf hdfhdfhdfhdf hdfh dhg dfh dfh dfh df hdfh gdf hdf hdf hdfh dfh dfh dfh dfh dfh dfh gf hdfh dfhdfhdfhdfh dfh dfh fdh dfh dfh dfh dfh d dfhdfhdfhfgh dfh dhgdfhdfhd dfh dfhdfhdfhdfhdfh</p>
 
      <table>
        <tr>
          <td colspan="4" class="fonce"><p class="title"><u><strong>Certificats</strong></u></p></td>
        </tr>
        <tr>
          <td width="95"><strong>CE</strong></td>
          <td colspan="3" >18/06/2007</td>
 
        </tr>
        <tr>
          <td><strong>ROHS</strong></td>
          <td colspan="3">19/06/2007</td>
        </tr>
        </table>
      <br />
        <table>
 
          <tr>
            <td colspan="4" class="fonce"><p class="title"><u><strong>Packaging</strong></u></p></td>
          </tr>
          <tr>
            <td><strong>Type :</strong></td>
            <td colspan="3">Boite color&eacute;e</td>
          </tr>
 
          <tr>
            <td><strong>Couleur(s) :</strong></td>
            <td colspan="3">Vert / Bleu / Rouge</td>
          </tr>
          <tr>
            <td width="95"><strong>Dimmensions :</strong></td>
            <td style="text-align:center;"><strong>l*L*H (cm)</strong></td>
 
            <td style="text-align:center;"><strong>Qt&eacute;/carton</strong></td>
            <td style="text-align:center;"><strong>Poids</strong></td>
          </tr>
          <tr>
            <td><strong>Packaging :</strong></td>
            <td style="text-align:center;">26.5*12*36</td>
 
            <td style="text-align:center;">1</td>
            <td style="text-align:center;">2 kg</td>
          </tr>
          <tr>
            <td><strong>Packing : </strong></td>
            <td style="text-align:center;">55*13*25</td>
            <td style="text-align:center;">8</td>
 
            <td style="text-align:center;">30 kg</td>
          </tr>
                        </table>
      <br />
        <table>
          <tr>
            <td colspan="2" class="fonce"><p class="title"><u><strong>Container</strong></u></p></td>
          </tr>
 
          <tr>
            <td width="95"><strong>Qt&eacute; / 20''</strong></td>
            <td>2000 PCS</td>
          </tr>
          <tr>
            <td><strong>Qt&eacute; / 40''</strong></td>
 
            <td>4000 PCS</td>
          </tr>
          <tr>
            <td><strong>Qt&eacute; / 40'' HQ</strong></td>
            <td>4800 PCS</td>
          </tr>
 
          <tr>
            <td><strong>Temps de prod.</strong></td>
            <td>30 jours</td>
          </tr>
          <tr>
            <td><strong>MOQ</strong></td>
            <td>1000 PCS</td>
 
          </tr>
         </table>
        </div></td>
  </tr>
  <tr>
    <td width="350" style="border-right:0;">
    <table>
      <tr>
        <td colspan="2" class="fonce"><p class="title"><strong><u>Offre</u></strong></p></td>
 
      </tr>
      <tr>
        <td width="50%"><strong>Quantit&eacute;</strong></td>
        <td width="50%">1000</td>
      </tr>
      <tr>
        <td><strong>Prix :</strong></td>
 
        <td>35.6</td>
      </tr>
      <tr>
        <td><strong>Devise :</strong></td>
        <td>USD</td>
      </tr>
      <tr>
 
        <td><strong>Incoterm :</strong></td>
        <td>FOB</td>
      </tr>
      <tr>
        <td><strong>Terme de payment :</strong></td>
        <td>TT</td>
      </tr>
 
      <tr>
        <td><strong>Port de chargement :</strong></td>
        <td>GUANG ZHOU</td>
      </tr>
    </table></td>
    <td align="left" valign="top" style="border-left:0;"><p class="title"><u><strong>Commentaires :</strong></u></p>
      <p>bla bla bla bla</p>
 
      <p style="position:absolute; bottom:0px; right:0px;">Offre valable jusqu'au <strong>12/12/2007</strong></p>
    </td>
  </tr>
</table>
<br />
</body>

Si jamais quelqu'un a déja été confronté a ce problème, ça m'intéresse, parce que là, ça fait un bon moment que je coince.

Merci d'avance

14/01/2009, 13h58
StAfX

Salut,

si tu supprimes
border-collapse:collapse;

de ton tag 'table', pour moi ça s'affiche normalement sour IE7 et FF.

je ne vois pas d'autre pbs. :P

Stef.
14/01/2009, 14h17
slash031

Non ça ne change rien :/

La fermeture de ton </div> n'est pas placé au bon endroit.

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
 
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="all">
BODY {
MARGIN:0px 0px 0px 0px;
PADDING:0px 0px 0px 0px;
background-image: url(http://www.adarinnovations.com/images/bg.gif);
background-repeat:repeat-x;
BACKGROUND-COLOR:#FFFFFF;
text-align:center;
}
table {
border:0px;
border-collapse:collapse;
width:100%;
margin:auto;
}
td {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#464646;
background-color:#FFFFFF;
border:1px solid #000000;
padding:5px;
}
.fonce { border:0; padding-left:0; }
.title { font-size:14px; color:#2A4EB4; }
 
.table2{width:70%}
</style>
<title>Les lunettes du futur</title>
</head>
<body>
<br>
<table>
<tr>
<td>
<div style="float:left; padding-right:20px;"><img src="http://www.adarinnovations.com/images/adar.gif" alt="Adar Innovations" border="0" /></div>
Sarl ADAR Innovations<br />
13, Imp Théodore Lenotre<br />
 
31500 Toulouse<br />
<strong>Siret :</strong> 498 475 334 00013</td>
<td width="220"><strong>Contact :</strong> Mr PADER St&eacute;phane<br />
<strong>Email : </strong>stephane@adarinnovations.com<strong><br />
 
T&egrave;l :</strong> +339 53 47 07 88<br />
<strong>URL :</strong> http://www.adarinnovations.com</td>
</tr>
</table>
<br />
<table><tr><td class="title" style="text-align:center; padding:10px;"><p><strong>Fiche de Quotation : Les lunettes du futur </strong> (R&egrave;f RARG2-D)</p></td></tr></table>
 
<br />
 
<table>
<tr>
<td colspan="2" align="center" valign="middle"> <div style="position:absolute; width:350px; height:300px; background-color:#0000CC; float:left; margin:0; padding:0; left:5px;">
IMAGE 350px max</div>
<div style="margin-left:360px; text-align:left;">
<p class="title"><u><strong>Sp&eacute;cifications Techniques :</strong></u></p>
<p align="justify">tdhdghdgh df hdgh dg hdf hdhg dg hdf hdfhdf hdf hdfh df hgdf hdfhdfhdfhdf hdfh dhg dfh dfh dfh df hdfh gdf hdf hdf hdfh dfh dfh dfh dfh dfh dfh gf hdfh dfhdfhdfhdfh dfh dfh fdh dfh dfh dfh dfh d dfhdfhdfhfgh dfh dhgdfhdfhd dfh dfhdfhdfhdfhdfh</p>
</div>
<div align="right">
      <table class="table2">
        <tr>
<td colspan="4" class="fonce"><p class="title"><u><strong>Certificats</strong></u></p></td>
</tr>
<tr>
<td width="95"><strong>CE</strong></td>
<td colspan="3" >18/06/2007</td>
 
</tr>
<tr>
<td><strong>ROHS</strong></td>
<td colspan="3">19/06/2007</td>
</tr>
</table>
<br />
<table class="table2">
 
<tr>
<td colspan="4" class="fonce"><p class="title"><u><strong>Packaging</strong></u></p></td>
</tr>
<tr>
<td><strong>Type :</strong></td>
<td colspan="3">Boite color&eacute;e</td>
</tr>
 
<tr>
<td><strong>Couleur(s) :</strong></td>
<td colspan="3">Vert / Bleu / Rouge</td>
</tr>
<tr>
<td width="95"><strong>Dimmensions :</strong></td>
<td style="text-align:center;"><strong>l*L*H (cm)</strong></td>
 
<td style="text-align:center;"><strong>Qt&eacute;/carton</strong></td>
<td style="text-align:center;"><strong>Poids</strong></td>
</tr>
<tr>
<td><strong>Packaging :</strong></td>
<td style="text-align:center;">26.5*12*36</td>
 
<td style="text-align:center;">1</td>
<td style="text-align:center;">2 kg</td>
</tr>
<tr>
<td><strong>Packing : </strong></td>
<td style="text-align:center;">55*13*25</td>
<td style="text-align:center;">8</td>
 
<td style="text-align:center;">30 kg</td>
</tr>
</table>
<br />
<table class="table2">
<tr>
<td colspan="2" class="fonce"><p class="title"><u><strong>Container</strong></u></p></td>
</tr>
 
<tr>
<td width="95"><strong>Qt&eacute; / 20''</strong></td>
<td>2000 PCS</td>
</tr>
<tr>
<td><strong>Qt&eacute; / 40''</strong></td>
 
<td>4000 PCS</td>
</tr>
<tr>
<td><strong>Qt&eacute; / 40'' HQ</strong></td>
<td>4800 PCS</td>
</tr>
 
<tr>
<td><strong>Temps de prod.</strong></td>
<td>30 jours</td>
</tr>
<tr>
<td><strong>MOQ</strong></td>
<td>1000 PCS</td>
 
</tr>
</table>
</div>
    </td>
</tr>
<tr>
<td width="350" style="border-right:0;">
<table>
<tr>
<td colspan="2" class="fonce"><p class="title"><strong><u>Offre</u></strong></p></td>
 
</tr>
<tr>
<td width="50%"><strong>Quantit&eacute;</strong></td>
<td width="50%">1000</td>
</tr>
<tr>
<td><strong>Prix :</strong></td>
 
<td>35.6</td>
 
</tr>
<tr>
<td><strong>Devise :</strong></td>
<td>USD</td>
</tr>
<tr>
 
<td><strong>Incoterm :</strong></td>
<td>FOB</td>
</tr>
<tr>
<td><strong>Terme de payment :</strong></td>
<td>TT</td>
</tr>
 
<tr>
<td><strong>Port de chargement :</strong></td>
<td>GUANG ZHOU</td>
</tr>
</table></td>
<td align="left" valign="top" style="border-left:0;"><p class="title"><u><strong>Commentaires :</strong></u></p>
<p>bla bla bla bla</p>
 
<p style="position:absolute; bottom:0px; right:0px;">Offre valable jusqu'au <strong>12/12/2007</strong></p>
</td>
</tr>
</table>
<br />
</body>

Dans le code tu remonte la fermeture du </div>
J'ai créé une class="table2" pour spécifier une taille de tableau
Ensuite t'es 3 tableau tu les places dans une div que tu alignes à droite.

edit: Pour FF, tu peux virer le margin:auto de la balise <table>, c'est ca qui te centre les tableaux.

Petit conseil: Evite d'utiliser les tableaux pour de la mise en page. Privilégie l'utilisation de <div>

Essai de mettre tout tes styles dans la css (par exemple le style de ton <div> bleu) afin d'éclaircir le code.

16/01/2009, 10h56
EIN-LESER

Au risque de mettre les pieds dans le plat et de passer pour un rabat-joie:
Habitus toi à mettre ton code CSS dans une page CSS a part.
Non seulement sa facilite la lecture et le codage mais en plus quand tu a un soucis comme sa te permets de faire tes tests plus facilement en changent simplement la page CSS attaché. ;)