CSS: Button Visibility Problem - html

Question

I am working on a project with a video player. I want to add play/pause and skip buttons together but one of the buttons is always invisible, however working. The codes I am using:
in .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 js file work properly but the skip button is invisible. I have tried to create a different class in css file for the skip button and updated the html file accordingly but this gave the same output also. Can anyone say what mistake I am making and how to correct it?
Thanks in advance.
Some extra 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

Updated: This will give you three buttons. Do you want pause/play combined?
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>

Answer 2

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 .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 for skip button div class worked while for playpause button, div id works and div class just kills the button. It is a little awkward as the two buttons have the same structe in css file.
I tried to seperate the classes for two buttons earlier but this time it finally worked.
Thanks to lasseespeholt.