[spip-dev] CSS > IMG

Dev
1

Salut,

Je suis encore en train de me faire chier avec les CSS. Ma question:

-> MSIE 6 ne semble pas prendre en compte les définitions de margin et padding sur les images (tag <img...>. Malgré ces valeurs, si je fais un border autour de l'image, il reste collé à l'image.

Sous Mozilla et même MSIE 5 sous MacOS, no problème. Mais MSIE 6, rien à faire, les valeurs de margin et padding semblent totalement ignorées.

=> C'est normal? Est-ce qu'il y a une solution (simple, hein, c'est pour simplifier le code, pas pour le complexifier parce que les CSS sont définies par des andouilles et implémentées par des abrutis)?

-> J'ai essayé de contourner le problème en ajoutant un <div> (mais aussi un <span>) autour de l'image, et de mettre les feuilles là-dessus. Rien à faire: ça ne semble pas récupérer la hauteur de l'image! (Ca et les histoires d'alignement vertical, ça me confirme que les normes du W3C ont été codées par des individus à la verticalité contrariée...)

ARNO*

2

C'est pas normal, mais c'est connu...
Il y a un hack connu sous le nom de "Tan hack" qui permet de passer
outre.

Voir <http://css-discuss.incutio.com/?page=BoxModelHack>

Pour résumer :

div
{
  border: 10px;
  padding: 10px solid;
  width: 100px;
}

* html div
{
  width: 140px;
  w\idth: 100px;
}

3

<quote who="ARNO*" when="20/11/03 18:02">

Salut,

Je suis encore en train de me faire *BIIIP* avec les CSS. Ma question:

-> MSIE 6 ne semble pas prendre en compte les définitions de margin et padding sur les images (tag <img...>. Malgré ces valeurs, si je fais un border autour de l'image, il reste collé à l'image.

Sous Mozilla et même MSIE 5 sous MacOS, no problème. Mais MSIE 6, rien à faire, les valeurs de margin et padding semblent totalement ignorées.

IE6/win98 :
- sans DTD gère les margin et pas les padding
<http://www.nota-bene.org//misc/spip_dev/2003-11-20_img_margin_padding/no_dtd.htm&gt;

- avec DTD trans gère les margin et les padding
<http://www.nota-bene.org/misc/spip_dev/2003-11-20_img_margin_padding/dtd_trans.htm&gt;

- avec DTD strict gère les margin et les padding
<http://www.nota-bene.org/misc/spip_dev/2003-11-20_img_margin_padding/dtd_strict.htm&gt;

Pour info IE5.5/win98 gère les margin et pas les padding de façon systématique.

Tu es sûr de ne pas avoir un conflit avec une autre instruction qui traîne quelque part ?

=> C'est normal? Est-ce qu'il y a une solution (simple, hein, c'est pour simplifier le code, pas pour le complexifier parce que les CSS sont définies par des andouilles et implémentées par des abrutis)?

Y'a pas eu beaucoup de graphistes à l'origine des CSS. On en paye le prix.

-> J'ai essayé de contourner le problème en ajoutant un <div> (mais aussi un <span>) autour de l'image, et de mettre les feuilles là-dessus. Rien à faire: ça ne semble pas récupérer la hauteur de l'image! (Ca et les histoires d'alignement vertical, ça me confirme que les normes du W3C ont été codées par des individus à la verticalité contrariée...)

... qui pensaient en flux linéaire de données, y'a de ça, oui. Mais il y a des raisons. Tiens par exemple comment définis-tu la hauteur de ton document ? C'est la hauteur complète du document entier déroulé ou celle qui est visible à l'écran ? Ce genre de question a été et est toujorus délicat à trancher, y'a des querelles de chapelles, comme souvent en informatique.

Un truc qui donne pas mal à réfléchir :

<blockquote
cite="Eric's Archived Thoughts;

         As for CSS-P, of course it has
         limitations. So does table-based
         layout. The question is which set of
         limitations you're willing to accept,
         and conversely which features are
         more important to your current
         project. I still fail to understand
         why people have to treat everything
         as being a binary situation. It's not
         a question of only using tables, or
         only using CSS, for layout, forever
         and ever amen. Some projects do well
         with one, some with the other, and
         some call for both in the same
         layout. I don't know how many times
         I've said this over the years, but I
         guess I'm saying it again.

</blockquote>