Considérons l'exemple suivant :
Code :
<html>
<head>
<title>Le titre de la page</title>
<style type="text/css">
legend {
padding: 0px;
margin : 0px;
}
</style>
</head>
<body>
<form name="Form1" method="post" action="page.aspx" id="Form1">
<table style="width: 350px; background-color: green">
<tr>
<td>
<fieldset ><legend><span style="width: 330px; display:block; background-color: yellow">Voilà un texte long, très long, très très long, très très très long, très très très très long<span></legend></fieldset>
</td>
</tr>
<tr>
<td>
<fieldset><legend><span>Voilà un texte court</span></legend></fieldset>
</td>
</tr>
<table>
</form>
</body>
</html>
Si vous ouvrez ce HTML avec FireFox 3.0 vous remarquerez que le texte (très long) de la première ligne du tableau déborde de celui-ci. si je mets "display: inline" (au lieu de block) la largeur du tableau augmente pour accueuillir tout le texte. Or moi je veux que la largeur du tableau reste toujours à 350px et qu'il y ait un saut de ligne quand le texte est tros long pour le tableau.
Avec tous les autres navigateurs, y compris les anciennes versions de Firefox j'obtiens le résultat souhaité.
Comment pourrais-je remédier à la situation et obtenir le bon comportement avec tous les fureteurs, sachant que je ne dois pas abandonner les <fieldset> et les <legend> mais je peux utiliser n'importe quel attribut de style.
Merci par avance
16/07/2008, 17h41
Firefox 3.0 : largeur de ligne dans un tableau
Firefox 3.0 : largeur de ligne dans un tableau
