problème d'image avec moz

[os2]

salut dans un div je tente d'afficher une image...

le problème étant que la dernière image s'affiche en partie sur une autres section

vous pouvez voir le rendu ici:

http://www.laboiteaprog.com/livre.php?sec_...9nie%20logiciel

avec ie même si c'est pas parfait c'est moins pire...

avec moz la moitié de l'image est sur une autre section

ce qui donne niveau code

<div class="titresection">Livres de Génie logiciel</div>
<div id="main">

  <div class="soustitre">Conception et programmation orienté objet</div>
  <br/>

  <div class="image">
    <img src="http://images-eu.amazon.com/images/P/2212091117.08.MZZZZZZZ.jpg" alt="img du livre">
  </div>

  <div class="description">
    Ce livre ne s'adresse pas à un langage en particulier. C'est un livre de référence pour la création de logiciel. Tout ce qui est nécessaire de connaitre lors du développement d'une application est écrit dans ce bouquin. L'auteur explique en plusieurs étapes et méthodes la façon de développer un logiciel pour qu'il réponde aux normes les plus strictes. L'auteur explique d'une façon très intéligente la poo. Il explique le pourquoi des choses. C'est le livre par excellence pour la poo.
  </div>

  <br/>
</div>

<br/>   
<br/>

voici une partie de mon css

#main .titre{
	color: white;
        background-color: rgb(100,135,220);
        font-size: 100%;
        font-weight: bold;
        padding: 0.5ex 0 0.5ex 1ex;
        margin-right: 1%;
        margin-top: 1%;
        
}

#main .soustitre{
	color: white;
        background-color: rgb(100,135,220);
        font-size: 90%;
        font-weight: bold;
        padding: 0.4ex 0 0.5ex 4ex;
        margin-right: 60%;
        margin-top: 1%;
        clear: both;
}

#main .description{
	text-align: left;
	margin-left: 5%
	float:right;
	padding: 0.4ex 0.5ex 0.5ex 4ex;
}

#main .image{
	float:left;
	margin-left: 1%;
	padding-right: 1ex;

}

le code au complet est dispo ici:

http://www.laboiteaprog.com/screen.css

une idée pour corrigé cela

Modifié 25 Mai 2004 par os2

[LaurentDenis]

Vite fait :

Apparemment, c'est un simple problème de "spacer". Ta <div class="image"> étant en float, elle est "retirée" du contenu de ta <div id="main"> dont la hauteur calculée ne tient pas compte de la hauteur de l'image...

Il manque sans doute simplement un "spacer" qui force la div main à s'étendre suffisamment en hauteur.

Le "clear:both" du <div class="soustitre"> ne peut pas jouer ce rôle, puisque le spacer doit être placé après les flottants, et pas avant.

Au plus simple, applique

br.spacer {
clear: both;
}

à

<div class="titresection">...</div>
<div id="main">
    <div class="soustitre">...</div>
    <div class="image">...</div>
    <div class="description">...</div>
    <br class="spacer" />
</div>

En éliminant les autres <br /> totalement inutiles (une règle de margin-top ou de margin-bottom sur les div te donnera l'espacement vertical recherché sans truffer le code HTML de br injustifés.

Au passage, la syntaxe <br /> avec un espace avant le / est préférable pour des raisons de compatibilité.

Surtout, pourquoi ne pas améliorer la structure XHTML avec un balisage plus significatif :

<div id="main">

<h3>Conception et programmation orienté objet</h3>

<div class="image">...</div>

<p class="description">... </p>

<br class="spacer" />

</div>

en procédant de même avec les h1 et h2 qu'il faut pour le reste de la page...

Côté accessibilité, alt="img du livre" ne convient pas : ça n'apportera aucune information pertinente à l'utilisateur qui ne voit pas les images (navigateur texte, braille, lecteur d'écran...). Plutôt que de vouloir décrire la couverture de chaque livre, il vaut mieux mettre systématiquement un alt vide (alt="") pour éliminer l'image des médias non graphique. L'information perdue est négligeable.

Enfin, par curiosité, pourquoi le choix de "ex" comme unité de padding ?