[CSS] Image décalé par rapport au texte

Résolu
Utilisateur anonyme -  
 Utilisateur anonyme -
Bonjour,
J'ai un problème en CSS, j'ai un texte, en face duquel est affiché une image, qui a pour propriété float: right;
Sous Firefox, aucun soucis, l'image s'affiche en face du texte : http://screensnapr.com/u/k42xnz.png
Mais sous IE, l'image s'affiche bien en face du texte, mais une ligne en dessous : http://screensnapr.com/u/u4og43.png

Mon CSS :
#topcol{
	width: 100%;
	height: auto;
	background: #FFFFFF;
	text-align: left;
}
#topcol img{
	float: right;
}


Et le HTML :
<div id="topcol">
   Texte
   <a href="#">
	<img src="design/img/mailbox.png" alt="MP" title="Messagerie privée">
   </a>
</div>


Merci d'avance pour votre aide :)
A voir également:

7 réponses

LelLex Messages postés 1628 Date d'inscription   Statut Membre Dernière intervention   112
 
Ton TEXTE doit être dans une balise <p></p>

Ton CSS :
#topcol
{
	width: 100%;
	height: auto;
	background: #FFFFFF;
	clear: both;
}

#topcol p
{
	text-align: left;
	float: left;
}
0
Utilisateur anonyme
 
Merci de ta réponse LelLex, mais pour le coup, avec ce CSS, je n'ai plus rien du tout, ni sur Firefox, ni sur IE ...
0
LelLex Messages postés 1628 Date d'inscription   Statut Membre Dernière intervention   112
 
Tu as bien mit ton TEXTE entre les balises <p></p> comme ça :
<p>TEXTE</p>
0
math 2000 Messages postés 2605 Date d'inscription   Statut Membre Dernière intervention   405
 
tu met un id au texte et ensuite tu met la meme position top et left
au texte et à l'image
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Utilisateur anonyme
 
@LelLex oui, j'ai bien mis mon texte à l'intérieur du bloc <p> ...
@math 2000 je ne vois pas trop ce que tu veux dire, si je leur met la même position, ils se trouveront au même endroit ...
0
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention  
 
L'élément flottant doit être placé en premier dans le flux. Il faut donc mettre le texte après l'image.

<div id="topcol">
     <p><a href="#">
	<img src="design/img/mailbox.png" alt="MP" title="Messagerie privée">
   </a></p>
<p>Texte</p>
</div>


0
Utilisateur anonyme
 
Merci notobe, effectivement ça fonctionne bien comme ça :)
0