Alignement du texte différent entre FF et IE dans des cellules [Résolu]

[efrbeldin]

Bonjour à tous,

je galère depuis deux jours sur mon soucis, j'ai un tableau dont le contenu ne s'affiche pas de la même façon sur FF et sur IE sachant FF affiche le bon résultat.

Voici ce que j'obtiens dans mes balises td

Pour FF le text est centré dans ma cellule

Pour IE le text est centré mais il ne prend qu'une partie de la cellule


Pour les autres navigateurs cela fonctionne parfaitement c'est uniquement sur IE que j'ai ce soucis.

voici mon code.

Code html :

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 width="960" border="0" align="center" cellpadding="0" cellspacing="0" class="tablemenuhaut">
  <tr>
	<td class="menu_haut_image" rowspan=6><a href="./index.php"><img alt="" src="./images/college.gif"></a></td>
  </tr>
  <tr>
 		<td class="espace0"></td>
		<td id="b_menu_haut0_1" class="b_menu_haut0_1"></td>
		<td class="espace0"></td>
		<td id="b_menu_haut0_2" class="b_menu_haut0_2"></td>
		<td class="espace0"></td>
		<td id="b_menu_haut0_3" class="b_menu_haut0_3"></td>
		<td class="espace0"></td>
		<td id="b_menu_haut0_4" class="b_menu_haut0_4"></td>
		<td class="espace0"></td>
		<td id="b_menu_haut0_5" class="b_menu_haut0_5"></td>
		<td class="espace0"></td>
		<td id="b_menu_haut0_6" class="b_menu_haut0_6"></td>
		<td class="espace0"></td>
 
		<td id="b_menu_haut0_7" class="b_menu_haut0_7"> </td>
		<td class="espace0"></td>
 
  </tr>
  <tr>
    	<td width="840" colspan=13 height="5"></td>
  </tr>
  <tr>
		<td class="espace"></td>
		<td id="b_menu_haut_1" class="b_menu_haut_1" onmouseover="chg_couleurs_onmouseover(1);" onmouseout="chg_couleurs_onmouseout(1);" onClick="click_menu_haut(1,6);">la FCPE <br> à Epinay sur Orge</td>
		<td class="espace"> </td>
		<td id="b_menu_haut_2" class="b_menu_haut_2" onmouseover="chg_couleurs_onmouseover(2);" onmouseout="chg_couleurs_onmouseout(2);" onClick="click_menu_haut(2,6);">Collège <br> André Maurois</td>
		<td class="espace"> </td>
		<td id="b_menu_haut_3" class="b_menu_haut_3" onmouseover="chg_couleurs_onmouseover(3);" onmouseout="chg_couleurs_onmouseout(3);"onClick="click_menu_haut(3,6);"> Groupe Scolaire Paul Valéry</td>
		<td class="espace"> </td>
		<td id="b_menu_haut_4" class="b_menu_haut_4" onmouseover="chg_couleurs_onmouseover(4);" onmouseout="chg_couleurs_onmouseout(4);"onClick="click_menu_haut(4,6);"> Elementaire <br> Albert Camus </td>
		<td class="espace"> </td>
		<td id="b_menu_haut_5" class="b_menu_haut_5" onmouseover="chg_couleurs_onmouseover(5);" onmouseout="chg_couleurs_onmouseout(5);"onClick="click_menu_haut(5,6);"> Maternelle <br> Albert Camus </td>
		<td class="espace"> </td>
		<td id="b_menu_haut_6" class="b_menu_haut_6" onmouseover="chg_couleurs_onmouseover(6);" onmouseout="chg_couleurs_onmouseout(6);"onClick="click_menu_haut(6,6);"> Maternelle <br> Templiers </td>
		<td class="espace"> </td>
 
		<td id="b_menu_haut_7" class="b_menu_haut_7" onmouseover="chg_couleurs_onmouseover(7);" onmouseout="chg_couleurs_onmouseout(7);"onClick="click_menu_haut(7,7);"> Adhérents </td>
		<td class="espace"> </td>
 
 
  </tr>

Pour mon CCS

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
 
#tablemenuhaut{table-layout:fixed;}
 
td.menu_haut_image {width: 70px;height:30px;}
td.espace {width: 10px;height:50px;}
td.espace0 {width: 10px;height:5px;}
 
