Over on my blog at , I've added an audio player with a stylish round shape using CSS. It's positioned neatly in the top left corner of the image in the latest post.
In my current browser (Firefox 46.0), I'm noticing that the bottom and left edges of the player are being trimmed off.
Furthermore, when scrolling up the page, the audio widget appears to float over the fixed header image instead of staying behind it like the rest of the content on the page.
I'm seeking advice on how to fix the trimming issue on the left and bottom of the player as well as ensuring that it stays behind the header when scrolling up.
Below is the CSS code for the audio player:
#player {
width:30px;
height:30px;
overflow:hidden;
position:absolute;
margin-top:45px;
margin-bottom:30px;
margin-left:20px;
padding: 0 0 0 2px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px; }