[Résolu] L'élément caption et les marges négatives sous IE 6 et 7

Salut à tous,

J'ai un tableau de données comportant une marge à gauche. L'élément caption de ce tableau doit être aligné à gauche, à l'extrémité de la marge gauche du tableau. Pour cela, je déclare dans ma CSS la règle suivante :

caption {
  text-align: left;
  margin-left: -14px;
}

Il y a donc une marge négative.

Sous Firefox, Opera, Safari, Chrome et IE 8, aucun problème : j'ai le résultat obtenu. En revanche, IE 6 et 7 ne prennent pas en compte la marge négative (en revanche, ils appliquent sans broncher text-align).

J'ai essayé le décalage par positionnement relatif ; mais, ça ne résout pas le problème.

Ce problème est-il insoluble ?
Modifié par Victor BRITO (30 Apr 2010 - 15:29)

Le positionnement absolu du caption par rapport au tableau ne pourrait pas t'aider ?

phpdoesnotcare a écrit :
Le positionnement absolu du caption par rapport au tableau ne pourrait pas t'aider ?

Non.

a priori le seul truc qui marge/marche , c'est de passer le texte de caption dans un <span> (en block) ou un <p> et de decaller celui-ci avec un positionement relatif pour eviter un clippage .
Si le tableau est denué de bordure et de fond , un padding-left sur les td de la premiere colonne en lieu et place de la marge externe peut suffire ....
GC

Hello Victor,

Et ceci ?

caption { 
  text-align: left; 
  position:relative;
  left: -14px; 
}

<<<EDIT
Cela inclus que tu sors du flux de données si je ne me trompe pas. Donc tu vas devoir compenser sur la droite de 14 px en plus. (width+14)
EDIT;

Bon code et bonne journée à toi.
Modifié par Nolem (29 Apr 2010 - 16:25)

@Nolem , ton code est inoperent dans IE .
Il ne faut pas chercher a styler caption , mais un enfant direct ou laisser faire.
Ensuite , pour eviter le clippage , cet enfant peut-etre effectivement repositionné en relatif et non pas en marge négative .

GC

gc-nomade a écrit :
@Nolem , ton code est inoperent dans IE .
Il ne faut pas chercher a styler caption , mais un enfant direct ou laisser faire.
Ensuite , pour eviter le clippage , cet enfant peut-etre effectivement repositionné en relatif et non pas en marge négative .

GC

Ah oui autant pour moi. J'ai fait ce code sous linux. Je pensais que ça passait. Néanmoins, ça passe sur IE8 bien sûr.

Qu'est farceur ces IE6 et IE7...

J'ai ajouté un élément span dans l'élément caption, où j'ai reporté (pour IE 6 et 7) la marge négative, ajouté le haslayout (avec un display: inline-block) et positionné (un simple position: relative). Et ça résout le problème. Merci, gc-nomade, de m'avoir aiguillé vers une bonne piste.