La légende des tableaux, <caption>

Bonjour à tous,
J'ai un problème avec l'élément <caption> des tableaux (légende des tableaux).
Pour espacer la légende du tableau, j'ai indiqué un margin-bottom:20px. C'est reconnu par FF, mais pas par IE.
Quel pourrait-être la solution ?

Deuxième question, caption est bien un élément block ? Je ne l'ai pas vu dans la liste des rendus

Bonjour,

Pour ta deuxième question, caption a comme rendu par défaut:

display: table-caption;

Firefox style ça par défaut ainsi:

(Firebug, CSS, Options, Show User Agent CSS)

Bonjour,

Je me trouve actuellement dans la même situation que krakkos et je ne trouve aucune solution

J'ai déjà posté un sujet sur le site du zéro:

http://www.siteduzero.com/forum-83-449284-p1-css-affecter-une-marge-a-un-caption-sous-ie7.html

Mais sans succès

Si quelqu'un peut éclairer ma lanterne, il est le bienvenu!

Merci d'avance

Bonjour,

Merci de vien vouloir réexpliquer votre problème ici.

Bonjour à tous,

Je suis en train de créer une appli web pour le boulot et je suis confronté à un ridicule petit problème...

J'ai une liste d'utilisateur dans un tableau auquel j'ai mis un <caption>. Je n'ai aucun soucis pour lui affecter certaines propriétés CSS (border , text-align , font-style , etc.) mais par contre, impossible de lui affecter une marge

Je pense que le problème vient du navigateur (IE7, imposé) qui doit probablement considérer cette balise comme une balise de type inline.

Je voulais donc confirmation de mes suspicions et surtout savoir s'il y avait moyen de "contrer" ce malheureux comportement.

Merci d'avance

<table id="gestion_utilisateur">
  <caption>Liste des utilisateurs</caption>
					
  <tr class="impair">
    <th>Nom</th>
    <th>Prénom</th>
    <th>Stage(s)</th>
    <th>Droit</th>
    <th>Modifier</th>
    <th>Supprimer</th>
  </tr>
  
  <tr class="pair">
    <td>UN NOM</td>
    <td>Un Prénom</td>
    <td>Stage(s)</td>
    <td>Admin</td>
    <td>Modifier</td>
    <td>Supprimer</td>
  </tr>

caption
{
	/* Texte */
	text-align: left;
	font-style: italic;
	
	/* Marges & Dimensions */
	margin-bottom: 20px;
	
	/* Bordure */
	border-bottom: 1px solid #333;
}

Modifié par Mandi_REPS (20 Oct 2009 - 11:54)

Tu peux essayer d'ajouter display:bloc; à ton caption s'il ne s'agit que d'un problème de display.

J'avais déjà testé sans succès...

Le comportement de la balise <caption> semble bien particulier.

En essayant d'ajouter une marge haute à la première ligne du tableau, ça ne fonctionne pas non plus

C'est vraiment énervant et j'ai beau parcourir le web, je ne trouve rien

Un petit UP parce que je sèche vraiment (oui oui, même s'il pleut ).

Merci d'avance

Bonjour,

Il y a toujours la solution de jouer sur le line-height de l'élément. Ce n'est certes pas parfait mais ça devrait fonctionner. Le gros inconvénient par contre c'est que l'on gagnera en marge haute et basse.

bonsoir,

Dans IE(s) , il te faudrait inserer un span et styler celui-ci .
Pour IE8 , il te faut simplement un doctype valide .

GC

Aussi garder en tête que pour espacer le contenu du CAPTION et le tableau lui-même peuvent sans doute être espacés via un padding-bottom sur le CAPTION. De mémoire ça marche, mais ça serait à vérifier.

Merci à tous pour vos réponses

Cygnus a écrit :
Il y a toujours la solution de jouer sur le line-height de l'élément.

Florent V. a écrit :
Aussi garder en tête que pour espacer le contenu du CAPTION et le tableau lui-même peuvent sans doute être espacés via un padding-bottom sur le CAPTION.

Vos deux solutions fonctionnent correctement mais ne répondent malheureusement pas à mes attentes

En effet, comme j'affecte un border-bottom au <caption>, celui-ci reste "collé" à mon tableau...

Je pense que je vais me rabattre sur la solution de QuentinC dans ce message et utiliser un <h2> à la place du <caption>...

gc-nomade a écrit :
Dans IE(s) , il te faudrait inserer un span et styler celui-ci .

Je travaille (bien malgré moi ) avec IE7, vivement que tous les navigateurs aient le même comportement!

Encore merci pour votre aide!

Alors c'est mon premier post, je vais donc peut être dire une ânerie mais pourquoi ne pas mettre un margin-top sur ton premier <tr> ?

J'avais également pensé à cette solution mais elle ne fonctionne malheureusement pas...

La balise <caption> semble avoir un comportement bien particulier dans IE...

... A plus forte raison: IE ne semble pas interpréter la balise <caption> correctement

On dirait quelle est "invisible" pour lui