Width 100% sous IE

Bonjour,

Je souhaite placer un tableau occupant toute la zone de contenu en largeur dans un site en largeur fluide pourvu de 2 colonnes placées en float.

Sous IE 5.x, le tableau prend la taille de tout le site et non de son conteneur, ce qui le décale en dessous des colonnes.

J'avais déjà eu le pb, mais pas moyen de retrouver le post en question.

Merci pour votre aide
Modifié par nicolas.charlot (08 Oct 2006 - 00:49)

nicolas.charlot a écrit :
Je souhaite placer un tableau occupant toute la zone de contenu en largeur dans un site en largeur fluide pourvu de 2 colonnes placées en float.

Voilà une phrase qui met en route l'alarme du détecteur de confusions dangereuses.

Des colonnes de tableau en float ?
À ma connaissance, ça n'existe pas.
Soit on utilise un tableau HTML, à deux colonnes ; soit on utilise deux blocs HTML (par exemple des div) que l'on veut faire apparaître « en colonnes », le plus souvent en utilisant le positionnement flottant.

Si tu pouvais 1) préciser dans laquelle des deux situations tu te trouves et 2) donner plus d'éléments (code, page de test en ligne, etc.), je crois qu'on avancerait bien.

Je précise, admettons que je travaille sur le gabarit "largeur fluide / colonnes flottantes" ici.

Au centre (ce que moi j'appelle le contenu), je souhaite afficher un simple tableau, non pas pour m'aider à positionner, mais bien parce-que ce sont des données tabulaires.
Ce tableau, je voudrais qu'il occupe toute la largeur du div #centre. Un simple width: 100% suffit pour obtenir ce résultat sous IE6, Fx, mais pose problème sous IE5. Sous IE5, le tableau prend toute la largeur du conteneur général, ce qui fait qu'il se retrouve en dessous.

A priori, il faudrait trouver le moyen qu'IE5 calcule cette largeur par rapport au parent direct (#centre).

Voilà, j'espère m'être mieux exprimé
Modifié par nicolas.charlot (04 Oct 2006 - 14:35)

nicolas.charlot a écrit :
Je précise, admettons que je travaille sur le gabarit "largeur fluide / colonnes flottantes" ici.

Au centre (ce que moi j'appelle le contenu), je souhaite afficher un simple tableau, non pas pour m'aider à positionner, mais bien parce-que ce sont des données tabulaires.
Ce tableau, je voudrais qu'il occupe toute la largeur du div #centre. Un simple width: 100% suffit pour obtenir ce résultat sous IE6, Fx, mais pose problème sous IE5. Sous IE5, le tableau prend toute la largeur du conteneur général, ce qui fait qu'il se retrouve en dessous.

A priori, il faudrait trouver le moyen qu'IE5 calcule cette largeur par rapport au parent direct (#centre).

Voilà, j'espère m'être mieux exprimé

Beaucoup plus clairement : maintenant c'est limpide.

Par contre, identifier la source du bug risque d'être plus compliqué. Je crois que pour ça il va nous falloir ton code (HMTL + CSS) ou bien une page de test en ligne pour pouvoir constater le problème et surtout voir quels sont les paramètres de la mise en page.

Le bloc du milieu est-il positionné au centre via des marges, comme dans le gabarit sur Alsa ? Ou bien est-il flottant, ou encore évite-t-il de passer sous les flottants grâce à un contexte de formatage ?

Le bloc du milieu est effectivement positionné via des marges.

nicolas.charlot a écrit :
Le bloc du milieu est effectivement positionné via des marges.

Que se passe-t-il si tu appliques un zoom: 1; sur ce bloc du milieu ? Avec IE 5 ou 5.5 (je ne sais pas lequel pose problème dans ton cas).

Pour tester sous IE5.x, j'ai installé Win98 via QEmu sous Ubuntu. Je crois avoir entendu parler d'une appli en ligne pour faire ça, tu connais mpop ?

nicolas.charlot a écrit :
Pour tester sous IE5.x, j'ai installé Win98 via QEmu sous Ubuntu. Je crois avoir entendu parler d'une appli en ligne pour faire ça, tu connais mpop ?

Moi j'ai installé IE 5.0, IE 5.5 et IE 6.0 sous ubuntu (avec Wine) via IEs4Linux
http://www.tatanka.com.br/ies4linux/page/Main_Page

Au risque de me répéter, si tu as une page de test en ligne reproduisant le bug...

Désolé pour la page de test, mais c'est impossible.

Pour ce qui de mettre zoom: 1; sur le bloc #centre, ça ne semble pas fonctionné.

nicolas.charlot a écrit :
Désolé pour la page de test, mais c'est impossible.

Bon, eh bien je crois que je ne peux plus rien pour toi.

Le pb, c'est qu'il s'agit du site d'un client et que si je met un lien, on va retrouver ce topic dans les résultats de Google lorsque l'on saisiera le nom du client.

Le forum Alsacreations est logiquement bien page ranké.

La solution serait de nettoyer le code html et css, mais là c'est une question de temps. Je vais essayer de fournir le code épuré dés que possible
Modifié par nicolas.charlot (06 Oct 2006 - 20:59)

nicolas.charlot a écrit :
Je précise, admettons que je travaille sur le gabarit "largeur fluide / colonnes flottantes" ici.

Je partirai donc de ça...

Comme je n'ai pas les version antérieure à IE6 je me suis contenté de faire basculer celui ci en mode quirck, j'ai viré la DTD de l'exemple de Raphaël, il va être vénère grave sur ce coup là

Bon, en rajoutant une <table> dans <div id="center"> avec css width:100%; et zoom:1; sur #center ce que Mpop espérait se produit bien et les choses rentrent dans l'ordre.

D'où la question nicolas : #centre est il bien dans ton cas parent direct de la <table> concernée ?

nicolas.charlot a écrit :
Le pb, c'est qu'il s'agit du site d'un client et que si je met un lien, on va retrouver ce topic dans les résultats de Google lorsque l'on saisiera le nom du client.

Le forum Alsacreations est logiquement bien page ranké.

Solutions : donner un lien en texte à recopier (insérer n'importe quel caractère devant le http pour éviter la mise en lien).
Exemple pour mon site : -http://www.covertprestige.info

Et comme rien n'oblige à donner le nom du client dans le sujet du forum...

Ca fonctionne avec le width: 100% en plus du zoom: 1.

Un grand merci.

Oups, j'ai parlé un peu vite, en fait ça fonctionne sous IE5, mais maintenant j'ai un problème équivalent sous Firefox et IE6...

Peut-être qu'il faut simplement avoir recour aux commentaires conditionnels...

mpop a écrit :

Solutions : donner un lien en texte à recopier (insérer n'importe quel caractère devant le http pour éviter la mise en lien).
Exemple pour mon site : -http://www.covertprestige.info

Et comme rien n'oblige à donner le nom du client dans le sujet du forum...

Ca poserait des problèmes de confidentialité, éventuellement.
Dans ce cas, une copie du projet dans laquelle on peinturlure les images avec d'affreux dégradés et couleurs vives (l'important, ce sont les dimensions des images) + Lorem ipsum pour le texte, le tout sur n'importe quel compte Free ...

Sans cela, ce sera toujours autant impossible/peu pratique/perte de tempsesque de répondre au problème posé (rayer la ou les mentions inutiles)
Modifié par Felipe (08 Oct 2006 - 01:47)