Différences entre IE/Firefox et même entre les rafraîchissem
Posté : 03 sept. 2007, 20:17
Bonjour,
Voici mon problème. Dans Explorer, l'affichage est toujours tel que souhaité.
Dans Firefox, ça se complique. J'ai une table dans laquelle je veux afficher plusieurs lignes. Le texte doit être aligné à gauche, les drapeaux à l'extrême droite.
Quand j'ouvre la page avec Firefox, les drapeaux sont sur la ligne du dessous quand le texte est plus long. Mais le plus bizarre, c'est que sur mon site, j'accède à cette page via un menu. Or, quand je passe par le menu et que ma cache est vide, j'ai le problème. Mais quand je passe par le menu et que j'ai déjà affiché cette page sans avoir vidé ma cache, l'alignement est identique à ce que j'obtiens dans Internet Explorer! Par contre, si je fais un rafraîchissement, l'alignement est systématiquement incorrect, peu importe que la cache soit vide ou pas.
Je suis vraiment à court d'idées. Voici le lien vers le résultat et voici le code sous-jacent, html et css:
Quelqu'un aurait-il une idée? 
Merci!
Voici mon problème. Dans Explorer, l'affichage est toujours tel que souhaité.
Dans Firefox, ça se complique. J'ai une table dans laquelle je veux afficher plusieurs lignes. Le texte doit être aligné à gauche, les drapeaux à l'extrême droite.
Quand j'ouvre la page avec Firefox, les drapeaux sont sur la ligne du dessous quand le texte est plus long. Mais le plus bizarre, c'est que sur mon site, j'accède à cette page via un menu. Or, quand je passe par le menu et que ma cache est vide, j'ai le problème. Mais quand je passe par le menu et que j'ai déjà affiché cette page sans avoir vidé ma cache, l'alignement est identique à ce que j'obtiens dans Internet Explorer! Par contre, si je fais un rafraîchissement, l'alignement est systématiquement incorrect, peu importe que la cache soit vide ou pas.
Je suis vraiment à court d'idées. Voici le lien vers le résultat et voici le code sous-jacent, html et css:
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"><head><title>Voici mon bogue</title>
<link rel="stylesheet" href="bogue.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body class="large">
<div class="bodystyle">
<div id="corps">
<table class="grandetable">
<tbody>
<tr class="titre">
<th></th>
<th>Équipe 1</th>
<th>****</th>
<th>****</th>
<th>****</th>
</tr>
<tr class="d0">
<td class="colonnegauche">Liste</td>
<td class="colonnedata">
<div class="container">
<div class="left-element">1. Zinedine Zidane (FRA)</div>
<div class="right-element"><img src="images/drapeaux/fr.gif"></div>
<br style="clear: both;">
</div>
<div class="container">
<div class="left-element">2. David Beckam (GBR)</div>
<div class="right-element"><img src="images/drapeaux/gb.gif"></div>
<br style="clear: both;">
</div>
</td>
<td class="colonnedata"></td>
<td class="colonnedata"></td>
<td class="colonnedata"></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Code : Tout sélectionner
/****************************************
Corps, en-tête et pied de page
*****************************************/
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
margin-top: 20px;
margin-bottom: 20px;
}
/* Là où il y a du texte. Inclut l'en-tête, le pied de page et le corps */
.bodystyle {
margin-left: 50px;
margin-right: 50px;
}
/****************************************
Tables
*****************************************/
table {
border-spacing: 3px;
margin-top: 10px;
margin-bottom: 10px;
}
td.connexion {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
vertical-align: top;
}
table.grandetable {
margin: auto;
}
caption {
font-weight: bold;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
}
th.espace {
font-family: Arial, Helvetica, sans-serif;
font-size: 110%;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
tr.titre th {
font-family: Arial, Helvetica, sans-serif;
background-color: #99CCFF;
color: #000000;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
font-size: 110%;
}
tr.d0 td {
font-family: Arial, Helvetica, sans-serif;
background-color: #CCDDFF;
color: #000000;
font-size: 0.8em;
vertical-align: top;
}
/* Pour la première colonne d'une table */
.colonnegauche {
font-weight: bold;
padding-right: 5px;
text-align: right;
}
/* Pour éviter que les données ne soient trop collées dans une table avec
beaucoup d'information */
.colonnedata {
padding-left: 4px;
padding-right: 4px;
}
.container {
}
.left-element {
float: left;
}
.right-element {
padding-left: 2px;
float: right;
}
.clear {
clear: both;
}
Merci!