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)