Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Compatibilité..suite

5 réponses
Avatar
Yop
Bonjour,
Encore une étrangeté
Style : .thumbnail img {padding:5px;border:1px dashed gray;}
<p class="thumbnail" align=center>
<a href="#" ><img src="" border="0"/></a>
</p>

FF produit bien l'image encadrée avec sa marge intérieure
IE omet la marge intérieure

Toute idée est très bienvenue

Si un site recense toutes ces bizareries, encore mieux.

Merci

Y

5 réponses

Avatar
SAM
Le 30/09/10 16:28, Yop a écrit :
Bonjour,
Encore une étrangeté
Style : .thumbnail img {padding:5px;border:1px dashed gray;}
<p class="thumbnail" alignÎnter>
<a href="#"><img src="" border="0"/></a>
</p>

FF produit bien l'image encadrée avec sa marge intérieure



commet ça se fait ?
je ne vois aucune "marge" dans ces css !

IE omet la marge intérieure

Toute idée est très bienvenue



J'ai pô IE ...

Si un site recense toutes ces bizareries, encore mieux.



ménage donc alors la place ?

.thumbnail { text-align: center; padding: 3px }
.thumbnail a { margin: 3px;}
.thumbnail img { vertical-align: middle; padding: 2px;
border: 1px dashed gray; }



ha! aussi, "inline-block" ! (sans doute mieux)

.thumbnail { text-align: center; }
.thumbnail a {
display: inline-block;
/* margin: 3px; (facultatif) */
border: 1px dashed gray;
padding: 2px;
}
.thumbnail img { vertical-align: middle; border: 0 }


<p class="thumbnail">
<a href="#"><img src="asm1.gif" alt="img" height="150" width="150"></a>
<a href="#"><img src="asm1.gif" alt="img" height="180" width="180"></a>
<a href="#"><img src="asm1.gif" alt="img" height="100" width="100"></a>
<a href="#"><img src="asm1.gif" alt="img" height="70" width="70"></a>
<a href="#"><img src="asm1.gif" alt="img" height="50" width="50"></a>
<p>


--
Stéphane Moriaux avec/with iMac-intel
Avatar
Bobe
SAM nous a dit le 30/09/2010 17:38:
Le 30/09/10 16:28, Yop a écrit :
Bonjour,
Encore une étrangeté
Style : .thumbnail img {padding:5px;border:1px dashed gray;}
<p class="thumbnail" alignÎnter>
<a href="#"><img src="" border="0"/></a>
</p>

FF produit bien l'image encadrée avec sa marge intérieure



commet ça se fait ?
je ne vois aucune "marge" dans ces css !




marge intérieure = padding

--
Aurélien Maille
Avatar
SAM
Le 30/09/10 17:49, Bobe a écrit :
SAM nous a dit le 30/09/2010 17:38:
Le 30/09/10 16:28, Yop a écrit :
Bonjour,
Encore une étrangeté
Style : .thumbnail img {padding:5px;border:1px dashed gray;}
<p class="thumbnail" alignÎnter>
<a href="#"><img src="" border="0"/></a>
</p>

FF produit bien l'image encadrée avec sa marge intérieure



commet ça se fait ?
je ne vois aucune "marge" dans ces css !



marge intérieure = padding



padding = remplissage

--
Stéphane Moriaux avec/with iMac-intel
Avatar
Yop
J'ai pô IE ...


Bravo mais quelques égarés l'ont encore...

margin: 3px;
produit bien une marge extérieure

padding: 3px;
ne produit rien...(alors qu'on s'attend à une marge intérieure ou
remplissage)

sous IE bien sur
sous FF,Safari on en parle même pas, c'est bon.

Le msdn microsoft prétend pourtant "connaitre" padding de IE5 à IE9

Comprend pas tout....
Avatar
SAM
Le 30/09/10 18:33, Yop a écrit :
J'ai pô IE ...


Bravo mais quelques égarés l'ont encore...

margin: 3px;
produit bien une marge extérieure

padding: 3px;
ne produit rien...(alors qu'on s'attend à une marge intérieure ou
remplissage)

sous IE bien sur
sous FF,Safari on en parle même pas, c'est bon.

Le msdn microsoft prétend pourtant "connaitre" padding de IE5 à IE9

Comprend pas tout....



pour IE il y a 1 truc important et c'est le layout
voir chez msdn M$ ce qu'ils en disent

sinon pour la p'tite histoire :
- A n'est pas un block c'est du inline
- IMG est spéciale, à la fois block et inline

--
Stéphane Moriaux avec/with iMac-intel