Solved

Wordpress CSS issue with flowplayer - please help

Posted on 2010-11-28
4
928 Views
Last Modified: 2012-06-27
Hi -
I have this wordpress page here: http://soniclibrarian.net/wp2010/player2/  

There is css at the top that controls the attributes of the player.

Notice that the the American Idol Image and the player button are out of position (the image is not aligned at the top of the video space.  I have attached the player php page (which includes the CSS)

Can someone please help me position the image and player button properly?

Thanks

<?php /* Template Name: Test3
*/ ?>
<?php 
/* Short and sweet */
define('WP_USE_THEMES', false);
require('./wp-blog-header.php');
?>
<?php get_header(); ?>
<html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
<script src="/js/jquery-1.4.2.min.js"></script>
<script src="/js/jquery-ui-1.8.4.custom.min.js"></script>
<script src="/js/flowplayer-3.2.2.min.js"></script>
<script src="/js/flowplayer.playlist-3.0.8.js"></script>
<script src="/js/jquery.jplayer.min.js"></script>


<meta charset="UTF-8" />
<title>Sonic Librarian : Great Music and Licensing for Television and Film | Music Licensing</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://soniclibrarian.net/wp2010/wp-content/themes/twentyten/style.css" />
<link rel="pingback" href="http://soniclibrarian.net/wp2010/xmlrpc.php" />
<link rel="alternate" type="application/rss+xml" title="Sonic Librarian : Great Music and Licensing for Television and Film &raquo; Feed" href="http://soniclibrarian.net/wp2010/feed/" />
<link rel="alternate" type="application/rss+xml" title="Sonic Librarian : Great Music and Licensing for Television and Film &raquo; Comments Feed" href="http://soniclibrarian.net/wp2010/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="Sonic Librarian : Great Music and Licensing for Television and Film &raquo; Home Comments Feed" href="http://soniclibrarian.net/wp2010/home/feed/" />
<link rel='stylesheet' id='contact-form-7-css'  href='http://soniclibrarian.net/wp2010/wp-content/plugins/contact-form-7/styles.css?ver=2.3.1' type='text/css' media='all' />

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://soniclibrarian.net/wp2010/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://soniclibrarian.net/wp2010/wp-includes/wlwmanifest.xml" />
<link rel='index' title='Sonic Librarian : Great Music and Licensing for Television and Film' href='http://soniclibrarian.net/wp2010/' />
<link rel='next' title='About' href='http://soniclibrarian.net/wp2010/about-2/' />
<meta name="generator" content="WordPress 3.0.1" />
<link rel='canonical' href='http://soniclibrarian.net/wp2010/' />
<style type="text/css">
body { background-color: #020202; background-image: url('http://soniclibrarian.net/wp2010/wp-content/uploads/2010/08/lights2.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; }
</style>
<link rel="stylesheet" type="text/css" href="/css/playlist.css"/>
	<link type="text/css" href="/css/ui-darkness/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
<style>
	/* container has a background image */

a.player {
	display:block;
	width:400px;
	height:300px;
	text-align:center;
	color:#fff;
	text-decoration:none;
	cursor:pointer;
	background:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.15), rgba(6, 6, 6, 0.15)) transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=rgba(73, 122, 173, 0.15), endColorstr=rgba(6, 6, 6, 0.15)); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(rgba(73, 122, 173, 0.15)), to(rgba(6, 6, 6, 0.15))); /* for webkit browsers */

	-moz-box-shadow:0 0 40px rgba(100, 118, 173, 0.5);
	box-shadow:0 0 40px rgba(100, 118, 173, 0.5);
	-webkit-box-shadow:0 0 40px rgba(100, 118, 173, 0.5);
}

a.player:hover {
	background:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.4), rgba(6, 6, 6, 0.4)) transparent;
}

/* splash image */
a.player img {
border:0 none;
}

