[Plugin: MP3-jPlayer] List dividers problem

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

Simon

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.

Cheers.

*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.

Cheers.

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