Alignement du texte différent entre FF et IE dans des cellules

**efrbeldin** · 27/07/2011, 16h43

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 :

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

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
 
#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** · 27/07/2011, 18h53

Bonjour,
par pitié arrêtons de martyriser les moteurs de rendu...

je note dans ton CSS

Code css :

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

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

et un peu plus dans le HTML

Code html :

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

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

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

<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** · 28/07/2011, 00h24

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** · 28/07/2011, 07h48

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 :

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

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

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

<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** · 28/07/2011, 08h26

Merci mon problème est résolu

Alignement du texte différent entre FF et IE dans des cellules

Positionnement en CSS

Discussions similaires

Partager

Partager