Discussion modèle:Début d'illustration

message: dans http://fr.wikipedia.org/skins-1.5/common/commonPrint.css :
/* thumbnails */
div.thumb {
    margin-bottom: 0.5em;
    border-style: solid; border-color: White;
    width: auto;
    overflow: hidden;
}
div.thumb div {
    border:1px solid #cccccc;
    padding: 3px !important;
    background-color:#f9f9f9;
    font-size: 94%;
    text-align: center;
}
div.thumb div a img {
    border:1px solid #cccccc;
}
div.thumb div div.thumbcaption {
    border: none;
    padding: 0.3em 0 0.1em 0;
}
div.magnify { display: none; }
div.tright {
    float: right;
    clear: right;
    border-width: 0.5em 0 0.8em 1.4em;
}
div.tleft {
    float: left;
    margin-right:0.5em;
    border-width: 0.5em 1.4em 0.8em 0;
}
img.thumbborder {
	border: 1px solid #dddddd;
}
dans http://fr.wikipedia.org/skins-1.5/monobook/main.css :
/* thumbnails */
div.thumb {
	margin-bottom: .5em;
	border-style: solid;
	border-color: white;
	width: auto;
}
div.thumbinner {
	border: 1px solid #ccc;
	padding: 3px !important;
	background-color: #f9f9f9;
	font-size: 94%;
	text-align: center;
	overflow: hidden;
}
html .thumbimage {
	border: 1px solid #ccc;
}
html .thumbcaption {
	border: none;
	text-align: left;
	line-height: 1.4em;
	padding: 3px !important;
	font-size: 94%;
}
div.magnify {
	float: right;
	border: none !important;
	background: none !important;
}
div.magnify a, div.magnify img {
	display: block;
	border: none !important;
	background: none !important;
}
div.tright {
	clear: right;
	float: right;
	border-width: .5em 0 .8em 1.4em;
}
div.tleft {
	float: left;
	clear: left;
	margin-right: .5em;
	border-width: .5em 1.4em .8em 0;
}
img.thumbborder {
	border: 1px solid #dddddd;
}
Il y a trop de différences injustifiées entre commonPrint.css, main.css parce que vraisemblablement commonPrint.css n'a pas été mis à jour lorsque main.css a été modifié.
Dans MediaWiki:Monobook.css :
/* IMAGES
Rend blanc au lieu de gris le fond des images transparentes en thumb. */
.thumbimage { background:white; }
 
/* bordure des thumb au memes couleurs que le fond */
.ns-1 div.thumb,
.ns-3 div.thumb,
.ns-5 div.thumb,
.ns-7 div.thumb,
.ns-9 div.thumb,
.ns-11 div.thumb,
.ns-13 div.thumb,
.ns-101 div.thumb,
.ns-103 div.thumb,
.ns-105 div.thumb{
border-color:#FFE;
}
 
.ns-4 div.thumb{
border-color:#F4F4F4;
}
Ici, on tente (maladroitement) de réparer les dégâts causés par 
div.thumb {
	border-color: white;
}
Mais du coup, la version imprimable devient défectueuse (puisque l'on colore sur fond blanc).
C'est symptomatique de la mauvaise programmation des pages CSS.
La solution est pourtant toute simple : Le remplacement par
div.thumb {
	border-color: transparent;
}
Par ailleurs, utiliser "border" au lieu de "margin" est un odieux bricolage. Qu'est ce qui le justifie ? !
:Pour te résumer rapidement le pourquoi du comment:
:# border a été utilisé ici au lieu des marges afin d'éviter que des bordures ou des couleurs de background d'éléments en flux ne viennent s'achever juste à la limite des bordures visibles des thumbs flottants (l'utilisation des marges serait en fait possible mais à des conditions trop contraignantes pour les contributeurs).
:# la valeur transparent de border-color n'est pas implémentée par IE6.
:--Lgd (d) 4 décembre 2008 à 17:06 (CET)
replies: text: Comme j'ai un peu de temps, voici les détails ci-dessous. En espérant t'avoir éclairé. --Lgd (d) 4 décembre 2008 à 19:36 (CET)
thread_title: Les classes <code>thumb</code>

message: in «  »
 in «  »
in «  »
 in «  »
in « <a> »
There is many (injustified) differences between screen and printer preview .   <STyx @ 7 novembre 2008 à 15:45 (CET)
thread_title:  The <code>div.thumb</code> styles  

message: Voir Wikipédia:Le Bistro/19 mai 2010#Pb affichage Modèle:Carte avec géolocalisation ?.
Ces modèles peuvent également placer un texte en illustration comme le fait .
avec style="width:0px;"
Ces modèles peuvent également placer un texte en illustration comme le fait .
sans style="width:0px;"
Ces modèles peuvent également 
placer un texte en illustration 
comme le fait .
sans style="width:0px;"
Ces modèles peuvent également placer un texte en illustration comme le fait .
sans style="width:0px;" et avec une très très très très très très très longue légende ; cette légende élargie le cadre de l'illustration.
avec style="width:0px;" et avec une très très très très très très très longue légende ; cette légende n'élargie pas le cadre de l'illustration.
sans style="width:0px;" et avec une très très très très très très très longue légende ; cette légende élargie le cadre de l'illustration.
:Attention, ces rendus sont différents (et imprévisibles) selon les navigateurs (voir sous Safari). On ne peut pas se reposer sur une valeur de propriété aberrante (un width:0 pour un contenu de largeur non nulle) pour contourner une difficulté de rendu. Il faut chercher la source de celle-ci pour la traiter (la présence d'un tableau de mise en forme comme conteneur dans  serait le premier élément à revoir). Cordialement, --Lgd (d) 20 mai 2010 à 04:20 (CEST)
thread_title:  Ajout de la largeur