Problème de float et clear:both sous IE

Bonjour,

Encore un bug sous IE...
Peut-être avez-vous une solution ?

Illustration :
Firefox

IE


Mon problème :
Sous Firefox, superbe (comme d'habitude), mais sous IE, notez la différence d'espace entre le texte "Guide notation..." et le border-top.
Du coup, mon texte n'est pas centré avec la puce sous IE. Sous Firefox, le texte est centré, pas de problèmes.

Après enquête, l'espace se rajoute tout seul... sous IE quand je positionne l'image qui précède mon "Guide..." en float:left.
(Le "Guide..." dispose d'un clear:both pour ne pas se placer à droite de l'image, je veux qu'il soit dessous)

Pour résumer, sans float:left sur l'image, mon texte "Guide..." est bien centré, avec float:left, un espace superflu vient s'ajouter (sous IE).
J'ai besoin de ce float:left sur l'image pour afficher du texte autre à sa droite.

Alors, ma question, existe-t'il une solution pour enlever ce problème d'espace superflu sous IE à cause de ce float:left ?

Le code :

<h3>interligne</h3>
<p><span style='float:left;'> 
<img src='IMG/jpg/champs-elysees.jpg' width="250" height="187" alt="Image truc truc truc" title="Image truc truc truc" />
</span></p>
<div class="clear"></div>
<div class="pj">
	<a href="IMG/pdf/guide_notation.pdf" type="application/pdf">Guide notation truc truc truc (PDF - 89.7 ko)</a>
</div>

.pj { margin: 3px 3px 0px 3px; 
padding: 3px 0px 3px 13px; 
background-image: url(piece_jointe.jpg); 
background-repeat: no-repeat; b
ackground-position: center left; 
background-color: #FFFFFF; 
color: #265665; 
text-align: left; 
border-top: 1px solid #265665; 
border-bottom: 1px solid #265665; }
.pj a { background-color: #FFFFFF; font-weight: bold; color: #265665; }
.clear { clear:both }

Piste : une image dans un span est-il correct ?

Merci d'avance.
Modifié par DrumSHoTS (21 Sep 2006 - 17:26)

Salut,

Et si tu placais des

margin:0;
padding:0;

à ta balise <a> se trouvant dans .pj??
Modifié par Oryo (21 Sep 2006 - 17:36)

Salut!

Oryo a écrit :
Et si tu placais des

margin:0;
padding:0;

à ta balise <a> se trouvant dans .pj??

Attention! une balise <a>, étant par nature une balise en ligne non remplacée, n'admet que des marges latérales. À moins que tu ne précises dans le CSS la propriété display: block, bien entendu.

Bonjour,

J'ai eu un drôle d'histoire un peu dans ce style, je ne sais pas vraiment si ça va marcher ma recette de cuisine mais bon tu ne risques rien de remplacer ton clear: both; par clear: right; clear: right dans ta classe pour voir !!!

J'ai testé toutes les solutions, rien n'y a fait.

Alors voilà, j'ai ajouté :

<br class="clearboth" />

.clearboth { clear: both; }

juste avant :

<div class="pj">
<a href="IMG/pdf/guide_notation.pdf" type="application/pdf">Guide notation truc truc truc (PDF - 89.7 ko)</a>
</div>

à la place de :

<div class="clear"></div>

et tout a fonctionné sous IE et Firefox, la mise en forme est identique avec un centrage parfait.

Cette solution soulève la question suivante :
Mon code clear:both sur la balise en-ligne est-il correct ?

Merci d'avance.