FF ajoute padding à la largeur de mon div

Salut à tous,

J'ai un petit problème. Sur mon site, j'ai un div contenant une image en background et du texte en surimpression. Afin que le texte ne colle pas aux bords de mon images, j'ai mis un padding à mon div.

Sous IE6 ca ca passe bien mais par contre, FF me rajoute la valeur du padding à mon div.

J'ai fait quleques recherche sur google mais il semblerait que d'habitude c'est plutot le problème inverse qui se pose. IE rajoute la valeur du padding a la largeur du div, et FF crée de vraies marge à l'intérieur du div.

Aurais-je un IE6 mutant ?

1) Pour l'instant, j'ai réussi à contourner le problème avec un hack IE6 mais j'ai retiré le hack et rajouté des border afin que vous puissiez voir plus clairement mon problème.

Voici mon code (html et Spip)

<div class="bloc">
[(#REM) Atelier au hasard]
<B_atelier_hasard>
<fieldset>
<BOUCLE_atelier_hasard(ARTICLES) {id_rubrique=3} {par hasard} {0,1}>
<div class="atelier_hasard" style="background:url('[IMG/(#LOGO_ARTICLE|fichier|image_reduire{293,195})]') no-repeat;">
[<h2>(#SURTITRE)</h2>]
[<h1><a href="#URL_ARTICLE">(#TITRE|supprimer_numero)</a></h1>]
</div>
</BOUCLE_atelier_hasard>
</fieldset>

[(#REM) Accroche]
<B_accroche>
<BOUCLE_accroche(ARTICLES) {id_rubrique=1} {par date}{inverse} {0,1}>
[<h1>(#TITRE|supprimer_numero)</h1>]
[(#TEXTE)]
</BOUCLE_accroche>
</div>

Et ma CSS

.page_sommaire fieldset {
border:none;
margin:0px;
margin-bottom:20px;
padding:0px;
background:100% 0px no-repeat url(hasard.png);
}

.atelier_hasard {
padding:20px;
width:253px;/*293px-padding gauche et droite (40px)*/
height:155px;/*195px-padding haut et bas (40px)*/
_width:293px;/*hack ie6. A tester sous IE7*/
_height:195px;/*hack ie6. A tester sous IE7*/
}

Et la page concernée
http://www.audetourdunregard.be/spip_asbl/spip/

Merci!
O.

Excusez moi, je vous ai donné le code CSS avec le hack.

Voici le code sans hack et avec les border :

.page_sommaire fieldset {
margin:0px;
margin-bottom:20px;
padding:0px;
background:100% 0px no-repeat url(hasard.png);
}

.atelier_hasard {
border:1px solid red;
padding:20px;
width:293px;
height:195px;
}

Bonjour,

Onyrodine a écrit :
Sous IE6 ca ca passe bien

En fait non, ce comportement d'IE6 n'est pas standard. Il est utilisé car ta page n'utilise probablement pas de Doctype qui dit aux navigateurs de travailler en mode Standard et pas en mode Quirks.

Onyrodine a écrit :
FF me rajoute la valeur du padding à mon div

C'est le comportement normal.

Onyrodine a écrit :
il semblerait que d'habitude c'est plutot le problème inverse qui se pose. IE rajoute la valeur du padding a la largeur du div, et FF crée de vraies marge à l'intérieur du div.

Non. Tu as dû lire de travers, ou bien les articles que tu as consultés sont erronés.

Règles à suivre:
1. Toujours travailler avec un Doctype en bonne et due forme. Tu peux utiliser l'outil suivant pour générer le code HTML de base de tes pages: http://css.alsacreations.com/outils/squelettor/index.php
2. Se familiariser avec le modèle de boite CSS, qui stipule effectivement que padding et bordures s'ajoutent à la largeur définie par la propriété width. Cette propriété définit en réalité la largeur du contenu de l'élément, pas sa largeur totale.
3. N'utiliser width que lorsqu'on en a réellement besoin. Ce n'est pas si fréquent, les marges ou le fonctionnement par défaut des éléments de type bloc couvrant déjà la plupart des besoins.
Modifié par Florent V. (27 Jan 2009 - 19:07)

Merci, je vais lire la doc sur les doctype. J'esperais y échapper mais comme ca revient tout le temps.

Sinon, si le comportement de FF est le bon, on fait comment pour mettre une marge interne à un bloc ?

Parce que mon but, c'est qd même que mon image de bcground s'affiche entièrement et que le texte qui s'affiche par dessus et une marge par rapport au bord de l'image

Onyrodine a écrit :
Sinon, si le comportement de FF est le bon, on fait comment pour mettre une marge interne à un bloc ?

Bon en utilise du padding. Quitte à faire des mathématiques (mentales) du genre:
width = largeur totale désirée - bordures latérales - padding latéral
On a le droit de se servir d'une calculatrice, mais en général ce n'est pas nécessaire.

Et bien sûr on travaille avec un Doctype en bonne et due forme, comme ça Internet Explorer respecte le modèle de boite CSS comme tout le monde, et on n'a pas à traiter les navigateurs différemment (manquerait plus que ça).
Modifié par Florent V. (27 Jan 2009 - 20:55)