I'm working with Smarty and when I try to display more than 1 flowplayer player on the same page, my player overlay's only shows on the very last player..

Here's my PHP code:

PHP Code:
              {foreach from=$MostRecent item=i}
                <
div class="grid_6_lg"><h6> {$i.name|truncate:20:""} </h6>
                        <
div class="player_player" href="{$Site_Home}song_messages/{$i.movie}" id="player" style="height:200px; width:200px; float:left; text-align:center; margin-right:15px; background-image:url({$Site_Home}song_images/{$i.image})">

                            <!-- 
play button -->
                            <
img src="{$Site_Home}images/play_large.png" style="margin-top: 30px;" alt="Play this video" />
                        
                            <!-- 
info -->
                            <
div class="info" style="height:40px; background:#000 url({$Site_Home_Local}images/h80.png) repeat-x; opacity:0.7; color:#fff; margin-top:37px; text-align:left; padding:5px 15px; font-family:\"bitstream vera sans\",\"trebuchet ms\"; font-size:12px;    border-top:1px solid #ccc; margin-top:40px;">
                                
Artist{$artist}
                                <
span style="color:#99FF99; display:block; font-weight:bold;">Song{$name}</span>
                            </
div>
                        </
div>
                        <
div class="links">
                        <
a name="fb_share"></a><script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"></script>
                        <a href="songs/view/{$i.artist|replace:' ':'_'}/{$i.name|replace:' ':'_'}/"><img src="{$Site_Home}images/text_now.png" alt="" width="70" height="21" /></a>
                        </div>
                </div>
              {/foreach} 
My CSS Code:
Code:
/* player container */
div.player_player {
	height:200px;
	width:200px;
	border:2px solid #fff;
	outline:1px solid #333;
	-moz-outline-radius:4px;
	cursor:pointer;
	float:left;
	text-align:center;
	margin-right:15px;
}

/* play button */
div.player_player img {
	margin-top:67px;
}

/* info area */
div.player_player div.info {
	height:40px;
	background:#000 url(/img/global/gradient/h80.png) repeat-x;
	opacity:0.7;
	color:#fff;
	margin-top:45px;
	text-align:left;
	padding:5px 15px;	
	font-family:"bitstream vera sans","trebuchet ms";
	font-size:12px;
	border-top:1px solid #ccc;
	margin-top:40px;
}

/* duration data inside info area */
div.player_player div.info span {
	color:#99FF99;
	display:block;
	font-weight:bold;
}
and just incase you're wondering; I have this in my footer:

PHP Code:
                        <script>
                            
flowplayer("div.player_player""{$Site_Home}system/flowplayer/flowplayer-3.2.7.swf"
                                {
literal}
                                {    
                                    
// this is the player configuration. You'll learn on upcoming demos.    
                                    
plugins:  {
                                        
controls:  {
                                            
volumefalse        
                                        
}
                                    }
                                });
                                {/
literal}
                        
</script> 
The player works and functions fine -- its just that the Over-Lays wont show on every player.. Any ideas/thoughts?