En fait, il s'agit d'un span flottant dans un autre conteneur. Voici le code en question... pas grand chose à en dire :
<!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">
<head>
<style type="text/css">
#container {
border: 1px solid red;
background-color: #FF8080;
}
#inside {
border: 1px solid green;
background-color: #80FF80;
float: right;
}
</style>
</head>
<body>
<div id="container">
Quelque chose ici
<span id="inside">Quelque chose d'autre</span>
</div>
</body>
</html>
Dans un Firefox 3 et un IE 7, le span se retrouve sous "quelque chose ici", à sa droite; dans Firefox 3.1 et Chrome, il se trouve directement à sa droite, sur la même ligne.
Une idée du pourquoi du comment ? Et surtout, comment rendre ça multi-navigateurs ?
Une solution pour contourner le problème consiste à encapsuler mon texte "Quelque chose ici" dans un div, mais je ne trouve pas ça très élégant.
Pour dire vrai, le nouveau comportement me plait bien; mais le véritable problème consiste à garder un affichage cohérent entre tous les navigateurs.
2 réactions
1 De clark - 29/12/2008, 10:50
Je ne sais pas répondre à ta question parce que je ne sais pas si le moteur de rendu est sensé choisir un "display par défaut" à un noeud texte (j'ai l'impression que c'est là le coeur du problème).
De manière complètement pragmatique, tu peux regarder ce que donne ça dans firefox 3.1, ça te donnera peut-être des idées :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w3.org/TR/xhtml1/DTD/...
<html xmlns="www.w3.org/1999/xhtml&quo...
<head>
<style type="text/css">
#container {
border: 1px solid red;
background-color: #FF8080;
}
#container * {
float: left;
padding: 0;
margin: 0;
}
#inside {
border: 1px solid green;
background-color: #80FF80;
float: right;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="container">
1
<span>Quelque chose ici</span>
2
<span id="inside">Quelque chose d'autre</span>
3
</div>
</body>
</html>
2 De Stéphane Deschamps - 04/03/2009, 17:46
En déclarant un display:block sur le span, tu as essayé ?