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. Here is my code for a simple audio player:
HTML:
[CODE]
<div id=”audioplayer”>
<span class=”eightonesmall” id=”audiotext”> 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.