Bonjour à tous,
après pas mal d'heures passé sur ce site, après la lecture (entre autre) de http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html et du PPT de présentation "Vive les tableaux" de Raphaël, j'ai décidé de passer à cette technique pour ma refonte de l'IHM de mon site www.footballamericain.com .
Tout va bien, sauf que mon tableau de classement en bas de page apparait sous IE8 comme si on était sous IE7.
En fait, ma div division-tables est marqué en display:table et mes tables HTML en display:table-cell. Malheureusement, IE8 (qq soit le mode de comptabilité choisi, je les ai tous essayés !) ne prend pas en compte table-cell dans ce cas précis. Donc je me dis que c'est peut être dû au fait que je surcharge un TABLE avec cette propriété CSS. (c'est vrai qu'il est peut être un peu tordu de dire qu'un TABLE est une CELLULE
)
Sinon autre point, mais là sur tous les navigateurs, je n'arrive pas à déterminer la largeur de mon tableau.
J'ai beau mettre width:25% ou en px, Il décide de me fixer une largeur arbitraire. Serait-ce un effet de bord pour les TABLES ?
Je vais déjà essayé avec la solution proposée ici mais elle ne semble pas fonctionner pour tout le monde.
Merci pour votre aide,
Bonne soirée
PFF
EDIT :
On peut dire que la soirée a porté ses fruits même si je n'ai pas tout compris.
En fait, j'ai passé mes tables "table-cell" à "normal" et je les ai entourés d'une div qui elle est table-cell.
Ca passe !
Autre problème, ma DIV de gauche fait 665px. Donc je me disais que ma DIV "divisions-tables" avec l'attribut display:table; pouvait faire cette largeur. Et bien non. Je devais descendre la largeur à 645px pour que ca ne soit pas poussé par la DIV de droite !
En désespoir de cause, j'ai viré purement et simplement le display:table; et là miracle ! Tout fonctionne.
Il m'avait pourtant semblé comprendre que si on a des table-cell dans un flux il fallait les entourer d'un parent "table". J'ai dû mal comprendre
Il me reste une dernière interrogation : la largeur de mes cellules (qui contiennent mes tables html) s'auto-dimensionnent à 160px. Or 160x4 fait 640 et pas 665. Pourquoi les 25px restants ne sont pas mis à profit ? (3x6px et 1x7px). Du coup j'ai un espace vide à droite, pas dérangeant mais j'imagine que ça peut le devenir rapidement.
Merci
Modifié par kileak (29 Nov 2012 - 23:49)
après pas mal d'heures passé sur ce site, après la lecture (entre autre) de http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html et du PPT de présentation "Vive les tableaux" de Raphaël, j'ai décidé de passer à cette technique pour ma refonte de l'IHM de mon site www.footballamericain.com .
Tout va bien, sauf que mon tableau de classement en bas de page apparait sous IE8 comme si on était sous IE7.
En fait, ma div division-tables est marqué en display:table et mes tables HTML en display:table-cell. Malheureusement, IE8 (qq soit le mode de comptabilité choisi, je les ai tous essayés !) ne prend pas en compte table-cell dans ce cas précis. Donc je me dis que c'est peut être dû au fait que je surcharge un TABLE avec cette propriété CSS. (c'est vrai qu'il est peut être un peu tordu de dire qu'un TABLE est une CELLULE
)Sinon autre point, mais là sur tous les navigateurs, je n'arrive pas à déterminer la largeur de mon tableau.
J'ai beau mettre width:25% ou en px, Il décide de me fixer une largeur arbitraire. Serait-ce un effet de bord pour les TABLES ?
Je vais déjà essayé avec la solution proposée ici mais elle ne semble pas fonctionner pour tout le monde.
Merci pour votre aide,
Bonne soirée
PFF
EDIT :
On peut dire que la soirée a porté ses fruits même si je n'ai pas tout compris.
En fait, j'ai passé mes tables "table-cell" à "normal" et je les ai entourés d'une div qui elle est table-cell.
Ca passe !
Autre problème, ma DIV de gauche fait 665px. Donc je me disais que ma DIV "divisions-tables" avec l'attribut display:table; pouvait faire cette largeur. Et bien non. Je devais descendre la largeur à 645px pour que ca ne soit pas poussé par la DIV de droite !
En désespoir de cause, j'ai viré purement et simplement le display:table; et là miracle ! Tout fonctionne.
Il m'avait pourtant semblé comprendre que si on a des table-cell dans un flux il fallait les entourer d'un parent "table". J'ai dû mal comprendre
Il me reste une dernière interrogation : la largeur de mes cellules (qui contiennent mes tables html) s'auto-dimensionnent à 160px. Or 160x4 fait 640 et pas 665. Pourquoi les 25px restants ne sont pas mis à profit ? (3x6px et 1x7px). Du coup j'ai un espace vide à droite, pas dérangeant mais j'imagine que ça peut le devenir rapidement.
Merci
Modifié par kileak (29 Nov 2012 - 23:49)