28172 sujets

CSS et mise en forme, CSS3

Problème de div, float, retour à la ligne sur IE7

Bonjour !

Je suis en train de mettre en place un site de e-commerce, et je prépare des boutons dynamiques. Que ce soit pour les prix, ou pour les boutons textes.

J'ai un souci : dans un "bloc programme", quand les boutons sont trop grands, ils se mettent les uns en dessous des autres sous Firefox, IE6, Opera, Safari (parfait donc), sauf sur IE7 ou les boutons se coupent et disparaissent !

Un petit screen du rendu :

http://ariakan.free.fr/ftp/vrac/boutons_css.jpg

Les textes et les prix sont dynamiques, les boutons sont composés ainsi :

> bloc qui entoure tout le bouton
>> une partie gauche (image de bordure gauche)
>> une partie centrale avec fond jaune et le texte
>> une partie droite (image et bordure droite)

Je vous mets le code de l'exemple du screen !


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
* {
	margin:0px;
	padding:0px;
}
html {
	font-size: 100%;
}
body {
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
img {
	border:none;
}
.float_left {
	float:left;
}
/*LISTE PROGRAMMES*/
.liste_progs_ligne {
	width:728px;
	background:url(div/css/fond_liste1.gif) repeat-y;
	overflow:hidden;
	margin:10px 0 0 20px;
	padding:0 0 9px 0;
}
.bloc_liste {
	width:349px;
	border:#000000 1px solid;
}
.bloc_liste .liste_affiche {
	margin:4px 7px 0px 10px;
	display:block;
}
.bloc_liste .liste_type_prog {
	text-align:center;
	padding:3px 0;
	width:63px;
	margin:0px 7px 7px 10px;
	background:#CCCCCC;
	font-weight:bold;
	color:#FFFFFF;
}
.bloc_liste .liste_titre_prog {
	font-weight:bold;
	font-size:14px;
	color:#000000;
	text-transform:uppercase;
	text-decoration:none;
}
.bloc_liste .liste_voir_fiche {
	font-size:12px;
	font-weight:bold;
	color:#696969;
	text-decoration:underline;
}
.bloc_liste .liste_titre_original {
	font-size:10px;
	color:#696969;
}
.bloc_liste .liste_suite {
	font-size:10px;
	color:#696969;
}
.bloc_liste .liste_acteurs {
	color:#000000;
	text-decoration:underline;
}
.bloc_liste .liste_infos {
	padding:0px 5px 14px 84px;
}
.bloc_liste .liste_liste_synopsis {
}
.bloc_liste .liste_plus_infos {
	font-size:10px;
}
.bloc_liste .liste_boutons {
	margin:10px 0 0 0;
	overflow:hidden;
}
/*BOUTONS*/
/* Petit Bouton*/
.bouton_prix {
	height:22px;
	margin:0 5px 5px 0;
	padding:0px;
	overflow:hidden;
	float:left;
}
.bouton_prix .btn_texte {
	height:22px;
	line-height:22px;
	margin:0px;
	padding:0px;
	background:#FECB00;
	font-family:"Arial Black", sans-serif;
	font-size:12px;
	float:left;
	text-transform:uppercase;
}
.bouton_prix .btn_lien {
	text-decoration:none;
	color:#FFFFFF;
	float:left;
	margin:0px;
	padding:0px;
}
.bouton_prix .prix {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
	color:#696969;
}
</style>
</head>
<body>
<div class="liste_progs_ligne">
  <div class="bloc_liste">
    <div class="float_left"><img src="img/5943_w_63.jpg" alt="Film" class="liste_affiche" />
      <div class="liste_type_prog">PACK</div>
    </div>
    <div class="liste_infos"> <a href="" class="liste_titre_prog">Pushing Daisies : S.1- L'Intégrale </a> <br />
      <img src="div/css/picto_cc.gif" alt="Coup de coeur" class="float_right" /> <span class="liste_synopsis">De temps en temps, une série d'un genre différent naît, une série merveilleusement différente... De temps en temps, une série d'un genre différent naît, une série merveilleusement différente... C'est l'histoire de Ned, un pâtissier <a href="" class="liste_suite">[...]</a></span><br />
      <span class="liste_suite">(9 programmes)</span><br />
      <a href="" class="liste_voir_fiche">voir la fiche</a>
      <div class="liste_boutons">
        <div class="bouton_prix"><a href="" class="btn_lien"><img src="div/css/btn_jaune_petit1.gif" alt="Ajouter au panier"></a>
          <p class="btn_texte"><a href="" class="btn_lien">Ajouter au panier <span class="prix">19.99 €</span></a></p>
          <a href="" class="btn_lien"><img src="div/css/btn_jaune_petit2.gif" alt="Ajouter au panier"></a></div>
        <div class="bouton_prix"><a href="" class="btn_lien"><img src="div/css/btn_jaune_petit1.gif" alt="Ajouter au panier"></a>
          <p class="btn_texte"><a href="" class="btn_lien">Ajouter au panier <span class="prix">19.99 €</span></a></p>
          <a href="" class="btn_lien"><img src="div/css/btn_jaune_petit2.gif" alt="Ajouter au panier"></a></div>
      </div>
    </div>
  </div>
  <div class="bloc_liste">
    <div class="float_left"><img src="img/5943_w_63.jpg" alt="Film" class="liste_affiche" />
      <div class="liste_type_prog">PACK</div>
    </div>
    <div class="liste_infos"> <a href="" class="liste_titre_prog">Pushing Daisies : S.1- L'Intégrale </a> <br />
      <img src="div/css/picto_cc.gif" alt="Coup de coeur" class="float_right" /> <span class="liste_synopsis">De temps en temps, une série d'un genre différent naît, une série merveilleusement différente... De temps en temps, une série d'un genre différent naît, une série merveilleusement différente... C'est l'histoire de Ned, un pâtissier <a href="" class="liste_suite">[...]</a></span><br />
      <span class="liste_suite">(9 programmes)</span><br />
      <a href="" class="liste_voir_fiche">voir la fiche</a>
      <div class="liste_boutons">
        <div class="bouton_prix"><a href="" class="btn_lien"><img src="div/css/btn_jaune_petit1.gif" alt="Ajouter au panier"></a>
          <p class="btn_texte"><a href="" class="btn_lien">Acheter <span class="prix">19.99 €</span></a></p>
          <a href="" class="btn_lien"><img src="div/css/btn_jaune_petit2.gif" alt="Ajouter au panier"></a></div>
        <div class="bouton_prix"><a href="" class="btn_lien"><img src="div/css/btn_jaune_petit1.gif" alt="Ajouter au panier"></a>
          <p class="btn_texte"><a href="" class="btn_lien">Louer <span class="prix">19.99 €</span></a></p>
          <a href="" class="btn_lien"><img src="div/css/btn_jaune_petit2.gif" alt="Ajouter au panier"></a></div>
      </div>
    </div>
  </div>
</div>
</body>
</html>


J'espère que vous arriverez à trouver la petite astuce qui me manque !!
Merci d'avance ! Smiley smile
Ah et petite précision : je pourrai mettre un clear pour le second bouton, mais non, il faudrait que ça se mette à la ligne que quand il y en a besoin, donc que ça soit automatique sans devoir rajouter une class !
Sujet clos
Aller à