28172 sujets

CSS et mise en forme, CSS3

Table dans un div : comportement différent IE / Firefox

Bonjour,

bon, c'est pas la premiere ni la derniere fois qu'on va voir que Firefox et IE n'ont pas le meme comportement !!
mais pour une fois, celui d'IE me plait plus (meme si c'est Firefox qui doit faire le bon truc !)

j'ai un tableau (balise <table>) contenu dans un <div>.

Mon tableau est variable, lorsqu'il est trop large (besoin de la barre de défilement du bas), il fait 'exploser le div', enfin normalement...

sous IE, le <div> 'suit' mon tableau : le <div> va alors s'arreter apres mon tableau. Si mon <body> a un fond blanc et mon <div> un fond bleu, le fond de mon tableau reste du bleu... (j'ai pas de fond pur mon <table>)

sous Firefox, le <div> ne bouge pas. Mon tableau sort largement de l'écran (vers la droite) mais le <div> est resté bien tranquille.
Si mon <body> a un fond blanc et mon <div> un fond bleu, le fond de mon tableau est bleu au départ, puis blanc là où s'arrete le <div>... (j'ai pas de fond pur mon <table>)

Que faire pour que mon <div> suive mon tableau quoiqu'il arrive ?

Merci de vos conseils.


mon code :
<div id="conteneur">
 <div id="contenu"
  <table class="resu_palo">
    <tr> ....</tr>
  </table>
 </div>
</div>


et le CSS :
#conteneur {
	width : 100%;
}

#contenu {
	/*position: relative;*/
	z-index: auto;
	top : 0px;
	margin : 25px 10px 0 10px;
	padding: 5px 15px;
	color: #000;
	background-color: #DDDDDD;
	border: 1px solid #A5B8E3;
}
table {
	margin : auto;
	margin-top : 25px;
	border-collapse: collapse;
	border : 2px solid #A5B8E3;
}
Hello,

IE agrandit les éléments pour qu'ils contiennent l'ensemble de leurs enfants, sans tenir compte de la taille définie pour cet élément (ce qu'il ne devrait pas faire).

Toi tu a ici défini un width:100% à ton conteneur, c'est à dire la largeur jusqu'à laquelle il peut s'agrandir (la fenetre de ton navigateur au maximum).
Firefox garde cette largeur quoiqu'il arrive, IE l'agrandit.
Si tu veux que Firefox l'agrandisse aussi, remplace width par min-width, ainsi elle aura toujours une taille minimum de 100% mais s'agrandira en fonction du contenu.

IE6 ne connait pas min-width, il ne va rien en faire de particulier, le probleme c'est que comme tu a enlevé le width, il ne va pas commencer à 100% non plus... Pas grave si tes tableaux sont toujours grand, mais problématique sinon.
Pour contourner ce probleme il faut que tu laisse un width:100% pour IE uniquement (plein de méthodes pour faire ça, la meilleure restant les commentaires conditionnels)
merci pour tes explications.

je n'arrive pas à faire fonctionner min-width.... le comportement est le meme
Quel est le type d'informations qui sont affichées dans ton tableau ?
Est-ce des images ou de longs liens qui ne peuvent passer à la ligne, ou bien juste du texte ?

Et d'une manière plus générale, aurais-tu une page en ligne ?
non je n'ai pas de page en ligne.

les infos sont de simples chiffres, mais c'est le nombre de colonnes du tableau qui peut être important (le tableau est variable selon des parametres en base de données)
Sujet clos
Aller à