[RESOLU] Problème de "padding: bottom;" avec Chrome et Safar

Bonjour,

J'ai fait un mini site pour présenter quelques intégrations de maquettes, et dans la partie "réalisations", j'ai fait une marge en bas et elle fonctionne seulement avec FF 3.5 et Opera 10, quand j'essaie sur Chrome et Safari, elle fonctionne plus.

Ayant fait plusieurs variantes du code html/css, il y a toujours ce même problème.

Code HTML concerné :

	<div class="contenu_rea">

		<img src="realisations/tracteurs-c1.jpg" alt="Maquette 2"/>
			<ul>
				<li><strong>Ce qui a été fait:</strong> Maquette, intégration (X)HTML, CSS, importation et intégration d'un scripts Javascript (avancement: 95%)</li>
				<li><strong>Validation W3C:</strong> XHTML 1.0 Strict, CSS 2.1</li>
				<li><strong>Comptatible avec:</strong> IE6, Firefox 3, Safari 4, Opera 10, Google Chrome 4</li>

				<li>Voir l'intégration: <a href="realisations/inte_tracteurs-collection/index.html">Page 1</a>- <a href="realisations/inte_tracteurs-collection/description.html">Page 2</a></li>
				<li><a href="http://www.tracteurscollection.tk/">Voir en ligne</a></li>
			</ul>
	</div>

	<div class="contenu_rea">
		<img src="realisations/aides.jpg" alt="Maquette 1"/>

			<ul>
				<li><strong>Ce qui a été fait:</strong> Maquette, intégration (X)HTML, CSS, importation et intégration de scripts Javascript</li>
				<li><strong>Validation W3C:</strong> XHTML 1.0 Strict, CSS 2.1</li>
				<li><strong>Comptatible avec:</strong> IE6, Firefox > 2, Opera > 9</li>

				<li><a href="realisations/inte_aides/index.html">Voir l'intégration</a></li>
			</ul>
	</div>

Code CSS qui va avec :

.contenu_rea {
clear: left;
margin-top: 35px;
}

.contenu_rea img {
margin-right: 25px;
margin-bottom: 17px;
float: left;
border: 1px #808080 dotted;
}

.contenu_rea li {
list-style-type: square;
}

Le margin a été mis sur l'image.

Le site : http://www.chokri-rafik.com/

Image pour voir le bug :
http://chokgfx.free.fr/imagesup/probpad.JPG

Merci.
Modifié par dartktemplar371 (02 Mar 2010 - 23:52)

Est-ce qu'en rajoutant un

<div style="clear:both;"></div>

juste avant de fermer chaque div contenu_rea, ça n'est pas mieux?

Edit: d'ailleurs je pense qu'il est plus correct qu'ensuite, tu appliques ton margin-bottom à la div contenu_rea en elle-même, vu ce que tu veux avoir comme résultat.


Edit2: Pour voir où est-ce que ça cloche dans ces cas-là, je te conseille d'utiliser un inspecteur d'éléments tel que celui dans Firebug, qui est une extension pour Firefox. Cela permet d'observer comment tes éléments sont interprétés et, en fait, rendus.
Modifié par Hybriya (02 Mar 2010 - 00:28)

Salut,

ou bien sans rajouter d'élément :

.contenu_rea {
	overflow: hidden;
}

Lire cette astuce.

Merci ça marche avec la solution de Heyonan.