Positionnement absolu dans un tableau

Bonjour,

J'ai un problème concernant le positionnement absolu dans les cellules de tableaux.

Effectivement, si on crée une div que l'on place dans une cellule de tableau avec un positionnement absolu, celui-ci fonctionne parfaitement bien sur Google Chrome et Internet Explorer, mais absolument pas avec Firefox et Safari... Ces derniers n'acceptent pas le positionnement absolu à l'intérieur des tableaux, j'ai déjà vu des cas semblables dans d'autres topics.

Alors que faire ? J'ai donc emboîté ma div absolue dans une nouvelle div en position relative que j'ai placée dans la cellule. Là, ça continue de marcher avec Chrome et IE, ça fonctionne cette fois-ci avec Safari parfaitement normalement, et on constate effectivement que cette fois-ci Firefox place la div DANS le tableau et non pas à côté mais...pas au bon endroit...

Vous pouvez regarder dans ma page de test ici avec FF et comparer avec les autres : http://vie-de-geek.com/test.php
Normalement, vous devriez voir une fenêtre genre windows avec un bouton rétrécir qui se trouve en haut, tandis qu'il est en plein milieu avec FF

Merci d'avance de vos idées,

7804j

J'ai finalement mis un bout de Javascript pour corriger le bug de firefox.

Bonjour,

Je ne sais pas si la spec dit qu'une cellule de tableau peut être positionné. Il me semble que ce n'est pas le cas en CSS 2.1. Donc le comportement de Firefox et Safari me semble normal.

Ensuite, quand tu places un DIV positionné (en relatif) dans ta cellule de tableau, il s'avère que ce DIV se retrouve au milieu de la hauteur de la cellule car ta cellule de tableau est en vertical-align:middle (valeur par défaut). Donc le comportement obtenu dans Firefox est correct, et je m'étonne un peu que ça donne quelque chose de différent dans Safari.

Enfin bref, quoi qu'il en soit il reste qu'utiliser un tableau pour effectuer ce type de mise en page c'est un peu has been quand même. Dans l'idéal, on utilisera plutôt un peu de CSS3 (border-image serait parfait pour ça, mais même IE9 ne le supporte pas; à défaut, du border-radius + box-shadow ça peut donner quelque chose de correct). Si on veut une solution CSS 2.1, un conteneur unique positionné en relatif et quelques éléments de décoration positionnés en absolu, ça peut être pas mal.

Merci de ta réponse.

Non, je ne dis pas que la spec dit qu'elle devrait pouvoir l'être, mais rien n'empêche aux navigateurs de combler par eux-mêmes certains défauts ou manques du CSS, ce qu'ont d'ailleurs fait Google Chrome et Internet Explorer (bien que j'aurais plutôt eu envie de parler de bug dans le cas d'internet explorer, vu que je vois peu souvent des initiatives d'améliorations de leur part ^^'). Je pensais simplement que si Chrome le faisait, FF le ferait aussi et Safari de même.

Maintenant oui, c'est vrai que si on a vertical-align:middle il est normal que cela se place au milieu avec FF et je suis étonné que ce ne soit pas le cas avec les autres. La valeur par défaut serait différente ?

J'ai aussi, comme toi, pensé au border-image puis bien sûr à IE9 qui casse tout, puis à border radius et box-shadow mais j'avais déjà les images et l'effet identique serait difficile à programmer. Je me suis ensuite tourné vers les divs, mais là, bug à nouveau et ça fonctionnait pas sans javascript...Ou en tout cas, je ne savais pas comment faire fonctionner.

Je vais donc essayer d'enlever ce vertical-align.

Erf, je suis toujours coincé mais cette fois-ci face à un autre problème.

Toujours sur la même page, on peut constater que le contenu de mes fenêtre dépasse la largeur disponible, alors que j'ai défini width:100%. J'ai donc essayé de mettre une marge de 40px pour compenser cette différence, sans effet. J'ai ensuite essayé de placer une div de largeur de 40px à droite pour que le 100% représente 40px de moins en longeur, sans effet.

Mais ce n'est pas tout ==> concernant la hauteur, sur Safari et Chrome le conteneur dépasse de la fenêtre, tandis que sur Firefox et IE, le conteneur ne prend même pas toute la taille de la fenêtre, alors que j'ai mis height:100%...

Pour afficher ma fenêtre sur ma page de test, cliquez sur le bouton "cliquer ici" et elle apparaîtra.

Enfin bref, je sais qu'utiliser des tableaux n'est pas la meilleure des idées, mais ce que j'avais tenté auparavant ne me donnait pas de résultats bien plus concluants...

Merci d'avance si quelqu'un a aurait une idée.



EDIT : Bon, j'ai finalement décidé de laisser tomber les tableaux et de passer aux simples divs et de réparer les bugs avec du js...
Modifié par 7804j (09 Jul 2011 - 10:59)