Discussion :

[FixSan]

Bonjour !

Sous Firefox 12, l'aperçu avant impression de la page d'accueil de mon blog affiche le titre, le sous-titre, et le reste de la page est blanc... Il y a pourtant 4 pages de texte ensuite, mais il ne commence qu'au début de la page suivante. Voici une capture d'écran de ce cet aperçu avant impression.

Je gère l'impression grâce à une feuille de style particulière, dont le code est le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
body { font: 10pt georgia, "Times New Roman", Times, serif; margin: 0; color: #000; background-color: #FFF; line-height: 1.4; }
 
.no-print, #evitement, #searchbox, #navigation, p.p-feed, .GoTo, .widget-title .counter, #lastcomments .collapse-link, #navlinks, .pagination, h2#add-comment, #comment-form, input.submit, input.preview, a.answer-button { display: none; }
.jcarousel-prev, .jcarousel-next, #pager-button-prev, #pager-button-next { display: none !important; }
 
#footer { margin-top: 30px; padding-top: 15px; border-top: 1px solid #000; text-align: center; }
 
a { color: #000; font-weight: bold; text-decoration: underline; }
 
#content img { padding: 5px; margin: 0 20px 10px 0; border: 1px solid #000; }
	#content img.icone { padding: 0; margin: 0; border: 0; }
	#content img.left { float: left; }
	#content img.right { float: right; margin: 0 0 10px 20px; }
.conteneur { overflow: hidden; }
		#content .post-details-bottom, #conseilsadultes, #conseilsjeunesse, #rang2, #rang3, #footer, .right-part, .conteneur, ul li.conteneur { clear: both; }
 
p, blockquote { orphans: 3; widows: 3; padding: .5em 0; }
	p.description { text-align: center; }
blockquote, ul, ol { page-break-inside: avoid; }
	ul { padding-left: 40px; }
	.post-content ul { list-style-position: inside; }
	.dc-avis #rang1 ul { padding: 0; }
		#lastcomments li .toggle { padding-left: 30px; }
 
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; font-weight: bold; padding: .4em 0; }
h1 { padding-top: 0; }
	h1 a { text-decoration: none; }
		h1 a href :after { content: attr(title); display: block; text-align: center; font-size: 16pt; }
	#header a img { display: none; }
h2 { font-size: 14pt; text-align: center; }
h3 { font-size: 12pt; }
h4 { font-size: 10pt; }
h5 { font-size: 9pt; }
h6 { font-size: 8pt; }
 
.post-content, .post-excerpt { overflow: hidden; text-align: justify; }
.post-excerpt { border: 1px dashed #000; padding: 20px; margin: .5em 0; font-weight: bold; }
 
p.post-tags { display: inline; }
	ul.post-tags, ul.post-tags li { display: inline; list-style: none; margin: 0; padding: 0; }
		ul.post-tags li a { white-space: nowrap; }
p.post-author { display: inline; }
 
#editos, #editos *, #animations, #animations *, #carousel-comments, #carousel-comments *, #roundabout-jeunesse, #roundabout-jeunesse *, #carousel-escapages, #carousel-escapages * { position: static !important; max-width: 100% !important; }
	#editos ul, #editos ul li, #animations ul, #animations ul li, #carousel-comments ul, #carousel-comments ul li, #carousel-escapages ul, #carousel-escapages ul li { width: 100% !important; }
	#roundabout-jeunesse ul li { width: 100% !important; height: 100% !important; opacity: 1 !important; z-index: 400 !important; font-size: 10pt !important; margin-bottom: 8px; }
		#roundabout-jeunesse li img { display: none; }
		#roundabout-jeunesse li a:after, .ISIE67 #roundabout-jeunesse li a .after { content: attr(title); }
#carousel-comments img, #carousel-escapages img { display: none !important; }
	#carousel-comments li a[href^="http:"]:after, .ISIE67 #carousel-comments li a .after { content: attr(title); }
	#carousel-escapages li a[href^="http:"]:after, .ISIE67 #carousel-escapages li a .after { content: attr(title); }
#animations ul { list-style: none; padding-left: 0; }
	#animations li ul { list-style-type: disc; padding-left: 40px; }
#animations li span.right:before { content: " ("; }
#animations li span.right:after { content: ")"; }
 
#rang1, #rang2, #rang3 { padding-bottom: 15px; border-bottom: 1px solid #000; }
	#rang1.last, #rang2.last, #rang3.last, .dc-adultes #rang3, .dc-jeunesse #rang3 { border: 0; }

Quelqu'un aurait-il la moindre idée de ce qui pourrait provoquer ce comportement ? Merci d'avance !

[Muchos]

Ça marche très bien pour moi. J'ai les 4 pages imprimées.

[FixSan]

Deux possibilités, donc :

1. Ou il s'agit d'un bug de mon driver d'imprimante... Se pourrait-il que ce soit le cas ?

2. Ou, avec certaines configurations d'imprimante seulement (mais pas toutes), il y a effectivement un problème de CSS print.
Je pensais que des règles telles que page-break-inside: avoid; pouvaient être la source de mon problème. Je les ai donc retirées momentanément... mais sans succès. Cela ne change rien : les 3/4 de la première page restent toujours vides.

Une autre idée, donc ? Merci de votre aide !

[mcoutant]

Aucun soucis pour moi non plus, les 4 pages sortent bien .

Je doute que ce soit à cause de l'imprimante, as-tu essayé d'imprimer ?
Car peut être que c'est juste l'aperçu qui bug

[FixSan]

Oui, j'ai essayé d'imprimer... Et j'ai bien ce que me donne l'aperçu, c'est-à-dire les 3/4 de ma première page vides...

Je doute aussi que ce soit liée à mon driver d'imprimante... Donc il s'agit bien de mes règles CSS, avec la configuration spécifique de mon imprimante (taille de la page, des caractères, des marges etc.) Ce qui veut dire que ça pourrait très bien arriver à quelqu'un d'autre qu'à moi

Donc... une idée ? Merci de votre aide

[mcoutant]

C'est bizarre car je viens de test sur firefox 12 et ça s'affiche bien, sinon il faudrais que tu regarde du coté du contenu généré via after:/before: (et passe donc outre le système .noprint)

[Muchos]

Donc il s'agit bien de mes règles CSS

Non puisque chez nous ça fonctionne bien. Vous avez essayé une impression dans un pdf ?

Sinon, ce genre de règle me paraît bizarre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#editos * {display: none;}

Normalement, #editos suffit et tout ce qui est dedans ne s'affiche pas…

[FixSan]

Je voulais dire : il s'agit bien de mes règles CSS, couplées à ma configuration particulière d'imprimante.

Vous avez essayé une impression dans un pdf ?

Non. Comment puis-je faire cela ?

Normalement, #editos suffit et tout ce qui est dedans ne s'affiche pas…

Oula, c'est tout à fait juste. C'est du grand n'importe quoi ce que j'ai mis. Je vais y rejeter un œil. Il me semble que c'était dû à l'ancienne version du plugin jCarousel, avec laquelle j'avais eu des misères à obtenir quelque chose de potable pour l'impression... Mais ça n'explique pas pourquoi j'ai dû en venir à quelque chose comme ça. Merci de me l'avoir signalé !

[Muchos]

Non. Comment puis-je faire cela ?

Vous chargez votre blog. Dans le menu "Fichier" de votre navigateur, vous devriez avoir une section "Aperçu impression". Vous cliquez.
Sous Window$, il existe aussi des softs type PDF Reader pour que l'impression soit simulée et qu'elle sorte sous forme de fichier pdf.

Ainsi, vous verrez si ça vient bien de l'imprimante

[FraK]

aucun soucis sous FF, chrome ou IE

[Candygirl]

Idem ici aucun problème sur FF.

Du coup j'ai regardé ton screen d'un peu plus près. Je constate que tu as choisi 100% pour le réglage échelle. Par défaut, c'était en "adapter à la page" chez moi. Si je change ppou 100% j'ai aussi effectivement la première page quasi blanche comme sur ton screen.

Une raison pour ne pas choisir "adapter à la page" ?

[FixSan]

Chez moi, c'est justement le réglage à 100% qui est celui par défaut.

J'ai pu tester cet après-midi, à mon travail, sur une vieille version de Firefox (3.25 sous Win XP), même résultat : page en grande partie vide.

Une raison pour ne pas choisir "adapter à la page" ?

Absolument pas... mais je n'ai pas le moyen de dire aux visiteurs du site "Si vous voulez avoir un aperçu avant impression fidèle (et chez moi, je le répète, ça fait cela même en imprimant réellement la page), il faut changer le réglage par défaut, et choisir "Adapter à la taille"

Vous chargez votre blog. Dans le menu "Fichier" de votre navigateur, vous devriez avoir une section "Aperçu impression". Vous cliquez.

Ça, c'est ce que je fais depuis le début. Et c'est bien en faisant ça que je constate le problème...

Merci pour votre aide à tous ! Si je récapitule, plusieurs ne constatent pas le même problème sur leur configuration ; mais nous sommes 2 à le constater avec un réglage à 100%, et, d'autre part, j'ai pu moi-même voir cela sur plusieurs ordis différents, avec des imprimantes et des systèmes d'exploitation différents...

Ce qui signifie qu'il y a de fortes chances pour que d'autres visiteurs du site constatent le même problème, et se retrouvent avec une page quasi vide à imprimer...

[Candygirl]

Je ne partage pas ton analyse ;P

On constate que, sur tous les visiteurs qui se sont exprimés ici, tu es le seul qui avait ce problème de réglage "par défaut". On peut donc imaginer que très rares seront les visiteurs qui rencontreront le même problème.

Si tu vas sous "mise en page" depuis l'aperçu avant l'impression, tu as une case à cocher "adapter à la page" qui, j'imagine est cochée par défaut sur Firefox. Chez toi, et sur l'un ou l'autre ordi-test, peut-être a-t-elle été volontairement décochée une fois ou l'autre ce qui te fait passer en mode 100% par défaut à chaque impression. Si qqn change des réglages, en principe, il est susceptible de savoir le faire en sens inverse aussi.

Je te l'accorde ce ne sont que des suppositions...

Regarde le site developpez en 100%; ce n'est pas joli à imprimer non plus ;p

Après, peut-être bien qu'un css pour le print bien pensé permet d'éviter ce genre de désagrément. En tapant une recherche ciblée peut-être trouveras-tu des indications à ce sujet. Après, il faut voir l'investissement en temps en regard du réel intérêt.

[NoSmoking]

Bonsoir,
pas de soucis constaté non plus avec effectivement un réglage par défaut sur "adapter à la page".

Par contre un soucis réel subsiste dans le sens où le texte est tronqué en fin de ligne à droite (en rouge ci dessous)

Des livres nous sont donnés régulièrement par des lecteurs. En fonction de leur intérêt certains sont intégrés 
au fonds de la Médiathèque, d'autres, comme cette année sont proposés à la foire aux livres avec ceux issus 
du "désherbage" - opération qui consiste à retirer des rayons les ouvrages abimés, obsolètes ou ne sont plus 
empruntés. Près d'une cinquantaine de ces dons viennent (...)

[FixSan]

Oula ! Avec quel navigateur constates-tu cela ? Je ne suis pas parvenu à reproduire ce bug, ni dans IE 7, ni dans IE 8, ni dans Firefox 12 (sous Windows 7).
Merci !

[Candygirl]

Par contre un soucis réel subsiste dans le sens où le texte est tronqué en fin de ligne à droite (en rouge ci dessous)

Idem chez moi, sur tous les navigateurs, pour les textes issus de "Les dernières nouvelles de la médiathèque (3/3)"

Apparemment le css pour le print

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

	#editos ul, #editos ul li, #animations ul, #animations ul li, #carousel-comments ul, #carousel-comments ul li, #carousel-escapages ul, #carousel-escapages ul li { width: 100% !important; }

qui en est à l'origine.

Pour ton autre problème, d'espace, toujours dans le css d'impression, cette ligne pourrait être la cause:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#editos, #rang1, #rang2, #rang3 { padding-bottom: 15px; border-bottom: 1px solid #000; }

[FixSan]

Je ne parviens pas à reproduire le bug où le texte est tronqué en fin de ligne. J'ai néanmoins modifié ma CSS. Quelqu'un pourrait-il tester de nouveau et me dire si c'est désormais correct ?

Pour ton autre problème, d'espace, toujours dans le css d'impression, cette ligne pourrait être la cause:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#editos, #rang1, #rang2, #rang3 { padding-bottom: 15px; border-bottom: 1px solid #000; }

Qu'est-ce qui pourrait provoquer ce comportement dans cette ligne de code ? Là, je ne vois pas comment la corriger... Une idée de ce que je devrais modifier ?

Je remercie beaucoup tous ceux qui ont pris la peine de tester chez eux... et qui continuent à m'aider Bon week-end à tous !

[NoSmoking]

aperçu sous FireFox v3.6, en mode adapter à la page

[Candygirl]

Je ne parviens pas à reproduire le bug où le texte est tronqué en fin de ligne. J'ai néanmoins modifié ma CSS. Quelqu'un pourrait-il tester de nouveau et me dire si c'est désormais correct ?

C'est toujours pareil et d'ailleurs il y a toujours le code que j'ai relevé être la source du problème:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#editos ul, #editos ul li, #animations ul, #animations ul li, #carousel-comments ul, #carousel-comments ul li, #carousel-escapages ul, #carousel-escapages ul li { width: 100% !important; }

Pourquoi imposer un width de 100% quand le width par défaut "auto" pour un positionnement static occupe tout l'espace à disposition en largeur ? Essaie avec:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#editos ul, #editos ul li, #animations ul, #animations ul li, #carousel-comments ul, #carousel-comments ul li, #carousel-escapages ul, #carousel-escapages ul li { width: auto; }

Ensuite pour l'autre problème c'est apparemment une interaction entre plusieurs choses qui fait buguer FF; la ligne que j'ai relevée + la taille des caractères/line-height. Chez moi, passer simplement le line-height du body de 1.4 à 1.3 fait disparaître l'espace :o (il le fait avec les valeurs de line-height comprises entre 1.32 à 1.40 avec le font-size à 10pt on dirait )

[FixSan]

C'est toujours pareil et d'ailleurs il y a toujours le code que j'ai relevé être la source du problème:

Où ? Je l'ai pourtant supprimé ! Et ce code n'apparaît plus chez moi... Ton cache était-il bien vidé ?

Pourquoi imposer un width de 100% quand le width par défaut "auto" pour un positionnement static occupe tout l'espace à disposition en largeur ? Essaie avec:

Parce que je n'avais plus pensé à cette valeur de "width" Tout à fait d'accord avec toi, mais... Cela résout effectivement le problème chez toi ? Ce n'était pas mon impression... Pourrais-tu me le confirmer ?

pour l'autre problème c'est apparemment une interaction entre plusieurs choses

Tout à fait d'accord, là aussi : du coup, il est difficile de savoir si la modif que tu proposes résout réellement le problème pour tout le monde, ou si c'est juste lié à notre configuration particulière d'imprimante... Mais je me trompe peut-être ! Qu'en penses-tu ?