homepage Welcome to WebmasterWorld Guest from 54.205.254.108
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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




msg:4392327
 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




msg:4392349
 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">&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>

Rain_Lover




msg:4392432
 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




msg:4392443
 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




msg:4392604
 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




msg:4392625
 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




msg:4392668
 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




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

Very educational! Thank you! :)

alt131




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved