Positionnement par feuille de style

[Lilive]

Bonjour,
Je positionne dans un bloc <div> une image et du texte qui sont agencés par une feuille de style. Mon soucis est que, uniquement sous Firefox, l'image dépasse sous le bloc qui est sencé la contenir...

Voici le code html :

Code : Tout sélectionner

<div id='info1'>
<img src="images/webcam.jpg" alt="Infra red cover">
<h3>Web Cam'</h3>
<p>
Découvrez dès Lundi le premier épisode d'As de Trèfle en Studio !!!
Régulièrement, de nouvelles vidéos de studio ou de concerts, prises au coeur du groupe, seront disponibles ici ...
<br>
<br>
<a href='videos.php?type=Studio'>En savoir +</a>
</p>
</div>

Et la feuille de style :

Code : Tout sélectionner

#info1
{width:475px;border:1px solid #FFFFFF;background-color:white;color:black;padding:10px;}
#info1 img
{height:200px;border:1px solid black;float:left;}
#info1 h3
{font-size:9pt;font-weight:bold;padding-left:240px;padding-right:40px;}
#info1 p
{font-size:8pt;padding-left:240px;}

L'affichage est tout a fait normal sous ie (et du coup ça me fait peur car cela voudrait dire que j'ai fait une erreur de code). Quelqu'un voit-il d'où vient le problème ?

Pour un visuel : http://www.as-de-trefle.com/index.php

Merci de votre aide

[calimo]

Le comportement de Firefox me semble tout à fait correct.
Tu dois utiliser la propriété css "clear"

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[Lilive]

Merci, effectivement, je ne connaissais pas la propriété "clear"...

Seulement, j'ai été obligé de créer un bloc vide avec clear:both; qui vient se mettre sous l'image pour que le contenant prenne en compte le bas de l'image... Je suis un peu déçu car je trouve que ça fait un peu "bidouille" comme solution...

Pourquoi le conteneur ne prend-il pas en compte l'image qu'il contient et place sa "base" sous le texte au lieu de se mettre sous l'image ?
En attendant, ça fonctionne et je vous remercie mais j'espère trouver quelque chose de plus "propre"...

[calimo]

Merci, effectivement, je ne connaissais pas la propriété "clear"...

Seulement, j'ai été obligé de créer un bloc vide avec clear:both; qui vient se mettre sous l'image pour que le contenant prenne en compte le bas de l'image... Je suis un peu déçu car je trouve que ça fait un peu "bidouille" comme solution...

Ben oui mais c'est normal

Pourquoi le conteneur ne prend-il pas en compte l'image qu'il contient et place sa "base" sous le texte au lieu de se mettre sous l'image ?[/quote]Par définition ! La boite en float est sortie du flux !
http://www.w3.org/TR/CSS2/visuren.html#floats

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist.

La même chose est plus ou moins répété ici en français : http://css.alsacreations.com/Bases-et-i ... ses-en-CSS (avec en prime une excellente explication sur le positionnement et ce qu'est le "flux"... mais c'est sur que c'est un peu compliqué

En général, il vaut mieux ne pas se fier au rendu d'IE pour savoir ce qui est correct ou pas

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[Lilive]

Merci beaucoup !
Content de savoir que je ne faisais pas de bidouillage (sans le savoir !)...
Encore une nouvelle chose apprise.