CSS: button visibility issue

Question

I am working on a project with a video player. I want to add play / pause and skip the buttons together, but one of the buttons is always invisible, however it works. The codes I use are:

in the .css file:

.buttons { position:absolute; top: 326px; left:150px;  }
.buttons DIV { width: 26px; height: 20px; cursor: pointer; }
.buttons .pause { background-image: url("button_pause.png"); }
.buttons .play { background-image: url("button_play.png"); }
.buttons .skip { background-image: url("button_skip.png"); }

in html file:

<div class="buttons">
    <div id="skip" onclick="skipCurrentSong();"></div>
    <div id="playpause" onclick="setPlayPause();"></div>
</div>

The functions in the js file work correctly, but the skip button is invisible. I tried to create another class in the css file for the skip button and updated the html file accordingly, but this also gave the same result. Can anyone tell me what error I am making and how to fix it?

Thanks in advance.

Some additional codes:

.css file:

@CHARSET "UTF-8";

BODY { height: 530px; overflow: hidden; }

#tv { width: 532px; height: 443px; background: url("tv.png") no-repeat; margin: 0 auto; margin-top: 20px; z-index: 3; position: relative; }
#title { color: #dddddd; text-align: right; float: right; margin-top: 320px; margin-right: 120px; }


.buttons { position:absolute; top: 326px; left:150px;  }
.buttons DIV { width: 26px; height: 20px; cursor: pointer; background-color: white;}
.buttons .pause { background-image: url("button_pause.png"); }
.buttons .play { background-image: url("button_play.png"); }
.buttons .skip { background-image: url("button_skip.png"); }

FORM { display: block; margin: 0 auto; background: url("player.png"); height: 295px; width: 482px; clear: both; position: relative; top: -421px; margin-bottom: -295px; z-index: 4; }
FORM LABEL { color: #00aad4; margin-bottom: 10px; padding-top: 40px; }
FORM INPUT { border: none; border-bottom: 3px solid #00aad4; font-size: 24px; width: 200px; }
FORM * {  display: block; margin: 0 auto; text-align: center; }
FORM .loader { margin-top: 10px; }


.loader { background: url("load.gif"); width: 16px; height: 16px; margin: 0 auto; visibility: hidden; }
.load .loader { visibility: visible; }

in html file:

<div id="tv">

    <div id="title"></div>

    <div class="buttons">
        <div id="playpause" onclick="setPlayPause();"></div>
        <div id="skip" onclick="skipCurrentSong();"></div>
    </div>

</div>

Answer 1

I changed the .css code as:

.skipbutton { position:absolute; top:326px; left:120px;  }
.skipbutton DIV { width: 26px; height: 20px; cursor: pointer; background-color: gray;}
.skipbutton .skip { background-image: url("button_skip.png"); }

.buttons { position:absolute; top: 326px; left:90px;  }
.buttons DIV { width: 26px; height: 20px; cursor: pointer;  }
.buttons .pause { background-image: url("button_pause.png"); }
.buttons .play { background-image: url("button_play.png"); }

and changed the .html as:

<div id="tv">

    <div id="title"></div>

    <div class="skipbutton">
        <div class="skip" onclick="skipCurrentSong();"></div>
    </div>

    <div class="buttons">
        <div id="playpause" onclick="setPlayPause();"></div>
    </div>

</div>

surpsiringly div-, , playpause, div id , div- . , css.

, - .

lasseespeholt.

Answer 2

:. . / ?

CSS

.buttons { position:absolute; top: 326px; left:150px;  }
.buttons div { width: 26px; height: 20px; cursor: pointer; background-color: white;}
.buttons #pause { background-image: url("button_pause.png"); }
.buttons #play { background-image: url("button_play.png"); }
.buttons #skip { background-image: url("button_skip.png"); }

HTML:

<div id="tv">

    <div id="title"></div>

    <div class="buttons">
        <div id="play" onclick="setPlayPause();"></div>
        <div id="pause" onclick="setPlayPause();"></div>
        <div id="skip" onclick="skipCurrentSong();"></div>
    </div>

</div>