Discussion :

[Ludix]

Bonjour,

Je suis pas une lumière en CSS mais là je bute sur un os....

J'ai une feuille de style :

Code :

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

1
2
 
.tableau td {width:20px; height:20px; text-align:center;}

et côté html un tableau :

Code :

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

1
2
3
4
5
 
<table class='tableau'>
	<tr><td colspan='1'></td><td width='80%' colspan='10'>2010</td><td colspan='1'></td></tr>
	<tr><td>J</td><td>F</td><td>M</td><td>A</td><td>M</td><td>J</td><td>J</td><td>A</td><td>S</td><td>O</td><td>N</td><td>D</td></tr>
</table>

tout cela a l'air simple, hein ?

Mais pas pour IE ....
Ce $%!# de navigateur refuse de m'aligner le texte de l'année...

Et là ben je seche....
Z'auriez pas une solution ?

[varex]

Bonjour,

dans le td de l'année, tu définis la largeur. Etant donné que tu utilises les css, autant en profiter pour tout cette information dedans.

donc, on a le code suivant :

CSS :

Code :

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

1
2
3
 
.tableau td {width:20px; height:20px; text-align:center;}
.tableau td.annee {width:80%;}

HTML :

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
 
<table class='tableau'>
        <tr>
            <td></td>
            <td class="annee" colspan='10'>2010</td>
            <td></td>
        </tr>
        <tr>
            <td>J</td>
            <td>F</td>
            <td>M</td>
            <td>A</td>
            <td>M</td>
            <td>J</td>
            <td>J</td>
            <td>A</td>
            <td>S</td>
            <td>O</td>
            <td>N</td>
            <td>D</td>
        </tr>
    </table>

J'ai testé sur IE6, 7 et 8, l'année est bien centrée, sur FF3 aussi

[Ludix]

Effectivement, je n'avais pas pensé à la sous-classe CSS...
Comme je le disais je ne suis pas une lumière en CSS...

Le résultat est effectivement meilleur mais pas parfait.
En effet, quand je change le width 80% en width 200px, le même code sous Chrome aligne l'année avec les mois de Juin-Juillet (logique).
Mais IE (encore lui) aligne l'année avec les mois de Mai-Juin

Voici le nouveau code :

CSS :

Code :

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

1
2
3
 
.tableau td {width:20px; height:20px; text-align:center;}
.tableau td.annee {width:200px;}

HTML :

Code :

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

1
2
3
4
5
 
<table class='tableau'>
	<tr><td colspan='1'></td><td class='annee' colspan='10'>2010</td><td colspan='1'></td></tr>
	<tr><td>J</td><td>F</td><td>M</td><td>A</td><td>M</td><td>J</td><td>J</td><td>A</td><td>S</td><td>O</td><td>N</td><td>D</td></tr>
</table>

Est-ce un bug de IE ou quoi ? (je précise que j'ai IE7)