Centrer texte dans td ie6

Résolu
Tryphon71 Messages postés 41 Date d'inscription   Statut Membre Dernière intervention   -  
Tryphon71 Messages postés 41 Date d'inscription   Statut Membre Dernière intervention   - 27 mai 2010 à 14:32
Bonjour à tous,

Un petit problème qui me fait tourner en rond :

J'ai un texte dans une cellule td (avec colspan) qui ne se centre pas.
Sous firefox c'est ok par contre sous IE6 impossible de centré (j'ai meme essayé de meme l'attribut align=center directement dans le td).

Voici le code généré :

    
<?xml version="1.0" encoding="ISO-8859-1"?>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR">   
<head>   
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   
<link rel="stylesheet" type="text/css" href="style1.css">   
<script type="text/javascript" src="fonctions.js"></script>   
<script src="roundies.js"></script>   
<script>   
DD_roundies.addRule('div.arrondi', '10px');   
</script>   
<title>Consultation congés équipe </title>   
</head>   
<body>   
<h1><center>Congés de l'équipe</center></h1>   

<div id="bloc1">   
<form name=accueilForm><table id="tableau"><caption>Tableau de l'équipe</caption>32<thead>
<tr align="center"><td colspan="32" class="titre"><div class="titre">texte qui devrait etre centré</div></td></tr></thead>
<tbody><tr><th>Employé</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th><th>15</th><th>16</th><th>17</th><th>18</th><th>19</th><th>20</th><th>21</th><th>22</th><th>23</th><th>24</th><th>25</th><th>26</th><th>27</th><th>28</th><th>29</th><th>30</th><th>31</th></tr><tr><th><div class="employe">Toneatti Seb</div></th><td class="week"></td><td class="week"></td><td class="attente" id="38" onclick="pop(this.id)"></td><td >4</td><td >5</td><td >6</td><td >7</td><td class="week"></td><td class="week"></td><td >10</td><td >11</td><td >12</td><td >13</td><td >14</td><td class="week"></td><td class="week"></td><td >17</td><td >18</td><td >19</td><td >20</td><td >21</td><td class="week"></td><td class="week"></td><td >24</td><td >25</td><td class="refus_s" id="31" onclick="pop(this.id)"></td><td class="accord" id="30" onclick="pop(this.id)"></td><td>28</td><td class="week"></td><td class="week"></td><td>31</td></tr></tbody></table></form></div>   
</body>   
</html>


Le CSS associé :

#tableau   
{   
border:1px solid #CCCCCC;   
border-collapse:collapse;   
/*margin:auto;*/   
margin-left:50px;   
margin-right:50px;   
}   

#tableau td,th   
{   
border:1px solid #CCCCCC;   
border-collapse:collapse;   
/*table-layout:fixed;*/   
width:20px;   
text-align:center;   
}   
.titre   
{   
background-color:#CC0000;   
color:white;   
text-align:center;   
white-space:nowrap;   
}



Petite image du résultat actuel :
http://img153.imageshack.us/img153/4543/tableauov.jpg

Voila je tourne vraiment en rond, c'est peut etre une erreur toute bidon qu'on oeil extérieur (et avisé) pourra remarquer ...

En vous remerciant d'avance,

Cordialement Julien.



5 réponses

mike
 
OU sinon tu as
ca :

<code>
<?xml version="1.0" encoding="ISO-8859-1"?>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR">   
<head>   
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   
<link rel="stylesheet" type="text/css" href="style1.css">   
<script type="text/javascript" src="fonctions.js"></script>   
<script src="roundies.js"></script>   
<script>   
DD_roundies.addRule('div.arrondi', '10px');   
</script>
<style>
#tableau   
{   
border:1px solid #CCCCCC;   
border-collapse:collapse;   
/*margin:auto;*/   
margin-left:50px;   
margin-right:50px;   
}   

td,th   
{   
border:1px solid #CCCCCC;   
border-collapse:collapse;  
}   

.titre   
{   
background-color:#CC0000; 
color:white;   
text-align:center;   
white-space:nowrap;   
}
</style>
<title>Consultation congés équipe </title>   
</head>   
<body>   
<h1><center>Congés de l'équipe</center></h1>   

<div id="bloc1">   
<form name=accueilForm><table id="tableau"><caption>Tableau de l'équipe</caption>32<thead>
<tr align="center"><td colspan="32" class="titre"><center>texte qui devrait etre centré</td></tr></thead>
<tbody><tr><th>Employé</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th><th>15</th><th>16</th><th>17</th><th>18</th><th>19</th><th>20</th><th>21</th><th>22</th><th>23</th><th>24</th><th>25</th><th>26</th><th>27</th><th>28</th><th>29</th><th>30</th><th>31</th></tr><tr><th><div class="employe">Toneatti Seb</div></th><td class="week"></td><td class="week"></td><td class="attente" id="38" onclick="pop(this.id)"></td><td >4</td><td >5</td><td >6</td><td >7</td><td class="week"></td><td class="week"></td><td >10</td><td >11</td><td >12</td><td >13</td><td >14</td><td class="week"></td><td class="week"></td><td >17</td><td >18</td><td >19</td><td >20</td><td >21</td><td class="week"></td><td class="week"></td><td >24</td><td >25</td><td class="refus_s" id="31" onclick="pop(this.id)"></td><td class="accord" id="30" onclick="pop(this.id)"></td><td>28</td><td class="week"></td><td class="week"></td><td>31</td></tr></tbody></table></form></div>   
</body>   
</html>


Donc en faite j'ai juste modificer cette ligne :

#tableau td,th  


en

td,th  
1
mike
 
Salut,

C'est du à ton css, en faite IE n'arrive pas a différencier tes td de ton td class="titre".

Donc quand il voit #tableau td, th avec un witdh a 20, il applique cette taille à toutes tes cases et donc le texte ne peut etre centré.

Si tu veux tester, enlève la width = 20px; et tu veras que ca se centre.
0
Tryphon71 Messages postés 41 Date d'inscription   Statut Membre Dernière intervention   3
 
Salut,

Erf effectivement c'est sa ...

J'avait pourtant tourné le problème sous toutes les coutures mais j'etait passé a coté de sa ...

Merci bien

Par contre, sait tu comment faire pour appliquer le width partout sauf sur le td mis en cause ?

J'ai essayé avec width:0 -> Sa ne marche pas et c'est normal...

De plus avec IE6 qui ne gere pas les sélecteurs d'enfants et descendants c'est un peu galère pour régler le soucis.

Une idée ?
0
mike
 
Une idée ?

Be je dirais de mettre un class identique pour tous les td autres celui avec le texte que tu veux centrer histoire et pour celui que tu veux centré tu lui met un id.

Comme ca tu pourras bien différencier les deux.

C'est pas une super idée mais ca marche, si je trouve mieux je te fais signe.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Tryphon71 Messages postés 41 Date d'inscription   Statut Membre Dernière intervention   3
 
Ok merci beaucoup d'avoir pris sur ton temps pour réfléchir et résoudre mon problème, c'est vraiment sympa.

Ta première solution: mettre des classes partout , j'y avait pensé mais sa alourdit vraiment le code, le rend moins lisible et sa devient vite un énorme pavé pour pas grand chose , voila pourquoi je n'avait pas retenu cette idée (j'avait oublié de spécifier dans mon post : hormis mettre des class partout)

En tout cas deuxième solution adoptée !

Encore merci et bonne journée
0