td.b_menu_haut_1 {font-size: 12px;width: 90px;height:30px;background-color:#00adef;text-align: center; cursor:pointer;}
td.b_menu_haut_2 {font-size: 12px;width: 90px;height:30px;background-color:#7fcc28;text-align: center; cursor:pointer;}
td.b_menu_haut_3 {font-size: 12px;width: 90px;height:30px;background-color:#f9a70d;text-align: center; cursor:pointer;}
td.b_menu_haut_4 {font-size: 12px;width: 90px;height:30px;background-color:#f24dae;text-align: center; cursor:pointer;}
td.b_menu_haut_5 {font-size: 12px;width: 90px;height:30px;background-color:#bcb871;text-align: center; cursor:pointer;}
td.b_menu_haut_6 {font-size: 12px;width: 90px;height:30px;background-color:#b54e47;text-align: center; cursor:pointer;}
td.b_menu_haut_7 {font-size: 12px;width: 90px;height:30px;background-color:#CC9900;text-align: center; cursor:pointer;}
 
td.b_menu_haut0_1 {width: 90px;height:5px;}
td.b_menu_haut0_2 {width: 90px;height:5px;}
td.b_menu_haut0_3 {width: 90px;height:5px;}
td.b_menu_haut0_4 {width: 90px;height:5px;}
td.b_menu_haut0_5 {width: 90px;height:5px;}
td.b_menu_haut0_6 {width: 90px;height:5px;}
td.b_menu_haut0_7 {width: 90px;height:5px;}
 
td.b_menu_haut2_1 {width: 90px;height:5px;}
td.b_menu_haut2_2 {width: 90px;height:5px;}
td.b_menu_haut2_3 {width: 90px;height:5px;}
td.b_menu_haut2_4 {width: 90px;height:5px;}
td.b_menu_haut2_5 {width: 90px;height:5px;}
td.b_menu_haut2_6 {width: 90px;height:5px;}
td.b_menu_haut2_7 {width: 90px;height:5px;}

je n'ai mis qu'une partie du tableau, le résultat est identique dans les autres cellules.

Pouvez-vous m'aider? En pièce jointe ce que j'obtiens

[NoSmoking]

Bonjour,
par pitié arrêtons de martyriser les moteurs de rendu...
je note dans ton CSS

Code css :

1
2
3
4
td.menu_haut_image {
  width: 70px;
  height:30px;
}

et un peu plus dans le HTML

Code html :

<td class="menu_haut_image" rowspan=6>

attendu que tes TD font 90px de largeur, comment veux tu que 6 x 90px = 70px ?
-supprimes la largeur et laisse faire l'adaptation à la largeur.

Encore plus loin il y a

Code html :

<td width="840" colspan="13" height="5"></td>

même remarque que ci dessus.
- supprimes la notion de largeur sur cette TD.


D'une manière générale
- sort des balises les référence au style pour les mettre dans la partie STYLE
du document
- factorise les déclarations, beaucoup trop de propriétés identique répétées.
- prend l'habitude de mettre des cotte sur les valeurs des attributs.

Avec cela, cela devrait rentrer dans l'ordre pour IE.

[efrbeldin]

Merci pour ta réponse, je n'ai pas l'habitude de manier les styles mais effectivement j'ai pris en compte tes remarques par contre je m'interroge sur

attendu que tes TD font 90px de largeur, comment veux tu que 6 x 90px = 70px ?
-supprimes la largeur et laisse faire l'adaptation à la largeur.

Dans ce cas précis <td class="menu_haut_image" rowspan=6> j'agis sur rowspan et non colspan donc là on ne peut pas avoir 6*90px = 70px j'ai donc plutôt retirer la hauteur.

Malgré ces corrections toujours le même soucis que dans les pièces jointes que j'avais mis dans mon message. Je me demande également pourquoi je ne rencontre ce problème que sur IE...

De plus je ne souhaite pas laisser faire la largeur, je veux pouvoir maitriser mes td.

Je cherche donc encore

[NoSmoking]

Dans ce cas précis <td class="menu_haut_image" rowspan=6> j'agis sur rowspan et non colspan donc là on ne peut pas avoir 6*90px = 70px j'ai donc plutôt retirer la hauteur.

j'ai fait l'amalgame avec le colspan.

En fait il ne faut pas forcer la largeur de ta table

Code :

<table width="960" border="0" align="center" cellpadding="0" cellspacing="0" class="tablemenuhaut">

ici si je fait le cumul des largeurs j'arrive à 780px, sauf erreur de calcul mais tu la force à 960...

Code :

<td width="840" colspan="13" height="5"></td>

ici si je fait le cumul j'arrive à 610 et non 840px...

De plus je ne souhaite pas laisser faire la largeur, je veux pouvoir maitriser mes td.

cela sera respecté...

[efrbeldin]

Merci mon problème est résolu