I'm having a really odd problem with the html audio player. It looks fine if I don't click the play button, but the moment I click the play button, it would disappear and reappear around 15-20 pixels lower. The odd thing is that the div the player is in does not move, only the visual of the player moves. What I mean is if I click the empty space above the moved player (where it originally was), I can pause/adjust volume/etc, but if I click where the buttons now actually are nothing happens. Essentially all the functions didn't reposition, only the visuals did.

Here is my code for a simple audio player:

HTML:
Code:
<div id="audioplayer">
       <span class="eightonesmall" id="audiotext">&nbsp;Background music control</span>
        <audio controls="controls">
		<source src="music/liangzhuhualuowuhui.ogg" type="audio/ogg" />
                <source src="music/liangzhuhualuowuhui.mp3" type="audio/mp3" /> 
        </audio>
</div>
CSS:
Code:
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow:hidden;
	background-image:url(../pictures/drawings/backgrounds/menubackgroundbubbles.png);
	background-position:center;
	background-attachment:fixed;
}

#audiotext {
	vertical-align:middle;
	color:#CCCCCC;
}

#audioplayer {
	position:fixed;
	top:10px;
	right:10px;
	border:3px double #FFF;
	height:30px;
}
The same problem occurs for an audio player that I've set to hidden, and will appear if I click an arrow and disappear if I click another arrow. It hides it and re-appears fine, just the player shifts down 15-20 pixels if I click play...

HTML:

Code:
<div class="collapsearrow">
	<img src="pictures/thumbnails/musicboxbuttons/collapsearrow.png" alt="collapsearrow"
	onclick="document.getElementById('song1').style.visibility='visible';"/>Liangzhu
	</div>
<div id="song1" style="visibility:hidden;">
	<img src="pictures/thumbnails/musicboxbuttons/contractarrow.png" alt="contractarrow"
	onclick="document.getElementById('song1').style.visibility='hidden';"/>
	<audio id="musicboxplayer" controls="controls">
	        <source src="music/liangzhuhualuowuhui.ogg" type="audio/ogg" />
		<source src="music/liangzhuhualuowuhui.mp3" type="audio/mp3" /> 
	</audio>
</div>
CSS:

Code:
#musicboxplayer {
	position:relative;
	width:86px;
	height:25px;
}

.collapsearrow {
	float:left;
}

#song1,#song2,#song3,#song4 {
	width:150px;
	float:left;
}
Does anyone know what's causing this?
Thanks.