Paul Schneider Paul Schneider - 10 months ago 48
CSS Question

Positioning a div between two buttons

I'm trying to have a remote control with some buttons, and a div with the now playing info between two of them.

but it doesn't work.

it looks like this in FF with ipad settings (this is how i want it)

but looks like this on an actual ipad..

as you can see, on an actual ipad, it renders differently, and i don't know how to fix it.


<div id="buttons">
<button id="prev" class="control" onmousedown="skip('prev')"></button>
<div id="info"> gfegrbhthehrerhg</div>
<button id="next" class="control" onmousedown="skip('next')"></button><br />

<button id="rwd" class="control" onmousedown="changeSpeed(-2)"></button>
<button id="stop" class="control" onmousedown="emitCommand('stop')"></button>
<button id="play" class="control" onmousedown="emitCommand('play: loop: true speed: 100')"></button>
<button id="ffwd" class="control" onmousedown="changeSpeed(2)"></button>


button.control {
display: inline-block;
background-size: 150px 150px;
margin: 0.5%;

div#info {
height: 150px;
margin: 0 1.1%;
position: relative;
top: -58px;
margin-bottom: -50px;
border:1px solid red;
display: inline-block;

button#prev {
margin-left: 160px;

button#rwd {
margin-left: 160px;

#buttons {
margin: 0 auto;
border: 1px solid lightgray;

what am I doing wrong? what is the correct way to accomplish this?



vertical-align: top; to div#info

And remove the top: -58px; from div#info too

Here's a link to a working example: EXAMPLE LINK