Volume on audio player gets bumped to next line [#1487954]

I'm noticing in Chrome and Firefox that the volume control gets bumped down. If I use firebug to shrink it by a pixel, it pops up into place just fine. If I then apply this via css, it does not work. I assume the javascript is doing some calculations that have it off by one pixel. I also tried to apply a percentage instead of pixels and had the same results.

Here is a picture in case my description is confusing: http://twitpic.com/8xnmr9/full

My current hack, since I can't hide the controls, is to simply hide the overflow and the volume disappears. That is less than optimal as it could hide a state where the volume is turned all the way down making for a frustrated user.

Comment	File	Size	Author
#2	7-2-2012 4-03-04 PM.png	2.62 KB	delajed

Comments

Comment #1

kjv1611 commented 27 April 2012 at 02:54

Any clues on this one? I've been seeing similar.

On a Drupal 7 site, when loaded in Chrome or Firefox, the volume control is invisible until you over over a spot just below the player. In Internet Explorer, on the other hand, it looks exactly the way it's supposed to. I've tried modifying the size a couple of different ways, but no good results in doing. Maybe I'll try varying by a pixel in each direction just to see as well.

Comment #2

delajed commented 3 July 2012 at 02:11

Status	File	Size
new	Volume Bar on next line	2.62 KB

I'm having this issue as well, though only when using Chrome. The player looks fine on the latest versions of IE, Firefox, and Safari. I also haven't had any luck playing around with the css to fix it.

~~The issue is also apparent when viewing the audio player demo on http://mediaelementjs.com/ with Chrome.~~

Update: Reinstalling Google Chrome fixed the issue for me.