Question

Basically I have a Picture in a div nested in 2 divs. I wanted to overlay a piece of tape onto it at the corner of the picture.

So I made a div for that piece of tape image and put it at the bottom of the document giving it the position of relative and giving it these attributes.

#tape
{
    width: 100px;
    height: 65px;
    position:relative;
    left: 25px;
    top: -662px;
}

And here is the Picture’s attributes:

#character-spotlight 

    {
        margin-left:50px;
        width:250px;
        height:250px;
        float:left;
        z-index:1;
    }

Bot of these Div’s are nested into

#content 
{
    width:800px;
    height:1360px;
    background-image:url(Cork.Board.png);
    background-size:100%;
    float:left;
    display:block;
}

Which is itself nested into

#container 
{
    width: 1024px;
    height:1600px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 50px;
    display:block;
}

Here is the webpage

http://www.workaholicsfans.com/characters-files/Adam-Demamp.html

It works fine in Chrome but not IE and Firefox.
Any help would be greatly appreciated

Answer 1

(There is no link in your post) I can hardly believe the situation you described and provided css could work. The fact that you have it working in Chrome is just pure luck i guess, are you might have been playing with the numbers to make it fit.

The solution is actualy rather simple.

<div class='picture-wrapper'>
 <img class='picture' src='picture.../>
 <img class='tape' src='tape... />
</div>

then in the css

.picture-wrapper {
 position: relative;  /* this now acts as the reference for  position absolute of the children */
}
.tape {
 display: block;
 position: absolute;  /* position according to its parent */
 top: 0;  /* top position */
 left: 0; /* left position */
 z-index: 5; /* bring to front */
}

That should do the trick.

edit:
i just saw you added the link. If you want the piece of tape to overflow the picture edges, the easy way would be to add some padding-top and padding-left to the wrapper. something like this:

padding: 8px 0 0 8px;