Placer une lettre sur une image avec first-letter

Bonjour,

J'ai un petit soucis de compatibilité avec IE (pour ne pas changer ).
Je développe une page un peu speciale car sera imprimée. Mon problème se situe sur un div faisant office de titre de page,avec un texte qui doit avoir sa première lettre sur une image. Celà fonctionne parfaitement sous Mozilla Firefox, mais sous IE, la première lettre s'affiche à coté de l'image.

Y'a t'il un syntaxe spécifique à IE pour faire celà ? faire un hack css ? Merci d'avance .

Le code HTML :

<div class="titre">
	<?php 
		echo $html->image('puce_synthese_v.jpg', array('alt' => 'puce'));  
	?>	
	<p>Visite du blabla...
	<span style="font-size:12px; float:right; padding-top:18px;">blabla texte à droite</span>
	</p>
</div>

Et le CSS lié :

.titre{
	border		: 2px solid #000066;
	overflow 	: hidden;
	height		: 36px;
	width		: 178mm;
	margin-left: 0;
	margin-right: 0;
}	
.titre p{
	color 		: #000066;
	font-weight	: bold;
	font-size	: 24px;	 
	width		: 160mm;
	z-index		: 1;
	position	: absolute; 
	float 		: left;
}

.titre p:first-letter {
	font-weight	: bold;
	font-size	: 32px;	 
	color		: #ffffff;
	padding-left : 10px; 
	padding-right : 10px;		
}

.titre img{
	width		: 36px;
	float		: left;
	z-index		: 10;
	top			: 0px;
	left		: 0px;	
	padding-left	:0;
}	

Cdlt

Hello et bienvenue,

BaLiSTiK a écrit :
J'ai un petit soucis de compatibilité avec IE (pour ne pas changer).
[...]
Y'a t'il un syntaxe spécifique à IE pour faire celà ? faire un hack css ?

Déjà 2 petites remarques :
* c'est plus facile pour nous en précisant la (ou les) version(s) d'IE qui pose(nt) problèmes.
* les hacks css c'est dépassé !

Ensuite ton code démontre que tu n'as pas bien compris quelques règles de base du positionnement CSS :
* les propriétés z-index, top, left, bottom et right ne seront prises en compte que pour un élément positionné ce qui n'est pas le cas de l'image.
* faire flotter un élément qui est positionné en absolu n'a aucun intérêt.
* quitte à mettre ton paragraphe en absolu autant spécifier les valeurs de top (ou bottom) et de left ce qui permettra de le positionner précisément.
* un élément positionné en absolu se réfère à son premier ancêtre positionné ou à défaut au viewport. Le plus simple serait donc de rajouter un position:relative à .titre
* les éléments DIV n'ont pas de marge par défaut
* pourquoi avoir mis les déclarations CSS du SPAN en utilisant l'attribut style ?
* pourquoi faire flotter l'image puisqu'à priori il n'y en a qu'une ? Du coup le overflow:hidden ne sert plus à rien.
* si l'idée (et c'est ce que j'en comprends) était juste de mettre la première lettre du paragraphe au dessus de l'image il suffisait de mettre le paragraphe en position:relative et de lui affecter une valeur de top négative.

Ce qui donne au final quelque chose comme :

html, body {
	font-size: 100%;
}

html, body {
	margin: 0;
	padding: 5px;
}

.titre { 
    border: 2px solid #000066; 
    width: 178mm;
	padding-bottom: 20px;
}

.titre img { 
    width: 36px;
	height: 36px;
} 

.titre p { 
    color: #000066; 
    font-weight: bold; 
    font-size: 24px;      
    width: 160mm; 
    position: relative;
	top: -20px;
    z-index: 1; 
	margin: 0;
} 
 
.titre p:first-letter { 
    font-weight : bold; 
    font-size : 32px;      
    color : #ffffff; 
    padding: 0 10px;  
} 

.titre span {
	float: right;
	padding-top: 18px;
    font-size: 12px;
}

Merci de ta réponse. Le problème était sur IE7 car l'appli que je développe dans le cadre de mon travail n est pas faite pour être supportée par IE6 (vu que c est une application de webmapping). Le est justement utiliséoverflow:hidden car mon div titre ne doit pas etre plus grand que la hauteur de l'image, pour ça que j ai rajouté au code que tu m a passé, une hauteur . Voila ce que ça donne au final :

.titre{
	border		: 2px solid #000066;
	overflow 	: hidden;
	height		: 10mm;
	width		: 178mm;
}	

.titre img{
	width		: 38px;
	height		: 38px;
}

.titre p{
	color 		: #000066;
	font-weight	: bold;
	font-size	: 24px;	 
	width		: 160mm;
	position	: relative; 
	top: -40px; 
    z-index: 1;  
    margin: 0; 
}

.titre p:first-letter {
	font-weight	: bold;
	font-size	: 32px;	 
	color		: #ffffff;
    padding		: 0 10px; 
}

.titre span{
	float: right; 
   	padding-top: 12px;
    font-size: 12px; 
}	

Le seul probleme reste le <span> qui s affiche en dessous or je voudrais qu'il soit aligné avec la balise <p>. Je vais chercher mais en tout cas ta solution m'a énormement aidé. Merci