28172 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement absolu dans case de tableau

Bonjour à tous,

je rencontre un problème de positionnement dans un tableau. En effet dans une case de tableau je souhaite positionner un div : 

<tr>
                        <td class="zone">aaaaa</td>
                        <td colspan="24" class="hours">
                            <div class="event curPrevu" style="left:704px;width:176px;">
                                XXXXXXX
                                <img src="pub/struct/images/info.png"  height="16" width="16" alt="" class="infoTrigger" />
                                <div class="tooltip" style="display:none;">
                                    Lieu : XXXXXXXx
                                </div>
                            </div>
                        </td>

                    </tr>



Ma case de tableau est positionné en relatif tout comme le tableau lui même : 
#calendar td.hours{
    width           : 1056px;
    height          : 30px;
    background      : url(../images/bg_cal.gif) repeat;
    border-bottom   : 2px solid #bdb3a9;
    position        : relative;

}

#calendar .event{
    /*float               : left;*/
    position            : absolute;
    min-height          : 30px;
    text-align          : center;
    -moz-border-radius  : 0 10px 10px 10px;
    -webkit-border-bottom-right-radius:10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    font-size           : 11px;
}

Donc à priori le div positionné en absolu dans cette case devrais avoir pour référentiel , la case , j'ai bon ?
Le problème étant que ce n'est pas du tout le cas , mes div reste référencé sur le body et je ne comprend pas pourquoi.

Y'a t'il un souçis avec les tableaux et le positionnement absolu ?

Vous pouvez voir un essai ici : http://www.lanforums.com/upload/cal/

Merci pour vos éventuelles suggestions
Modifié par grunky (26 Aug 2010 - 14:45)
Je me répond , venant de trouver la solution.

Il semblerait que firefox n'autorise pas le positionnement relatif d'une cellule de tableau : 

<tr>
    <td style="position:relative">
        <div style="position:absolute"></div>
    </td>
</tr>


Fonctionnera sous IE mais pas FF (pas tester sur les autres encore). L'astuce consiste donc à déporter la position relative sur un élément à l'interieur de la cellule, ici un div qui prendra toute la case : 

<tr>
<td >
    <div style="position:relative;width:100%">
        <div style="position:absolute"></div>
    </div>
</td>
</tr>

Modifié par grunky (26 Aug 2010 - 14:45)
Sujet clos
Aller à