Jud Jud - 5 months ago 11
CSS Question

Audio player widget styling

On my blog here http://ukgraffiti.tumblr.com I have a little audio player. I've used CSS to make the widget round in shape and also position it so that it sits in the top left corner of the associated image (you can see it in the latest post at the top of the blog).

In my browser (Firefox 46.0) the bottom and left edge of the player are cut off.

Also, as you scroll the page up, the audio widget floats OVER the fixed header image instead of behind it like the rest of the page content.

Can anyone explain what is causing the trimming to the left and bottom of the player, and also how to make sure it goes behind the header as you scroll up?

CSS for 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; }

Answer

Please try the below style for player:

#player {
    width:27px;
    height:27px; 
    overflow:hidden; 
    position:absolute;
    margin-top:45px; 
    margin-bottom:30px; 
    margin-left:20px; 
    border:1px solid white;
    line-height:46px;   
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    z:index:-1;
}

And in the #header selector add z-index:1; with this the audio widget floats behind the fixed header image. I hope this helps.