www.webdeveloper.com
Results 1 to 3 of 3

Thread: trouble stacking two images

  1. #1
    Join Date
    Apr 2012
    Posts
    2

    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
    Code:
    #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
    Code:
    <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 -->

  2. #2
    Join Date
    Sep 2006
    Location
    new york
    Posts
    254
    Cannot quite see your problem (viewing on MAC), but notice a couple of things

    (1) Z-INDEX [your #userpic is NOT "positioned"] see for example http://www.w3schools.com/cssref/pr_pos_z-index.asp
    The z-index property specifies the stack order of an element.

    An element with greater stack order is always in front of an element with a lower stack order.

    Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
    (2) Image tag <img src="___.jpg"> is an "emptly" tag (NO closing </img> as shown in your HTML)
    Last edited by auntnini; 04-27-2012 at 05:06 PM. Reason: typos

  3. #3
    Join Date
    Mar 2011
    Posts
    1,109
    Try:
    Code:
    #profile_pic{
    	position:relative; top:0; left:0;
    	float:left;
    	width:225px;
    	height:300px;
    }
    
    #userpic{
    	
    	position:absolute; top:0; left:0;
    	width:225px;
    	height:300px;
    	z-index: 1;	
    }
    
    #profile_overlay {
    	
    	position:absolute; top:0; left:0;
    	width:225px;
    	height:300px;
    	z-index: 2;
    }
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles