Question

I created a small media player with playlist using flowplayer. I used a hoverscroll plugin to make the playlist scroll on hover. But I have a small issue in Firefox. When I click on one of the links in the playlist to play a video/music it displays Firefox default scroll bars.

You can check out the demo here

Here is a preview of the code
JS:

    // Override default parameters onload
jQuery.fn.hoverscroll.params = jQuery.extend(jQuery.fn.hoverscroll.params, {
    vertical : true,
    width: 355,
    height: 100,
    arrows: false
});


flowplayer("video", "assets/flowplayer/flowplayer-3.2.6.swf", {
    clip: { 
        // by default do not auto play
        autoPlay: false
    },

    playlist: 'assets/gallery/mrss-video.xml',

    // show playlist buttons in controlbar
    plugins: {
        controls: {
            url: 'flowplayer.controls-3.2.4.swf',

            buttonColor: 'rgba(0, 0, 0, 0.9)',
            buttonOverColor: '#000000',
            backgroundColor: '#D7D7D7',
            backgroundGradient: 'medium',
            sliderColor: '#FFFFFF',

            sliderBorder: '1px solid #808080',
            volumeSliderColor: '#FFFFFF',
            volumeBorder: '1px solid #808080',

            timeColor: '#000000',
            durationColor: '#535353',
            playlist: true
        }
    },

    onLoad: function() {
        jQuery('#video-pl .playlist').hoverscroll();
    }
});
$f("video").playlist("#video-pl .playlist", {loop: true});

HTML:

<div id="media-video" class="tabs">
    <div class="media-container">
        <div id="video" class="flow-container"></div>
    </div>
    <div id="video-pl"> 
        <ul class="playlist">
            <li><a href="#"><strong>${title}</strong> - <samp>${author}</samp></a></li>
        </ul>
    </div>
</div>

Answer 1

its because of the default outline

try on layout.css line 24 add .playlist a{ outline: none;}