CSS help w/ iOS, Safari for iOS not playing nice Options

[AliceWonder]

I'm working on an HTML5 / jQuery jukebox - it is suppose to replace a flash based jukebox.

http://www.clfsrpm.net/sample/

The jukebox control buttons are suppose to resize as the window resizes so width/height attributes are not used.
It seems to work everywhere except in Safari for iOS where the buttons for the controls do not show the images (tested on my iPod).
Works just fine in Safari for Windows.
Works just fine in other Linux / Windows browsers
Works just fine in various Android browsers.

Seems to only be a problem in Safari for iOS.

Here's the relevant html:

CODE

<div id="jukebox">
   <div id="jbox-controls">
      <progress max="100" value="0"></progress>
      <button type="button" id="jbox-prev" title="Prev Track">
         <img src="prev.png" alt="[Prev]">
      </button>
      <button type="button" id="jbox-play" title="Play Track">
         <img src="play.png" alt="[Play]">
      </button>
      *snip*
</div>

and the relevant css:

CODE

div#jbox-controls {
    display: inline-block;
    text-align: center;
    width: 100%;
}

*snip*

div#jbox-controls button {
    margin-top: 7px;
    margin-bottom: 7px;
    width: 18%;
    display: inline;
}

div#jbox-controls img {
    width: 100%;
    /*margin: auto;*/
    /*display: inline;*/
}

Thanks for any suggestions.

[Sebastian Mares]

Try adding -webkit-appearance:none to the buttons.