Discussion :

[Myst3ryssss]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 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
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.

Sur IE j'obtiens le mauvais résultat suivant:


Sur tous les autres navigateurs, cela s'affiche comme un charme:


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...

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