2 pièce(s) jointe(s)
Problème de tableau seulement sous IE
Bonjour,
Avant tout, je débute en HTML/CSS et je sais que l'utilisation des tableaux n'est pas vue d'une belle manière par plusieurs codeur que j'ai rencontré sur le Web, mais bref, j'ai un problème d'affichage d'un tableau sous IE seulement (ce fameux IE de ....) et sans ce navigateur mon projet aurait été réalisé en facilement 40% moins de temps.
Voici mon HTML de base simplifié pour l'exemple:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <table>
<tr><td colspan="4"><div class="activateTopBorder"></div></td></tr>
<tr>
<td><div class="activateLeftMenuOpen"></div></td>
<td rowspan="7"><div class="activateLeftBorder"></div></td>
<td rowspan="6"><div class="activateBody"></div></td>
<td rowspan="7"><div class="activateRightBorder"></div></td>
</tr>
<tr> <td> <div class="activateLeftMenuBody"> </div></td></tr>
<tr> <td> <div class="activateLeftMenuCloseHover"> </div></td></tr>
<tr> <td> <div class="activateLeftMenuBody"> </div></td></tr>
<tr> <td> <div class="activateLeftMenuClose"> </div></td></tr>
<tr> <td rowspan="2"> <div class="activateLeftMenuFooter"> </div></td></tr>
<tr> <td> <div class="activateBottomBorder"> </div></td></tr>
</table> |
Ainsi que le CSS simplifié:
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
| table,
tr,
td {
border-collapse:collapse;
border-spacing: 0px;
padding: 0px;
vertical-align: top;
/*BORDER pour test*/
border-style:solid;
border-color: grey;
border-width: 1px;
}
.activateTopBorder {
width: 985px;
height: 15px;
}
.activateLeftBorder {
width: 13px;
height: 708px;
}
.activateRightBorder {
width: 12px;
height: 708px;
}
.activateBottomBorder {
width: 733px;
height: 11px;
}
.activateBody {
width: 733px;
height: 697px; /*TESTING HEIGHT*/
}
.activateLeftMenuOpen,
.activateLeftMenuClose,
.activateLeftMenuCloseHover {
width: 227px;
height: 58px;
}
.activateLeftMenuBody {
width: 227px;
height: 10px;
}
.activateLeftMenuFooter {
width: 227px;
height: 20px;
} |
Excusez moi pour les noms complexes. :oops:
Sur IE j'obtiens le mauvais résultat suivant:
Pièce jointe 110384
Sur tous les autres navigateurs, cela s'affiche comme un charme:
Pièce jointe 110385
J'ai beau appliquer une taille fixe au balise div, au tr ou au td, rien n'y fait. En fait, je tourne en rond depuis 2 heures. J'ai regardé sur plusieurs forums d'on celui-ci, mais je dois mal fouiller, car toutes les solutions potables ne fonctionne pas sous IE. Je soupçonne un problème d'alignement vertical peut-être, mais encore la j'ai beaucoup essayé, mais je dois mal m'y prendre. Je suis certain d'oublier un détail évident...:cry:
J'espère ne pas avoir l'air trop stupide avec cette question peut-être très simpliste, mais si quelqu'un peut m'aider, ce serait plus qu’apprécié!
Merci!
Maxime
