Création
d'entreprise
Posez votre question Signaler

Centrer texte dans td ie6 [Résolu]

Tryphon71 35Messages postés 29 avril 2010Date d'inscription 26 juillet 2010Dernière intervention - Dernière réponse le 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.
Lire la suite 

Centrer texte dans td ie6 »

5 réponses
Réponse
+1
moins plus
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  
Ajouter un commentaire
Réponse
+0
moins plus
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.
Ajouter un commentaire
Réponse
+0
moins plus
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 ?
Ajouter un commentaire
Réponse
+0
moins plus
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.
Ajouter un commentaire
Réponse
+0
moins plus
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
Ajouter un commentaire
Ce document intitulé « centrer texte dans td ie6 » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?