Support » Plugins » [Plugin: MP3-jPlayer] List dividers problem

  • Resolved Manic Hedgepig


    I’ve been customising the markup and css for this plugin and have it almost the way I want it as far as layout goes (still got some gfx to do).

    However, there is one small but incredibly annoying problem. Some code somewhere is forcing the insertion of list dividers, and top and bottom padding, into the <li> elements in the playlist.

    I have looked all over the place for this, including all stylesheets, js files and php files and still cannot figure it out. Several calls for list dividers have either been removed from the php, or set to zero padding and zero margin and no background. Have searched for element names and ID’s in FF Web Developer. Dividers and padding are still there. Nothing in admin settings or help either.

    Could someone who is thoroughly familiar with the backend of this thing please give me a clue here? I do not want anything being forced by obscure bits of code as I am more than happy to tackle the css and markup directly. I just want those dividers and that padding gone.

    Current code is this in player-silver.css

    /* PLAYLIST */
    	.listwrap_mp3j {inherit: none; position:absolute; z-index: 500; left: 13px; width: 260px; padding: 0 0 8px 0; margin-top:0; background: #ddd; border-radius: 0 0 6px 6px; box-shadow: 2px 2px 4px #333;}
    	ul.ffs {position: relative; margin: 0 ; padding: 0; list-style:none; background: none; width: 260px; font-family: sans-serif;}
    	ul.ffs li {margin: 0; padding: 0; height: 34px; max-height: 34px; float: left; width: 260px; overflow: hidden;}
    	ul.ffs li a:link, ul.ffs li a:visited {color: #666; display: block; width:244px; margin: 0; padding: 0 8px 0 8px; height: 34px; line-height: 34px;}
    	ul.ffs li a:hover {color: #666; background: #eee; height: 34px; line-height: 34px;}

    mp3j_main.php is running this:

    // Make playlist
    			$nooplaylist = "
    				<div class=\"listwrap_mp3j\" id=\"L_mp3j_" . $pID . "\">
    					<ul class=\"ffs\" id=\"UL_mp3j_" . $pID . "\"><li></li></ul>
    			// Assemble player
    			$player = "\n
    			<div class=\"wrap-MI\" style=\"" . $floater . $width . "\">" . $title . "
    				<div class=\"jp-innerwrap\">
    					<div class=\"innerx\"></div>
    					<div class=\"innertab\"></div>\n
    					<div class=\"jp-interface\"" . $height . ">
    						<div id=\"T_mp3j_" . $pID . "\" class=\"player-track-title" . $addclass . "\"" . $Tpad . "></div>
    						<div id=\"C_mp3j_" . $pID . "\" class=\"player-artist" . $addclass . "\"></div>
    						<div class=\"MIsliderVolume\" id=\"vol_mp3j_" . $pID . "\"></div>
    						<div class=\"bars_holder\">
    							<div class=\"loadMI_mp3j\" id=\"load_mp3j_" . $pID . "\"></div>
    							<div class=\"posbarMI_mp3j\" id=\"posbar_mp3j_" . $pID . "\"></div>
    						<div class=\"transport-MI\">" . $play_h . $stop_h . $prevnext . "</div>
    						<div id=\"P-Time-MI_" . $pID . "\" class=\"jp-play-time\"></div>
    						<div id=\"T-Time-MI_" . $pID . "\" class=\"jp-total-time\"></div>
    						<div id=\"statusMI_" . $pID . "\" class=\"statusMI" . $addclass . "\"></div>
    						<div class=\"playlist-toggle-MI" . $addclass . "\" id=\"playlist-toggle_" . $pID. "\" onclick=\"javascript:MI_toggleplaylist('', " . $pID . ");\">Playlist</div>
    				" . $nooplaylist . "

    Unfortunately this is only on local host at the moment so I cannot link to a live example. However, there is a screenshot here: Link to shot

    ETA: I’ll get an online copy sorted as soon as I have time, and can also pastebin as much code as necessary if that will help.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The list dividers can be set from admin (which is why you won’t find them in the stylesheet), you can turn them off like this:

    go to the mp3-jplayer settings page,
    click ‘colour settings’,
    look to the right of the colour picker there’s a box called ‘dividers’,
    set it to ‘none’.

    The other thing you’re looking for is in the stylesheet, it’s ‘line-height’ rather than padding, and it’s on the ‘a’ element, so you’re looking for this in player-silver.css:

    ul.UL-MI_mp3j li a { ...

    It’s line-height is set to 28px normally and can be tweaked there in the sheet.

    prob gonna change this setup at some point as i realise it’s gets ugly if a track name break to a new line..


    Ok, thanks for the response.

    I would like to dump the dividers code completely, if you don’t mind. I can easily set dividers myself in the css if I ever decide I want them (background image, border, whatever). I realise you have put a lot of time and effort into coding this plugin with a lot of options so that non-coders can use it, but I’m customising it for a specific purpose and prefer to run with the minimum of code. I makes things easier for me. 😉

    Regarding line-height: no, that is not the problem. I have tried setting various line-height, max-height, hidden overflow, negative margins, and umpteen other things. That padding refuses to go away unless I delete the code for ‘id=\”UL_mp3j_” . $pID . “\”‘ in the ul tag. Of course if I delete that, the js no longer has a handle to generate content.

    This is why I would like to dump the divider code completely. I can code a pure css drop menu out of my head in about ten minutes, so I know how these things work. This one is behaving very strangely and it definitely seems to be tied in with the code for the dividers.

    Regarding ugliness if song titles break to a new line, my suggested fix for that would be to use text-overflow: ellipsis;* on the anchors in the playlist. This is well supported and will do the job nicely. I often use it myself in these sorts of situations. I don’t care about IE6 or IE7 though. Not sure if you do.


    *ETA: Actually, what I use is a combination of white-space: pre; overflow: hidden; text-overflow: ellipsis;

    Note that this doesn’t seem to work on floated elements, but assuming your list is wide enough to give a good indication of titles, it is a great way of keeping things neat.

    Just found something odd. Dividers are disabled in admin now, but it makes no difference. The colour of the dividers that are showing is #e3e3e3, but I haven’t used that colour anywhere in the css, nor is it set anywhere in admin. Setting admin to “bypass colour settings” makes no difference either.

    So, somehow the li tags are inheriting a bottom border or background image, plus top and bottom padding, despite padding specifically being set to zero, with border: none; and background: none;

    The only things that I can think of are that it may be being forced in the php somewhere, or perhaps in the js.

    Ok Simon, forget all of that. I found out what the problem was.

    The theme’s stylesheet came with this declaration:

    .sidebar ul li {
    	border-bottom: 1px solid #e3e3e3;
    	line-height: 15px;
    	padding: 6px 0;

    I’m running the player in a bottom block for testing, which still has the class sidebar attached to it (markup shows as #sidebar_bottom .sidebar).

    That was overriding the stylesheet for your plugin, resulting in the padding and border for the .sidebar list elements being applied on top of the styles in the plugin stylesheet. Instant 6px top and bottom padding and 1px bottom borders. Bleh.

    I assume from this that the plugin stylesheet must be parsed by the software before the theme’s main stylesheet is parsed, otherwise the css I was using would have done the job.

    Anyway, commenting out that declaration in the theme’s stylesheet does the trick, and suddenly the menu behaves like it ought to. Of course, that will bork the theme too, but now that I know exactly what the problem is I can come up with a workaround for it

    Thanks for your time anyway.

    The plugin’s functionality is great btw, which is why I chose it.


    ETA: Got the workaround, for anyone who gets a similar problem.

    After the offending declaration (may the fleas of a thousand camels infest its armpits) throw another declaration into the theme’s main stylesheet to make it shut up and behave itself. This works very nicely:

    .sidebar ul li {
    	border-bottom: 1px solid #e3e3e3;
    	line-height: 15px;
    	padding: 6px 0;
    .sidebar .mp3jplayerwidget ul li {
    	border-bottom: none;
    	line-height: 34px;
    	padding: 0;
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Plugin: MP3-jPlayer] List dividers problem’ is closed to new replies.