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

Forum Moderators: not2easy

Message Too Old, No Replies

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

Rain_Lover

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

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

MichaelBluejay

7:21 am on Nov 30, 2011 (gmt 0)

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">  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">  <u>Song Title</u></a>

Rain_Lover

12:06 pm on Nov 30, 2011 (gmt 0)

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?

alt131

12:36 pm on Nov 30, 2011 (gmt 0)

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) )

penders

6:23 pm on Nov 30, 2011 (gmt 0)

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]

Rain_Lover

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

Perfect! I already tried the same thing without body to no avail. I wonder what body does here.

penders

8:46 pm on Nov 30, 2011 (gmt 0)

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; 
}

Rain_Lover

4:16 am on Dec 1, 2011 (gmt 0)

Very educational! Thank you! :)

alt131

1:21 pm on Dec 6, 2011 (gmt 0)

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