[Résolu] Cadre arondi incompatible avec IE

Bonsoir,

J'ai longtemps cherché "la" solution pour obtenir un cadre arrondis le plus compatible possible. Je me suis donc arrêté sur une largeur fixe avec un bandeau en haut, en bas et pour le fond du contenu. Sous firefox, pas de problème mais sous IE 6

Voici le code html :

<div class="billet">
	<h3>Titre</h3>
	<div class="billet_body">
		<p>Contenu</p>
		<p>Contenu</p>
		<p>Contenu</p>
		<p>Contenu</p>
		<p>Contenu</p>
		<p>Contenu</p>
	</div>
	<div class="billet_footer">
		<p>Footer</p> 
	</div>
</div>

et la CSS :

div.billet {
  position: relative;
  color: #000000;
  font: 12px/1.5 Geneva, Arial, Helvetica, sans-serif;
  background: #ffffff url(img/billet-center.png) repeat-y;
  left: 240px;
  width: 550px;
  margin: 5px 0 5px 20px;
  } 
div.billet_body {
  padding: 15px;
  margin: -25px 0 0 0;
  }
div.billet h3 {
  font-size: 1.3em;
  padding: 15px;
  margin: 0;
  background: url(img/billet-top.png) no-repeat;
  }
div.billet_footer p {
  background: url(img/billet-bas.png) bottom no-repeat;
  font: 10px/1.2 Geneva, Arial, Helvetica, sans-serif;
  text-align: right;
  padding: 15px;
  margin: -3em 0 0 0; 
}

Et la petite page d'exemple en ligne

Le problème vient du bas du cadre qui ne s'affiche pas sous IE...
Merci d'avance
++
Modifié par joeyinbox (04 Nov 2006 - 20:05)

Bonjour,

Je ne suis pas un expert, mais je pense que tu as un peu mal structuré ton code pour former ton bloc "billet". Tu as utilisé deux bloc pour former le body et le footer, pourquoi ne l'as tu pas fais pour le haut ?

En plus je doute que l'utilisation d'une image en background pour un titre soit possible ... .

Pour ton probleme, à mon avis, tu devrai regarder du côté des feuilles de styles par rapport à ca :

<div class="billet_footer">
    <p>Footer</p> 
</div>

Bref, j'aurai plutôt fais trois bloc différent, top, body et footer, et je leur aurai associé leur background adéquat.

Comme je l'ai dis, je ne suis pas un expert, mieux vaut attendre l'avis de quelqu'un plus confirmé que moi
Modifié par chpego (04 Nov 2006 - 10:35)

salut,

avec le code html que tu as, tu peux sans problème avoir le résultat en fluide.

Au passage le div .billet_footer ne sert à rien sauf si tu comptes y mettre autre chose que le <p> unique qui s'y trouve.

ceci :

<div class="billet">

	<h3>Titre</h3>

	<div class="billet_body">

		<p>Contenu</p>

		<p>Contenu</p>

		<p>Contenu</p>

		<p>Contenu</p>

		<p>Contenu</p>

		<p>Contenu</p>

	       <p class="billet_footer">Footer</p> 

	</div><!-- fin billet_body -->
</div><!-- fin billet -->

suffit largement et permet 4 bordures en fluide compatible tous navigateurs.
Modifié par clb56 (04 Nov 2006 - 10:53)

Bonsoir,

Effectivement, j'ai mal fait attention pour mon footer.
Après avoir suivi vos indications, j'ai modifié ce bout de css :

.billet_footer {
  background: url(img/billet-bas.png) bottom no-repeat;
  font: 10px/1.2 Geneva, Arial, Helvetica, sans-serif;
  text-align: right;
  padding:15px;
  margin: 10px 0 0 -15px;
}

Et ça passe !
Merci beaucoup pour votre aide.

++

Plop !

Dans un soucis de détail, pour que le texte du contenu ne dépasse pas sur la droite, il faut sortir le paragraphe du footer du bloc contenu et modifier son margin en :

  margin: 10px 0 0 0px;

Voilà, le sujet est réellement résolu maintenant
++