[Réglé] Problème de blocs :'(

Bonjour,

J'ai un problème d'affichage entre IE/Firefox, et c'est un problème que j'avais l'habitude de contourner en mettant le <div class="bloctop"> à l'intérieur d'un tableau. Aujourd'hui, j'aimerais régler ce problème une fois pour toute grâce à votre aide.

L'exemple se trouve ici :
http://lateambob.free.fr/

Pour la source du code, vous n'avez qu'à faire un clic droit sur la page pour l'obtenir... le code est propre . Je n'ai mis que l'essentiel.

Comme vous pouvez le voir, sur IE la page s'affiche bien, et sous Firefox, il y a un bug. IE tiens compte du contenu du <div class="bloctop"> mais pas Firefox.

Je pourrais très bien ajouter un "height:XXpx" dans la class "bloctop" pour fixer la hauteur de la case, mais n'y a t'il pas un autre moyen ? de façon à ce que ce soit automatique ?

Merci.
Modifié par Sammuel (15 Oct 2005 - 15:59)

ok, merci pour ton aide !

Salut.
pourquoi tu mets tes 2 blocs en float un seul suffirait non?

En fait le mieux serait de faire ainsi pour ton code, le dl sert à dessiner ton cadre et la liste de type ul en float permettra en effet de faire 2 colonne. Vires bien entendu tous les div inutiles:

html:
-----

<dl>
<dt>Le Top Artistes & Paroles de chansons</dt>
<dd>

<!-- 1 ere col -->
<ul>
<li>1 - Lorie - 28630</li>
<li>
<!-- (...) -->
</ul>


<!-- 2 eme col -->
<ul>
<li>2 - Shakira - 23337</li>
<li>
<!-- (...) -->
</ul>

<div class="cleaner">&nbsp;</div>
</dd>
</dl>

et css:
-------

dl {
background: url(image_du_bas) no-repeat bottom;
padding-bottom: XXpx /* = taille de ton img */
}
dt {
background: url(image_du_haut) no-repeat top;
height: XXpx /* = au minimum taille de ton img, fait une image + grande si jamais le titre pousse trop le dt */
}
dd {
background-color: pink
}
dl ul {
float: left; width:50%
}
Modifié par brunob (15 Oct 2005 - 16:33)