.clip-box {
    padding-left: 20px;
    padding-right: 20px;
    width: 245px;
}
	a.player {
		margin-top:0px;
	}
 .clips  a{
        display: block;

        height: 69px;
        color: #b3b3b3;
        text-decoration: none;
        cursor: pointer;
        	background:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.15), rgba(6, 6, 6, 0.15)) transparent;

	-moz-box-shadow:0 0 30px rgba(100, 118, 173, 0.5);
 	-webkit-box-shadow:0 0 30px rgba(100, 118, 173, 0.5);
   box-shadow: 0 0 30px rgba(100, 118, 173, 0.5);
    padding-bottom: 6px;
        outline: none;
}
   .clip {
        display: block;

        height: 69px;
        color: white;
        text-decoration: none;
        cursor: pointer;
        	background:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.15), rgba(6, 6, 6, 0.15)) transparent;

	-moz-box-shadow:0 0 30px rgba(100, 118, 173, 0.5);
	box-shadow:0 0 30px rgba(100, 118, 173, 0.5);
	-webkit-box-shadow:0 0 30px rgba(100, 118, 173, 0.5);

    padding-bottom: 6px;

}

#player_container {
 
	position:relative;
	border: 0px solid darkgray;
	padding:3px;
    background-color: #;
    height: 20px;
    margin-left: 5px;
}

ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding:0; cursor: pointer; float: left;  list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0px;}

#icons .widget-area .ui-widget ul ul {margin-left:.1em;}
ul#icons #volume-min {
	margin:2px 140px 2px 364px;
}

#sliderVolume {
	position:absolute;
	top:30px;
	left:480px;
	width:120px;
	height:.4em;
}


#sliderVolume .ui-slider-handle {
	height:.8em;
	width:.8em;
}

#bars_holder {
	position:absolute;
	top:8px;
	left:57px;
	width:135px;
}

#sliderPlayback .ui-slider-handle {
	width:.6em;
}


#loaderBar.ui-progressbar {
	height:.2em;
background-color: #019240;
border: .1em solid #b3b3b3;

}

#jplayer_playlist
{
  padding-top: 10px;
      margin-left: 8px;
}
  
.jplayer_playlist_current {
	background:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.3), rgba(6, 6, 6, 0.3)) transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=rgba(73, 122, 173, 0.3), endColorstr=rgba(6, 6, 6, 0.3)); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(rgba(73, 122, 173, 0.3)), to(rgba(6, 6, 6, 0.3))); /* for webkit browsers */
}

#jplayer_playlist a {
	color: #b3b3b3;
	text-decoration: none;
}
#jplayer_playlist a:hover {
	color:#0d88c1;
}
#jplayer_playlist a.jplayer_playlist_current {
	color:#0d88c1;
}

#primary a {
  outline: none;
}
#primary a:hover {
  text-decoration: none;
  }

#jplayer_playlist ul {
  color: #666;
  list-style: square inside;
}
</style>


 






<script>

