Ruban décoratif, positionnement relatif et absolu

J'essai de mettre un ruban décoratif superposé à une image dans un div.
Cela fonctionne bien sous firefox, élas Google Chrome n'affiche pas correctement le ruban puisque celui-ci est positionné à gauche. Est-ce que vous pouvez m'aider s'il vous plaît.
http://www.simonbedard.ca/index.php/portfolio

<div class="post-folio"> 
	<div class="post_meta_data"> 
		<h3><a href="http://www.simonbedard.ca/index.php/6/" title="Red Velvet">Red Velvet</a></h3> 
		<small>2010 / 01 / 17</small> 
	</div> 
	<div class="post-content-folio">
		<img src="http://simonbedard.ca/images/red_velvet.png" alt=""> 
		<ul> 
			<li class="categorie">Catégorie: Page web</li> 
			<li class="cms">CMS: Wordpress<li/> 
			<li class="g-software">Logiciels: Inkscape, Gimp</li> 
			<li class="language">Language: HTML, CSS, JavaScript</li> 
			<li class="download"><a href="#" title="Red Velvet - Télécharger">Télécharger</a></li> 
		</ul> 
	</div> 
<img src="http://www.simonbedard.ca/images/ribbon.png" class="ribbon"> 
</div> 

.content-folio{float:left;width:940px;}
.post-folio{position:relative;width:940px;height:340px;}
.post-content-folio{width:940px;height:340px;background:#F8F8F8;}
.post-content-folio img{float:right;}

.ribbon{position:absolute;width:210px;height:210px;margin-left:-200px;margin-top:-10px;}

Modifié par Binary (18 Jan 2010 - 20:55)

<div class="post-folio"> 
        <img src="http://www.simonbedard.ca/images/ribbon.png" class="ribbon"> 
	<div class="post_meta_data"> 
		<h3><a href="http://www.simonbedard.ca/index.php/6/" title="Red Velvet">Red Velvet</a></h3> 
		<small>2010 / 01 / 17</small> 
	</div> 
	<div class="post-content-folio">
		<img src="http://simonbedard.ca/images/red_velvet.png" alt=""> 
		<ul> 
			<li class="categorie">Catégorie: Page web</li> 
			<li class="cms">CMS: Wordpress<li/> 
			<li class="g-software">Logiciels: Inkscape, Gimp</li> 
			<li class="language">Language: HTML, CSS, JavaScript</li> 
			<li class="download"><a href="#" title="Red Velvet - Télécharger">Télécharger</a></li> 
		</ul> 
	</div>
</div> 

.content-folio{width:940px;}
.post-folio{position:relative;width:940px;height:340px;}
.post-content-folio{width:940px;height:340px;}
.post-content-folio img{float:right;}
.ribbon{position:absolute;width:210px;height:210px;top:115px;right:-30px}

Est-ce que c'est la bonne méthode? Peut-être qu'il est possible de faire plus simple?
Modifié par Binary (18 Jan 2010 - 21:44)