iPhone HTML5 native <audio> control not rendering correctly

Question

The native audio control does not render correctly on the iPhone or the iPhone simulator.

Go to http://www.anmldr.com/audio and see what I am seeing.

The native audio control will cover up the preceding paragraph and the drop shadow is slightly covering the following paragraph. Even if I put it in a containing div and have a margin-top and a margin-bottom, this does not seem to work.

The width of the native audio control is apparently too small because all of the icons and the counter, etc are all crowded together and on top of each other. The control shows "Loading" continuously until you actually start playing it. Then the numbers appear but they are superimposed on each other.

Is there a way to style the native audio control? Width? Margin?

Linda

Answer 1

Answering my own question...

I figured out that the CSS attributes selector will allow me to style the native HTML5 audio control.

[controls] {
width:100%;
margin-top:1.25em;
margin-bottom:1.25em;
}

This solves the problem of the icons, etc. overlapping. It still does not solve the "Loading" message.

Linda