$(function() {

	// setup player without "internal" playlists
	$f("player2", "/swf/flowplayer-3.2.2-0.swf", {
		clip: {baseUrl: 'http://soniclibrarian.net/splash_media/'}


	// use playlist plugin. again loop is true
	}).playlist("div.petrol", {loop:true});

	var global_lp = 0;
	var playItem = 0;


	// Local copy of jQuery selectors, for performance.
	var jpPlayTime = $("#jplayer_play_time");
	var jpTotalTime = $("#jplayer_total_time");

	$("#jquery_jplayer").jPlayer({
		ready: function() {
			displayPlayList();
			playListInit(false); // Parameter is a boolean for autoplay.
		},
		customCssIds: true
	})
	.jPlayer("onProgressChange", function(lp,ppr,ppa,pt,tt) {
 		var lpInt = parseInt(lp);
 		var ppaInt = parseInt(ppa);
 		global_lp = lpInt;

		$('#loaderBar').progressbar('option', 'value', lpInt);
 		$('#sliderPlayback').slider('option', 'value', ppaInt);
	})
	.jPlayer("onSoundComplete", function() {
		playListNext();
	});


	$("#pause").hide();

	function showPauseBtn()
	{
		$("#play").fadeOut(function(){
			$("#pause").fadeIn();
		});
	}

	function showPlayBtn()
	{
		$("#pause").fadeOut(function(){
			$("#play").fadeIn();
		});
	}
	$("#jplayer_previous").click( function() {
		playListPrev();
		$(this).blur();
		return false;
	});

	$("#jplayer_next").click( function() {
		playListNext();
		$(this).blur();
		return false;
	});

	function displayPlayList() {
		$("#jplayer_playlist ul").empty();
		for (i=0; i < myPlayList.length; i++) {
			var listItem = (i == myPlayList.length-1) ? "<li class='jplayer_playlist_item_last'>" : "<li>";
			listItem += "<a href='#' id='jplayer_playlist_item_"+i+"' tabindex='1'>"+ myPlayList[i].name +"</a></li>";
			$("#jplayer_playlist ul").append(listItem);
			$("#jplayer_playlist_item_"+i).data( "index", i ).click( function() {
				var index = $(this).data("index");
				if (playItem != index) {
					playListChange( index );
				} else {
					$("#jquery_jplayer").jPlayer("play");
				}
				$(this).blur();
				return false;
			});
		}
	}

	function playListInit(autoplay) {
		if(autoplay) {
			playListChange( playItem );
		} else {
			playListConfig( playItem );
		}
	}

	function playListConfig( index ) {
		$("#jplayer_playlist_item_"+playItem).removeClass("jplayer_playlist_current").parent().removeClass("jplayer_playlist_current");
		$("#jplayer_playlist_item_"+index).addClass("jplayer_playlist_current").parent().addClass("jplayer_playlist_current");
		playItem = index;
		$("#jquery_jplayer").jPlayer("setFile", myPlayList[playItem].mp3, myPlayList[playItem].ogg);
	}

	function playListChange( index ) {
		playListConfig( index );
		$("#jquery_jplayer").jPlayer("play");
	}

	function playListNext() {
		var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
		playListChange( index );
	}

	function playListPrev() {
		var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
		playListChange( index );
	}



	$("#play").click(function() {
		$("#jquery_jplayer").jPlayer("play");
		showPauseBtn();
		return false;
	});

	$("#pause").click(function() {
		$("#jquery_jplayer").jPlayer("pause");
		showPlayBtn();
		return false;
	});

	$("#stop").click(function() {
		$("#jquery_jplayer").jPlayer("stop");
		showPlayBtn();
		return false;
	});
 
	$("#player_progress_ctrl_bar a").live( "click", function() {
		$("#jquery_jplayer").jPlayer("playHead", this.id.substring(3)*(100.0/global_lp));
		return false;
	});

	// Slider
	$('#sliderPlayback').slider({
		max: 100,
		range: 'min',
		animate: true,

		slide: function(event, ui) {
			$("#jquery_jplayer").jPlayer("playHead", ui.value*(100.0/global_lp));
		}
	});


	$('#loaderBar').progressbar();


	//hover states on the static widgets
	$('#dialog_link, ul#icons li').hover(
		function() { $(this).addClass('ui-state-hover'); },
		function() { $(this).removeClass('ui-state-hover'); }
	);

});
</script>

    </head>
<body class="home page page-id-12 page-template page-template-homecustom-php">
<!-- #header -->



<div id="container">



<!-- configure entries inside playlist using standard HTML -->
<div class="clip-box clips petrol" style="float:left">

	<!-- single playlist entry -->

<a href="american-idol.mp4" class="first">
		<div style="float:left;padding-right:6px;"><img src="/images/splash/am_idol.png"/></div>
		SHOW: American Idol<br/>
        CLIENT: FOX<br/>
        SONG: "Generation Hope"
  </a>

  	<a href="greys-scarletina-taikosis.flv" class="first">
		<div style="float:left;padding-right:6px;"><img src="/images/splash/grey1.png"/></div>
		SHOW: Greys' Anatomy<br/>
        CLIENT: ABC<br/>
        SONG: "Scarletina, Taikosis"

	</a>



	<a href="bambi.flv" class="first">
        <div style="float:left;padding-right:6px;"><img src="/images/splash/bambi.png"/></div>
		SHOW: Bambi Film Trailer
    <br/>
        
        SONG: "Winners Circle, With Heart & Soul, A New Beginning"
    </a>


	
	
  
	<a href="bigloser1.flv" class="first">
        <div style="float:left;padding-right:6px;"><img src="/images/splash/bigloser1.png"/></div>
		SHOW: Biggest Loser<br/>
        CLIENT: NBC<br/>
        SONG: "Closer To You"
  </a>
    
</div>

<!-- player container and a splash image (play button) -->
<a class="player plain" id="player2"  style="float:left">
 <img src="/images/idol_play.jpg" />   
</a>

<!-- let rest of the page float normally -->
<br clear="all"/>


