Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Compatibilité..suite

0 views
Skip to first unread message

Yop

unread,
Sep 30, 2010, 10:28:09 AM9/30/10
to
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


SAM

unread,
Sep 30, 2010, 11:38:01 AM9/30/10
to
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=center>
> <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

Bobe

unread,
Sep 30, 2010, 11:49:40 AM9/30/10
to
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=center>
>> <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

SAM

unread,
Sep 30, 2010, 11:55:34 AM9/30/10
to
Le 30/09/10 17:49, Bobe a écrit :

padding = remplissage

Yop

unread,
Sep 30, 2010, 12:33:34 PM9/30/10
to
>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....


SAM

unread,
Sep 30, 2010, 1:09:04 PM9/30/10
to
Le 30/09/10 18:33, Yop a écrit :

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

0 new messages