Welcome to WebmasterWorld Guest from 54.162.240.235

Forum Moderators: not2easy

Message Too Old, No Replies

How to increase/decrease the space between the text and play button

     
4:34 am on Nov 30, 2011 (gmt 0)

5+ Year Member Top Contributors Of The Month



Hi,

Here's a sample code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Yahoo! Media Player</title>
</head>
<body>
<a href="http://www.example.com/song.mp3">Song Title</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</body>
</html>


Many thanks in advance!
Mike
7:21 am on Nov 30, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This one was interesting. The Yahoo script insists on putting the Play button immediately to the left of the link. Adding CSS padding or margins to the link doesn't work. And you can't edit the script because it's on Yahoo's server. You can't download their script and edit it, either, because it's obfuscated and looks like gobbledygook.

But the solution I found is pretty simple. Just add non-breaking spaces before the link text, like so:
<a href="http://www.example.com/song.mp3">&nbsp;&nbsp;Song Title</a>


The problem then is that you've got some underlined white space. You could remove that white space like so:
<a href="http://www.example.com/song.mp3" style="text-decoration:none">&nbsp;&nbsp;<u>Song Title</u></a>
12:06 pm on Nov 30, 2011 (gmt 0)

5+ Year Member Top Contributors Of The Month



Thanks for the answer! However, this solution isn't accurate: What if I'd like to create a 7-px space -- neither more nor less?
12:36 pm on Nov 30, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi Rain_lover, as Michael says, this one is complicated by the script. If you inspect the output in firebug you can see it is injecting a class name for the link and using that to apply styles to the <a>, as well as the <em> that is also injected (amongst other things). There is a liberal use of !important, the link is positioned relatively and the em absolutely, and many of the defaults have been specified as well. Ick.

However, this is possible - although how depends on your preferences. One way (not pleasant but "do-able") would be to shift the <a> right, then move the <em> backwards to the left to create the desired space. Something like:
a.ymp-btn-page-play, a.ymp-btn-page-pause {left:7px}
a.ymp-btn-page-play em.ymp-skin, a.ymp-btn-page-pause em.ymp-skin {left:-7px !important }
(Where !important is required to override the scripted left:0) )
6:23 pm on Nov 30, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Can you not override the padding-left? (20px is specified by .ymp-btn-page-play)

Either inline...

<a href="http://www.example.com/song.mp3" style="padding-left:40px !important;">Song Title</a>


Or, in your stylesheet, adding more specificity to override the Yahoo! rule...
body a.ymp-btn-page-play { 
padding-left: 40px !important;
}

[edited by: alt131 at 1:19 pm (utc) on Dec 6, 2011]
[edit reason] Side Scroll [/edit]

7:10 pm on Nov 30, 2011 (gmt 0)

5+ Year Member Top Contributors Of The Month



Perfect! I already tried the same thing without body to no avail. I wonder what body does here.
8:46 pm on Nov 30, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



The body just adds more specificity to the rule (you don't have to use body, you could use another element, depending on your markup, or anything else that will increase the rules specificity). A more specific rule overrides a less specific rule, regardless of where they appear in the stylesheet.

Yahoo! uses the rule:
a.ymp-btn-page-play {padding-left: 20px !important;}

So we need to override that somehow and we can't reliably rely on the cascade in this instance.

An inline style has a higher specificity as well, so that works also.

6.4 The cascade [w3.org]
6.4.3 Calculating a selector's specificity [w3.org]

edit...

Another way to increase the specificity of certain links is to add a class. eg:
<a href="music.mp3" class="mylink">Song Title</a>


Your overriding style then becomes...
a.mylink.ymp-btn-page-play { 
padding-left: 40px !important;
}
4:16 am on Dec 1, 2011 (gmt 0)

5+ Year Member Top Contributors Of The Month



Very educational! Thank you! :)
1:21 pm on Dec 6, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



I'm a bit late but penders, definitely a much better solution than positioning!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month