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 -->