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

[Myst3ryssss]

Peut-être que mon problème n'est pas si simple finalement.
Personne n'a d'idée? Ou bien comment procéder pour obtenir le même résultat sans les fameuses tables...?

[NoSmoking]

Bonsoir,
mets du texte dans tes cellules tu auras peut être une surprise.

Je t'engage à faire un dessin, eh oui cela fonctionne encore très bien, pour visualiser ce que tu souhaites.

[Myst3ryssss]

Bonsoir,

Inséré du texte dans mes cellules n'affecte en rien leurs hauteurs de départ...puisqu'elles sont de toute façon fixé dans mon fichier CSS. Et j'ai pas trop compris ton allusion ou la référence du dessin dans ton message. Je visualise très bien ce que je désire obtenir comme résultat final, surtout qu'il s'affiche super bien dans tous les navigateurs sauf sous IE. Je pensais plutôt a une piste pour arriver à fixer les cellules de la colonne de gauche à une hauteur FIXE. Ça devrait pas être si complexe que ça en principe.

Merci,

[Myst3ryssss]

J'ai résolu moi même en changeant complètement ma manière de faire mon tableau et mon découpage.

Merci quand même,