</div>
 

 
   





		<div id="primary" class="widget-area" role="complementary">


<!-- <li id="linkcat-3" class="widget-container widget_links"><h3 class="widget-title">SEARCH OUR MUSIC</h3>
	<ul class='xoxo blogroll'>
<li><a href="http://www.soniclibrarian.net/search/" title="Click here to use our custom search tool.">CLICK TO SEARCH</a></li>

	</ul>
</li> -->



  <!-- search button -->
  
    <a class="btnContinue" href="http://www.soniclibrarian.net/search">SEARCH MUSIC NOW</a>
 
  
  


<script>
var myPlayList = [
  
  		  {name:"Resurrection Connection",mp3:"http://soniclibrarian.net/splash_media/SL056_01 Resurrection Connection.mp3"}, 
   {name:"Firefly Mist",mp3:"http://soniclibrarian.net/splash_media/SL057_01 Firefly Mist.mp3"},
      {name:"Mr Hyde",mp3:"http://soniclibrarian.net/splash_media/SL047_04 Mr Hyde .mp3"},  
      {name:"Castles Of Wonderment",mp3:"http://soniclibrarian.net/splash_media/SL050_07 Castles of Wonderment.mp3"},
     {name:"Momentous Celebration",mp3:"http://soniclibrarian.net/splash_media/SL044_05 Momentous Celebration.mp3"},  
     {name:"Chump Change",mp3:"http://soniclibrarian.net/splash_media/SL002_02 ChumpChange.mp3"},
		{name:"Scarletina",mp3:"http://soniclibrarian.net/splash_media/SL011_02 Scarletina.mp3"},
		{name:"Reign Of Kayra",mp3:"http://soniclibrarian.net/splash_media/SL025_01 ReignOfKayra.mp3"},
	    {name:"Frumunda Thunda",mp3:"http://soniclibrarian.net/splash_media/SL031_02 FrumundaThunda.mp3"},	
      {name:"Pop The Hood",mp3:"http://soniclibrarian.net/splash_media/SL029_18 PopTheHood.mp3"},  
    {name:"Ding Dong",mp3:"http://soniclibrarian.net/splash_media/SL053_02 Ding Dong.mp3"},         
                
                
		
		
		
		
];
</script>
<p>&nbsp;</p>
<div id="jquery_jplayer"></div>

		<div id="player_container">
			<ul id="icons" class="ui-widget ui-helper-clearfix">
				<li id="play" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span></li>
				<li id="pause" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-pause"></span></li>
				<li id="stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span></li>

			</ul>

			<!-- Sliders -->
			<div id="bars_holder">
				<div id="sliderPlayback"></div>
				<div id="loaderBar"></div>
			</div>
		</div> 
<div id="jplayer_playlist">
<ul><!-- The function displayPlayList() uses this unordered list --></ul>
    </div>
    
    <div style="display:none;">
    
<li id="text-5" class="widget-container widget_text"><h3 class="widget-title">RECENT CREDITS</h3>			<div class="textwidget"><p>The Apprentice<br />

Law & Order<br />
Lost<br />
Who Do You Think You Are?<br />
The Bachelor<br />

Grey's Anatomy<br />
The Office<br />
24<br />
Bones<br />
Medium<br />
Chuck<br />
Modern Family<br />
NCIS<br />
The Biggest Loser<br />

