[résolu, contourné] Tutoriel "lettrines" et css media print

Bonsoir,

je vous soumet ici l'un de mes problèmes concernant les css que je suis en train de développer pour le media d'impression.

chaque page que hje suis en train de faire a ou aura 2 versions d'impression:
- l'un à partir d'un fichier telechargeable au format pdf avec les images de la page et toutes ces "fioritures";
- l'autre qui sera une version très épurée, 100% texte, au moyen de fichiers css appropriés et attachés au media "print".

En gros, essayant de "traduire" les lettrines de la page originale, au moyen de votre tutoriel, il s'avère qu'elles s'appliquent très bien à l'écran, cependant impossible de les faire fonctionner pour l'impression.

exemple:
page normale:

http://www.hotelrealdobidos.com/uploads/seroes_medievais.html

page temporaire avec juste les css du media print, ici appliquées aussi au media "screen":

http://www.hotelrealdobidos.com/uploads/print_seroes_medievais.html

tout est ok, mais si vous faites un aperçu avant impression, vous verrez que la lettrine se retrouve au dessus du texte, comme si la propriété "float" n'était pas appliquée.

Cependant, fait étrange, lorsque la ligne de texte semble être plus courte, l'impression fonctionne correctement, voir:

http://www.hotelrealdobidos.com/uploads/noite_de_nupcias.html



exemple de code:
html:

<div class="texto_pos_maj" id="texto_oferta">
					<p><span class="first_letter">U</span>m ambiente rom&acirc;ntico num quarto de Rainha decorado com flores.</p>
					<p>Ao seu dispor no quarto, uma garrafa de espumante, uma &aacute;gua mineral, uma cesta com frutas e para que se sinta ainda mais confort&aacute;vel roup&otilde;es e chinelos para uso durante a estadia.</p>
					<p>Um bom pequeno-almo&ccedil;o ser&aacute; servido no quarto &agrave; hora desejada..</p>
					<p>Para maior conforto, o check-out &eacute; tardio, at&eacute; as 18 horas.</p>
					<p>Para mais tarde recordar, ser&aacute; oferecida uma lembran&ccedil;a personalizada do Hotel.</p>
				</div>

css:

span.first_letter {
	float: left;
	display: inline;
	font-size: 35pt;
	margin-right: 3pt;
	line-height: 32pt;
}
p {
	text-align:justify;
	margin:2pt 1pt 6pt 0;
	font-size:12pt;
	color:#000;
	}

désolé pour la longuer du post, merci d'avance...
Modifié par emiliodobrasil (27 Jul 2007 - 23:10)

Ça marche très bien avec Firefox et Opera. À priori c'est un bug d'IE.

bonjour,

merci pour la réponse

étrange, chez moi aussi ça marche (ubuntu + ff2), mais au boulot (xp et ie7 ou ff2) cela ne marche pas...

j'en perd mon latin :o

bonsoir,

si ça interresse quelqu'un, voila comment j'ai à peu près contourné le problème de ie7:

j'ai introduit une class "first-line" avec la propriété "inline" au premier paragraphe contenant la lettrine. Le resultat esta assez laid mais ça marche.

<p class="first_line"><span class="first_letter">S</span>bla bla bla.</p>
<p>bla bla tempo.</p>

et css:

p.first_line {
*display: inline;	
}