Background, z-index et superposition

Salut,

Je galère pour mettre en forme une page.
Je veux entourer mon message de "coins cornés" pour faire un petit effet.
Comme d'habitude, tout se passe bien avec Firefox et pas avec IE (7).

Firefox "comprend" bien le z-index et l'instruction margin-top qui me fait remonter le "coinBas" en dessous de "billet".
Mais pas IE qui place systématiquement "coinBas" au dessus de "billet" et donc me masque un bout du message.

J'ai essayé de trafiquer tout ce que j'ai pu, pas moyen...
La seule astuce est de mettre le "coinBas" en background de ".billet", là ca marche, mais ce n'est pas ce que je veux

Ci-dessous le code et une illustration.

Si quelqu'un à une idée...

Merci d'avance,
a+

<div id="billet-529">
  <div class="coinhautbillet"></div>
    <div class="boite20">
      <h2>Randonn&eacute;e de Saint-R&eacute;my-de-Provence</h2>
    <div class="infosbillet">
      <p>Jeudi 6 mars 2006</p>
      <p>rubrique(s) : <a href="#" class="arubriques">p&eacute;tage de guelle</a>, <a href="#" class="arubriques">divers</a>, <a href="#" class="arubriques">saucisse</a> </p>
      <p><a href="#">18 commentaires</a></p>
    </div>
    <div class="billet">
      <p>A deux pas des Baux de provence, dans une ambiance parfum&eacute;e de thym et de romarin, nous avons d&eacute;couvert une superbe r&eacute;gion.</p>
      <p>Cette rando est la premi&egrave;re de l&rsquo;ann&eacute;e, donc tous les passionn&eacute;s &eacute;taient l&agrave;. Notre petit groupe &eacute;tait compos&eacute; notamment </p>
      <p>D&egrave;s le d&eacute;but le parcours uper ludique, singles techniques dans la for&ecirc;t, bonne tes Alpilles, le ciel bleu unique comme on ne peut voir que dans ce coin&hellip;</p>
      <p>Par moment, des parties atypique comme le moment o&ugrave; l&rsquo;on d&eacute;vale un single en terre rouge &agrave; mi-chemin entre le lac du Salagou et l&rsquo;ocre de Rustrel.</p>
    </div>
  </div>
  <div class="coinbasbillet"></div>
</div>

.coinhautbillet {
	background: url(images/coinHaut.jpg) no-repeat top left;
	height: 63px;
	z-index: 1;
	margin-bottom: -40px;
}
.billet {
	z-index: 1000
}
.infosbillet {
	margin-bottom: 20px;
	margin-left: 3px;
	padding-left: 8px;
	border-left: solid 8px #b7b29c;
	font-size: 10px;
	color: #999;
}
.infosbillet p {
	margin: 0;
	padding 0;
}
.coinbasbillet {
	background: url(images/coinBas.jpg) no-repeat bottom right;
	height: 63px;
	z-index: 1;
	margin-top: -40px;
	margin-bottom: 20px;
}

Modifié par Gooze (27 Jan 2007 - 10:20)

Bonjour à toi Gooze, et bienvenu sur Alsa

En survolant ton code, je me suis rendue compte que tu n'employais pas tout à fait la bonne méthode pour arriver à tes fins ...
En effet, pour positionner tes coins, tu utilises des balises vides :

  <div class="coinhautbillet"></div>
  <div class="coinbasbillet"></div>

Or...
Ceci est déconseillé.

Je te conseille donc la lecture de cet article : Faire un cadre arrondi ou graphique en CSS et XHTML
Et t'invite à revenir si jamais tu n'arrives pas au résultat escompté...

Bonne continuation et à bientôt

Edition du lien vers un nouveau tutoriel
Modifié par Cygnus (27 Jan 2007 - 11:43)

Merci pour l'info.
Je vais voir si ca s'adapte à mon cas

a+

Hélas c'est pareil.

Dans l'absolu, c'est ca que je veux faire.
La seul différence c'est que mon bloc de texte doit "monter" sur les blocs au dessus et en dessous.

a+

Je viens d'aller voir le lien de l'edit.
En fait c'est toujours pareil
D'ailleurs dans tous ce type de tutos les blocs sont alignés les uns après les autres.

Dans mon cas il faut que le bloc central passe un peu au dessus des blocs supérieurs et inférieurs.

En fait ce qui me fait tourner en bourrique c'est que ca marche très bien dans le cas du bloc supérieur mais pas celui du bloc inférieur.

En tout cas merci pour le coup de main.

Je suis toujours preneur d'un éventuelle astuce

a+