Skip to main content

Topic: CSS help w/ iOS (Read 957 times) previous topic - next topic

0 Members and 1 Guest are viewing this topic.
  • AliceWonder
  • [*][*][*]
CSS help w/ iOS
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: [Select]
<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: [Select]
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.

CSS help w/ iOS
Reply #1
Try adding -webkit-appearance:none to the buttons.