28172 sujets

CSS et mise en forme, CSS3

Hello

voici 4h que j passe à chercher sur le sujet, et pas trouvé de solution. J'espère que quelqu'un pourra m'aider.

j'ai pour tester simplifié au maximum mon code afin de bien isoler le problème

pour commencer voici mon code :
<html>
<body style='background-color:yellow;'>
<div style='border:1px solid red;'>
<table style='border:1px solid blue;'>
<tr>
<td>1111111111111111111111111</td>
<td>1111111111111111111111111</td>
<td>1111111111111111111111111</td>
<td>1111111111111111111111111</td>
<td>1111111111111111111111111</td>
<td>1111111111111111111111111</td>
<td>1111111111111111111111111</td>
<td>1111111111111111111111111</td>
<td>1111111111111111111111111</td>
<td>1111111111111111111111111</td>
<td>1111111111111111111111111</td>
<td>1111111111111111111111111</td>
<td>1111111111111111111111111</td>
<td>1111111111111111111111111</td>
<td>1111111111111111111111111</td>
<td>1111111111111111111111111</td>
<td>1111111111111111111111111</td>
</tr>
</table>
123
</div>
</body>
</html>


Pour visualiser :
http://83.143.18.62/test_html.html

Maintenant l'explication du problème :
mon div conteneur ne suit pas la largeur du tableau quand celui ci grandit. Résultat : impossible de me servir de ce div pour faire un header joli (ou alors il se limite à 100% alors que le tableau occupe 150% de la table)

La question est : quel attribut faudrait-il ajouter à mon tableau ou à mon div pour que le div prenne la bonne largeur. (en gros j veux que le rouge soit aussi grand que le bleu)

Merci d'avance
Modifié par stazcek (20 Aug 2008 - 09:22)
petite précision : le probleme existe sur FF 2 et 3, safari 3, Opera 9.5.

Bizarrement sous IE7 ca s'est affiché juste, alors que la page qui m'a posé problème à l'origine (donc avant simplification) ne fonctionnait pas non plus sous IE7.
Bonjour,

stazcek a écrit :
petite précision : le probleme existe sur FF 2 et 3, safari 3, Opera 9.5.

Bizarrement sous IE7 ca s'est affiché juste

Alors en fait c'est l'inverse:
- le rendu sur Firefox, Safari et Opera est correct (même s'il ne te convient pas);
- le rendu sur IE7 est incorrect (même s'il te convient).

Le rendu buggué dans IE7 est soit dû à des bugs inhérents à cette version du navigateur, soit au fait que ta page est interprétée en mode «Quirks», à cause de l'absence de Doctype. À retenir: même pour des tests, ne jamais travailler sans Doctype ou avec une page invalide.

Pour les solutions à ton problème:
- soit c'est un cas marginal pour ton site, et tu ne t'en occupes pas plus que ça;
- soit tu passes ton conteneur DIV en display: table (non compris par IE 6 et 7).
Florent V. a écrit :
Bonjour,



- soit tu passes ton conteneur DIV en display: table (non compris par IE 6 et 7).


et donc sous IE 6 et 7 on fait comment ?

J'ai la même problématique (ie un tableau dans un div) et j'ai besoin que la largeur s'adapte au contenu.

Et forcément l'application est uniquement pour IE 6 et 7 Smiley bawling