Skip to main content ↑ ↓

Notice

Please note that most of the software linked on this forum is likely to be safe to use. If you are unsure, feel free to ask in the relevant topics, or send a private message to an administrator or moderator. To help curb the problems of false positives, or in the event that you do find actual malware, you can contribute through the article linked here.
Topic: CSS help w/ iOS (Read 1933 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

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.