Comment puis-je obtenir le droit à l'alignement de travailler dans un div à l'intérieur d'une cellule de tableau pour IE 7?

Float:right spécifié pour un div à l'intérieur d'une cellule de tableau ne semble pas avoir d'effet dans IE. J'ai aussi essayé text-align droit, entre autres choses, pour aligner le contenu d'un calque vers la droite, mais sans succès dans IE 7.

Bout de code CSS:

.workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 14px;
    height: 16px;
    text-align: right;
}

div.workload {
    background-color: #E6D7E9;
    text-align: right;
    width: 14px;
    float: right;
}

Extrait de code HTML:

<td class="workloadcell">
    <div class="workload">
        1
    </div>
</td>

À la fois le HTML et le CSS valider, et dans Firefox, le texte s'aligne à droite, comme il se doit. Si vous voulez tester le code complet par copier/coller, c'est par ici:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>Table Test</title>
<style type="text/css">
td {
border: 1px solid black;
}
.workloadcell {
background-color: #E6D7E9;
padding: 0px;
width: 14px;
height: 16px;
text-align: right;
}
div.workload {
background-color: #E6D7E9;
text-align: right;
width: 14px;
float: right;
}
</style>
</head>
<body>
<table>
<tr>
<td>
&nbsp;
</td>
<td colspan="4">
<div>
2008
</div>
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
<td>
<div>
Q1
</div>
</td>
<td>
<div>
Q2
</div>
</td>
<td>
<div>
Q3
</div>
</td>
<td>
<div>
Q4
</div>
</td>
</tr>
<tr>
<td>
workload forecast
</td>
<td class="workloadcell">
<div class="workload">
1
</div>
</td>
<td class="workloadcell">
<div class="workload">
2
</div>
</td>
<td class="workloadcell">
<div class="workload">
2
</div>
</td>
<td class="workloadcell">
<div class="workload">
2
</div>
</td>
</tr>
<tr>
<td>
actual workload
</td>
<td class="workloadcell">
<div class="workload">
3
</div>
</td>
<td class="workloadcell">
<div class="workload">
3
</div>
</td>
<td class="workloadcell">
<div class="workload">
2
</div>
</td>
<td class="workloadcell">
<div class="workload">
3
</div>
</td>
</tr>
</table>
</body>
</html>

(Je sais que le CSS n'est pas optimale en ce sens que les déclarations de classe sont répétées pour plusieurs éléments, mais merci de ne pas commenter sur ce, si elle n'est pas pertinente pour le problème.)

OriginalL'auteur simon | 2009-03-23