Trouble stacking two images

I’m trying to stack two images on top of each other inside of a div. It is working on everything (even ie) except for firefox on windows (works on firefox mac). On firefox windows it is getting positioned right next to the image instead of over it. The image on top is a overlay in the corner (for those of you looking at the link). I was hoping someone might be able to help me find what is wrong.

here is the site: http://aaronhaas.com/pitchshark7/profile.php?user_id=5

CSS


#profile_pic{
	
	position:relative;
	float:left;
	width:225px;
	height:300px;
}

#userpic{
	
	float:left;
	width:225px;
	height:300px;
	z-index: 1;	
}

#profile_overlay {
	
	position:absolute;
	width:225px;
	height:300px;
	z-index: 200;
}


HTML


<div id='profile_pic'>	
        <img id='profile_overlay' src='img/users/pic_overlay3.png' >
	<img id='userpic' src='img/users/pperrette_225x300.png'></img>
</div> <!-- close profile pic -->

It’s not working of FF Mac either. Try removing the float from #userpic . Also, the z-index won’t do anything, as it only works on positioned elements.

#userpic {
  height: 300px;
  width: 225px;
}

that fixed it thanks. I thought I had tried that but I must not have.