The Curious Case of Benjamin Button<br />
Extreme Makeover</p>
</div>
		</li>			
		</div>
		</div><!-- #primary .widget-area -->






	</div>   <!-- #main -->

	<div id="footer" role="contentinfo">
		<div id="colophon">



			<div id="footer-widget-area" role="complementary">

				<div id="first" class="widget-area">
					<ul class="xoxo">
						<li id="text-6" class="widget-container widget_text">	
            <h3 class="widget-title">ABC PROMOS</h3>			
              <div class="textwidget">
                 
                 
                  
                  <p>Lost : Grey's Anatomy : Modern Family : Desperate Housewives </p>
                  <h3 class="widget-title">FOX PROMOS</h3>
                  <p>American Idol : House : 24 : The Simpsons                  </p>
                  <h3 class="widget-title">CBS PROMOS</h3>
                  <p>CSI : Survivor : NCIS : Medium : The Big Bang Theory                  </p>
                   <h3 class="widget-title">NBC PROMOS</h3>
                  <p>Biggest Loser : ER : 30 Rock : Heroes : Today Show</p>
                  
                  
                  
                  
                  
                        
              </div>
		        </li>					
          </ul>
				</div><!-- #first .widget-area -->

     	<div id="second" class="widget-area">
					<ul class="xoxo">
						<li id="text-7" class="widget-container widget_text">
            <h3 class="widget-title">TRAILERS</h3>			
              <div class="textwidget">
                
                
                 <p>10,000BC : Cinderella : The Curious Case Of Benjamin Button : Rambo : Kung Fu Panda :  Akeelah And The Bee : The Little Mermaid</p>
                   <h3 class="widget-title">IN SHOW</h3>
                  <p>The Office : The Oprah Winfrey Show : 48 Hours Mystery : Pimp My Ride : NBC Primetime Preview : Keeping Up With The Kardashians : Real World/Road Rules : Diet Tribe</p> 
                  
                  <h3 class="widget-title">CONTACT</h3>
                  <p><a href="mailto:arthur@soniclibrarian.com">arthur@soniclibrarian.com</a> / <a href="mailto:erik@soniclibrarian.com">erik@soniclibrarian.com</a>
                  <br />
                  818. 634. 4977 / &copy; 2010 by Sonic Librarian. ARR.
                  </p>
                  
              </div>
		        </li>					
          </ul>

				</div><!-- #second .widget-area -->     

			</div><!-- #footer-widget-area -->


			<!-- <div id="site-info">
				<a href="http://soniclibrarian.net/wp2010/" title="Sonic Librarian : Great Music and Licensing for Television and Film" rel="home">
					Sonic Librarian : Great Music and Licensing for Television and Film				</a>
			</div>  -->  <!-- #site-info -->


      <!--
			<div id="site-generator">
								<a href="http://wordpress.org/"
						title="Semantic Personal Publishing Platform" rel="generator">
					Proudly powered by WordPress.				</a>
			</div>  --> <!-- #site-generator -->





		</div><!-- #colophon -->
	</div><!-- #footer -->

</div><!-- #wrapper -->

    
</body>
</html>
   
<?php get_footer(); ?>

Open in new window

0
Comment
Question by:chrisj1963
  • 2
4 Comments
 
LVL 18

Accepted Solution

by:
Sudaraka Wijesinghe earned 167 total points
ID: 34226330
In your page I see the CSS that pushes the image down (margin-top:125px)
a.player img {
border:0 none;
margin-top:125px;
}

Open in new window

However, I don't this in the code you have posted here.
0
 
LVL 23

Assisted Solution

by:jeremyjared74
jeremyjared74 earned 333 total points
ID: 34226352
Your problem is coming from an embedded CSS element. In the CSS code the part that is causing the video to display below the desired area is:
     
/* splash image */
a.player img {
 margin-top:125px;
 border:0;
}

Open in new window

Notice the part that that says:
 margin-top: 125px, I simply changed the code to:
margiin-top: auto; and it displays correctly.

I will send the complete inline CSS code that I found, I don't know if this is all in one file, or if is is scattered. Another thing I noticed is that you have two exact style.css, and playlist.css files. This will cause a slower page load, and it isn't necessary.

COMPLETE INLINE CODE WITH THE VIDEO PLAYER FIXED:
body { background-color: #020202; background-image: url('http://soniclibrarian.net/wp2010/wp-content/uploads/2010/08/lights21.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; }

/* container has a background image */

a.player {
 display:block;
 width:500px;
 height:340px;
 text-align:center;
 color:#fff;
 text-decoration:none;
 cursor:pointer;
 background:#000 url(/img/global/gradient/h500.png) repeat-x 0 0;
 background:-moz-linear-gradient(top, rgba(55, 102, 152, 0.9), rgba(6, 6, 6, 0.9));
 -moz-box-shadow:0 0 40px rgba(100, 118, 173, 0.5);
}

a.player:hover {
 background:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.898), rgba(6, 6, 6, 0.898));
}

/* splash image */
a.player img {
 margin-top:auto;
 border:0;
}

 a.player {
 margin-top:0px;
 }

