Question

I really hate having to result to this, but this problem has me on the edge of my seat.

To make a long story short, I’m trying to add a small music player widget on my site along with a music tab that will display the music player on hover. I’ve accomplished this, but every time I hover over the music tab icon, it’ll move to its designated position but leaves behind an unwanted duplicate of itself.

Here’s the first portion of the code:

<style type ="text/css">
    #musicplayer{
        text-align: center;
        font-size: 11px;
        position:absolute;left:0px;top:-100px;
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        z-index:999;
    }

    #musicplayer:hover{
        top:0px;
    }

    #music{
        padding:3px;
        background: transparent;
        width:175px;
        height: auto;
        margin-left:0px;
        font-family:'Coming Soon';
        z-index: 9999;
        text-align:center;
        padding-left:2px;
        padding-right:2px;
        padding-bottom:70px;
        border-bottom-right-radius:0px;
        margin-top:20px;
    }

    #musictab{
        font-family: 'Coming Soon';
        height:auto;
        padding:3px;
        background:transparent;
        width:30px;
        margin-left:0px;
        margin-top:0px;
        -moz-border-radius:0px;
        border-bottom-right-radius:6px;
        border-bottom-left-radius:6px;
    }
</style>

And here is the div tag that I think may also be causing the problem

<div id="musictab">
    <p><img src="http://i47.tinypic.com/2cpyjv9.jpg" border="0"></a></p>
</div>

Please note that there are other div tags intrinsic to this code, but I omitted them because I don’t think they are causing the problem.

EDIT: Might as well post my website (err, Tumblr page) and you guys can see the problem in action. Any help is greatly appreciated.

Site

Answer 1

    <div id="entry">
        <div class="holder"></div>
        <a href="http://wrjacobs.tumblr.com/post/37948918891/hud-biennial-019">
            <img src="..." alt="hud-biennial-019" width="380px">
        </a>
        <div class="holder"></div>
        <div class="holder"></div>
        <div class="video"></div>
        <div class="holder"></div>
        <div id="musicplayer">
            <div id="music">
                <center>
                <img... />
                <br>
            </center>
        </div>
        <div id="musictab">
            <p>
                <img src="http://i47.tinypic.com/2cpyjv9.jpg" border="0">
            </p>
        </div>
    </div>

1. close your <img /> tags! 🙂

2. this is 1 example of div with the id=”entry” – you should only have one element on each page with the same id, e.g. change id=”entry” to class=”entry”.

3. Each time you add an image as an entry, you add the music player for each entry! Meaning you have added the music player 1 x number of entries on the page. This means even though the top musicplayer is correctly shown, moving that will only show the one beneath it – hope that explains it