Philippe! Thank you!!!!! :)
On Wed, Feb 5, 2014 at 11:48 PM, Philippe Wittenbergh <[email protected]> wrote:
> Right, that example only links to a .ogg file, which neither desktop nor
> mobile Safari can play.
Sorry, that was probably a bad example. I'm working on a test page
that has same problem with skin, but the audio loads no prob. Where
I've been pulling my hair out is that dang gray background that I
can't seem to control! :D
I felt more comfortable linking to someone else's site vs. my oddball demo page.
> The grey bar you see are the default browser controls, given the 'controls'
> attribute on the audio element. As it can't play the soundtrack, it shows a
> message, though.
Ah, I see. Cool. Thanks for clarification. :)
>> Things to note:
>> 1. Zooming in/out changes the size of the player skin.
> As expected.
Oh yah? Wait, I see now, to make it more clickable for fingers, right?
:: smacks self on forehead :: Now I get it. :D
>> 2. The gray background is overlapping surrounding elements (like it's
>> absolutely positioned).
> Not really, but yeah, the browser controls in mobile Safari are taller than
> 16px, to allow for fatty fingers to interact with said controls.
Hehe, it makes sense to me now that you point it out.
> audio { width: 200px; height: 40px; }
> should give you a start, adjust to taste.
Interesting! I'll play with that.
Thing is, I'm getting pretty good sizes in/on most other devices. I'd
hate to apply a height for the sake of iOS and have it make everything
else look weird. OTOH, I should experiment to see if setting a fixed
height does the trick for all.
>> 3. The gray background isn't something that can be easily styled (at
>> least from my tests).
> Indeed it is not possible to style the default browser controls, but you can
> omit the attribute and build your own… (js required, see below for some links)
Ah, great. Really, I was hoping to not go crazy in terms of styling
and JS. I think I can live with the default look/feel. I just don't
feel like adding the overhead (er, the JS overhead) right now.
>> Question:
>> How the heck do I make it so that gray background behaves? For the
>> life of me, I can't seem to find any info on the interwebs about this
>> "feature" (bug?).
> Just allow for enough space for the element…
> https://duckduckgo.com/?q=Safari+styling+the+audio+element
> which brings you to the apple developer docs, but also
> http://stackoverflow.com/questions/4126708/is-it-possible-to-style-html5-audio-tag
> There are a bazillion other stackoverflow links on the intertubes.
Thanks for the kick in pants. I really did spend a couple hours
googling before coming here. I think I was just looking for the wrong
terms. (I was searching for a fix on how to fix the overlap than
wondering how to redesign the default look/feel).
>> I want to keep that gray box from overlapping it's parent container.
>> The problem is, I can't seem to figure out what to hook into for
>> styling as it's not showing as a part of the DOM.
> Shadow DOM, but that is a whole other bag of madness (and a future one only)
Interesting! New term for me. Learn something new every day. :)
>> Am I making any sense here?
> Dunno, I think my cat made a mess of it :-).
LOL! Cats rock.
Thanks again Philippe!!!! I greatly appreciate the pro help.
Have a nice night.
Cheers,
Micky
--
<git.io/micky>
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