body { background-color: #020202; background-image: url('http://soniclibrarian.net/wp2010/wp-content/uploads/2010/08/lights2.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; }

/* container has a background image */

a.player {
	display:block;
	width:400px;
	height:300px;
	text-align:center;
	color:#fff;
	text-decoration:none;
	cursor:pointer;
	background:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.15), rgba(6, 6, 6, 0.15)) transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=rgba(73, 122, 173, 0.15), endColorstr=rgba(6, 6, 6, 0.15)); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(rgba(73, 122, 173, 0.15)), to(rgba(6, 6, 6, 0.15))); /* for webkit browsers */

	-moz-box-shadow:0 0 40px rgba(100, 118, 173, 0.5);
	box-shadow:0 0 40px rgba(100, 118, 173, 0.5);
	-webkit-box-shadow:0 0 40px rgba(100, 118, 173, 0.5);
}

a.player:hover {
	background:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.4), rgba(6, 6, 6, 0.4)) transparent;
}

/* splash image */
a.player img {
border:0 none;
}

.clip-box {
    padding-left: 20px;
    padding-right: 20px;
    width: 245px;
}
	a.player {
		margin-top:0px;
	}
 .clips  a{
        display: block;

        height: 69px;
        color: #b3b3b3;
        text-decoration: none;
        cursor: pointer;
        	background:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.15), rgba(6, 6, 6, 0.15)) transparent;

	-moz-box-shadow:0 0 30px rgba(100, 118, 173, 0.5);
 	-webkit-box-shadow:0 0 30px rgba(100, 118, 173, 0.5);
   box-shadow: 0 0 30px rgba(100, 118, 173, 0.5);
    padding-bottom: 6px;
        outline: none;
}
   .clip {
        display: block;

        height: 69px;
        color: white;
        text-decoration: none;
        cursor: pointer;
        	background:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.15), rgba(6, 6, 6, 0.15)) transparent;

	-moz-box-shadow:0 0 30px rgba(100, 118, 173, 0.5);
	box-shadow:0 0 30px rgba(100, 118, 173, 0.5);
	-webkit-box-shadow:0 0 30px rgba(100, 118, 173, 0.5);

    padding-bottom: 6px;

}

#player_container {
 
	position:relative;
	border: 0px solid darkgray;
	padding:3px;
    background-color: #;
    height: 20px;
    margin-left: 5px;
}

ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding:0; cursor: pointer; float: left;  list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0px;}

#icons .widget-area .ui-widget ul ul {margin-left:.1em;}
ul#icons #volume-min {
	margin:2px 140px 2px 364px;
}

#sliderVolume {
	position:absolute;
	top:30px;
	left:480px;
	width:120px;
	height:.4em;
}


#sliderVolume .ui-slider-handle {
	height:.8em;
	width:.8em;
}

#bars_holder {
	position:absolute;
	top:8px;
	left:57px;
	width:135px;
}

#sliderPlayback .ui-slider-handle {
	width:.6em;
}


#loaderBar.ui-progressbar {
	height:.2em;
background-color: #019240;
border: .1em solid #b3b3b3;

}

#jplayer_playlist
{
  padding-top: 10px;
      margin-left: 8px;
}
  
.jplayer_playlist_current {
	background:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.3), rgba(6, 6, 6, 0.3)) transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=rgba(73, 122, 173, 0.3), endColorstr=rgba(6, 6, 6, 0.3)); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(rgba(73, 122, 173, 0.3)), to(rgba(6, 6, 6, 0.3))); /* for webkit browsers */
}

#jplayer_playlist a {
	color: #b3b3b3;
	text-decoration: none;
}
#jplayer_playlist a:hover {
	color:#0d88c1;
}
#jplayer_playlist a.jplayer_playlist_current {
	color:#0d88c1;
}

#primary a {
  outline: none;
}
#primary a:hover {
  text-decoration: none;
  }

#jplayer_playlist ul {
  color: #666;
  list-style: square inside;
}

Open in new window

0
 
LVL 23

Assisted Solution

by:jeremyjared74
jeremyjared74 earned 333 total points
ID: 34226361
Sorry, sudaraka, I must have been typing when you entered your answer. I believe the solution I posted will resolve the issues though.
0
 

Author Closing Comment

by:chrisj1963
ID: 34226511
Both were good solutions. Thanks very much
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
The viewer will learn how to dynamically set the form action using jQuery.

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now