Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How do I fix this spacing issue?

Posted on 2013-05-11
5
3 solutions
Medium Priority
?
361 Views
Last Modified: 2013-05-13
I'm running a player from live365.com and you can see what I've got by heading out to http://www.countryshowdown.com/SIR/index.php

It's all good except for the controls at the bottom. When I'm running the player from my computer, you see what I have as represented by the "right.png" graphic. The "wrong.png" graphic shows you the extra space that's happening and I don't know how to fix it.

The controls themselves are coming from live365's server and I'm not sure to what extent I can manipulate them, but since it's showing up correctly on my computer, I'm thinking there's something I can be doing differently, but I don't know what.

Thoughts?

The CSS is at http://www.countryshowdown.com/SIR/pls.css
right.png
wrong.png
0
Comment
Question by:brucegust
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Join The Community
  • 2
  • 2
5 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 1332 total points
ID: 39158819
You seem to be using lots of spacer images and <br> in the layout making it higher than it really needs to be.
Also move your object outside the div.
0
 

Author Comment

by:brucegust
ID: 39158843
Hey, Gary!

Thanks for taking the time to weigh in...

Where do you see spacer images? I'm looking at my index page and I know I've seen dot.gif fairly often, but that's live365's thing and I'm not sure to what extent I can change that.

Maybe I'm looking at the wrong thing, let me know...

Also, as far as the object, are you saying I need to move the "DrawControls" script outside the controls div?

Thanks in advance.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<head>
<link rel="stylesheet" type="text/css" href="mini.css">
<meta http-equiv="Content-Language" content="en-us">
<title>Texaco Country Showdown | Showdown Internet Radio</title>
<script language="JavaScript">
<!-- start scripting

	var gVersion = "100.0.0.0";
	
// end scripting -->
</script>
<script language="JavaScript" src="http://www.live365.com/scripts/cookiemonster.js"></script>
<script language="JavaScript" src="http://www.live365.com/scripts/version.js"></script>
<script language="JavaScript" src="http://www.live365.com/scripts/clientdetect.js"></script>
<script language="JavaScript" src="http://www.live365.com/scripts/vb_sniff_lite.js"></script>
<script language="JavaScript" src="http://www.live365.com/scripts/hosts.js"></script>
<script language="JavaScript" src="http://www.live365.com/scripts/player.js"></script>
<script language="JavaScript" src="http://www.live365.com/scripts/customplayer.js"></script>
<script language="JavaScript">
<!-- start scripting

/*** REQUIRED PARAMETERS ***/
station_broadcaster		= 'countryshowdown';											// DJ name
station_id				= 375123;													// station numeric ID
stream_id				= 1381405;													// stream numeric ID

/*** OPTIONAL PARAMETERS ***/														// CSS and images
local_css				= 'http://www.countryshowdown.com/SIR/pls.css';	// CSS URL
imageDir				= 'http://www.countryshowdown.com/SIR/images/';												// Button images URL
gPreBtnVertSpace		=0;														// Vertical offset above Play/Stop buttons in pixels
gPLSWidth				= 321;														// Width of Playlist iframe in pixels
gPLSHeight				= 80;														// Height of Playlist iframe in pixels
gPlayerColor			= '#000000';												// Color of visible embedded player in #RRGGBB


// end scripting -->
</script>	

<!-- jquery stuff for testimonial carousel -->
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
	function(){
	$('ul#portfolio').innerfade({
		speed: 1000,
		timeout: 10000,
		type: 'sequence',
		containerheight: '119px'
	});
});
</script>
</head>
<!--
<STYLE type="text/css" media="screen">
		
		#widget { position: absolute; top: 226px; left: 405px; visibility: visible; display: block }
		#link1 { position: absolute; top: 226px; left: 425px; visibility: visible; display: block }
		#link2 { position: absolute; top: 226px; left: 445px; visibility: visible; display: block }
		#poweredBy { position: absolute; top: 192px; left: 408px; visibility: visible; display: block }
		
</STYLE>-->


<body bgcolor="#000000" topmargin="0" leftmargin="0" onload="HandleAction('play');" scroll="no">

<div id="big_container">
	<div id="marquee">
	<script language="JavaScript">
	<!-- start scripting
	DrawPLS("mode=1");			// Draw PLS track metadata
	// end scripting -->
	</script>
	</div>
	<div id="imagefadebox"><ul id="portfolio">
<li id="imagefadebox">
<a href="http://www.countryshowdown.com/contestant.php?id=35487" target="_blank"><img src="carousel/douglas.png" alt="Douglas Haines" border="0"/></a></li>
<li id="imagefadebox">
<a href="http://www.countryshowdown.com/contestant.php?id=29550" target="_blank"><img src="carousel/jake.png" alt="Jake Perry" border="0"/></a></li>
<li id="imagefadebox">
<a href="http://www.countryshowdown.com/contestant.php?id=1127" target="_blank"><img src="carousel/jake.png" alt="Carrie Joy" border="0"/></a></li>
<li id="imagefadebox">
<a href="http://www.countryshowdown.com/contestant.php?id=47818" target="_blank"><img src="carousel/jake.png" alt="Philip" border="0"/></a></li>
<li id="imagefadebox">	
<a href="http://www.countryshowdown.com/contestant.php?id=754" target="_blank"><img src="carousel/amanda.png" alt="Amanda Riffe" border="0"/></a></li>
<li id="imagefadebox">	
<a href="http://www.countryshowdown.com/contestant.php?id=23125" target="_blank"><img src="carousel/merritt.png" alt="Merritt Whitley" border="0"/></a></li>
<li id="imagefadebox">	
<a href="http://www.countryshowdown.com/contestant.php?id=23533" target="_blank"><img src="carousel/alyssa.png" alt="Alyssa Page" border="0"/></a></li>

</ul></div>
	<div id="mike"></div>
	<div id="controls">
	<table class="control_table">
	<form name="controls">
	<script language="JavaScript">
	<!-- start scripting
		DrawControls();
	// end scripting -->
	</script>
	</form>
	</table>
	</div>
</div>
</body>
</html>



Type
MIME Type	text/html
Resource Type	Document
Location
Full URL	http://www.countryshowdown.com/SIR/
Scheme	http
Host	www.countryshowdown.com
Path	/SIR/
Filename	SIR
Request & Response
Method	—
Cached	No
Status	—
Code	—

Open in new window

0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 1332 total points
ID: 39158865
Ok, yes I see they are dynamic.
Without access to their documentation (cannot see anything on their site) it's impossible to know what params you should be passing for the look of it.
Unless maybe you hardcode the layout...
0
 
LVL 29

Assisted Solution

by:chilternPC
chilternPC earned 668 total points
ID: 39159161
I think its around the table with the class  control_table
i,e,  <table class="control_table">
I would replace it with css instead of a table but if you can't do that
I would add to the class by making the valign of the cells 'top'
However, I couldn't find your definition for it.

I think it may also display differently on different browsers but haven't checked it.
using Firefox to inspect the elements and
looking at the source, where the controls are  the table width set to 138  but the images inside are 163, bigger than the table .
do you have control over his part?
0
 

Author Closing Comment

by:brucegust
ID: 39161808
I was able to solve the problem by reverting to the doc type that was used in the original template. Once I did, everything lined up the way that it needed to along with a div that positioned things accordingly. The div by itself didn't do it, but that combined with the doc type knocked it out of the park.

Thanks!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

See our Services
Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Adapting an Unordered List for a Horizontal Menu With Dropdown and Popup
Article by: OmniUnlimited
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Create N column layout for Bootstrap
Article by: Julian
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.
CSS Positioning - Relative vs Absolute vs Fixed
Video by: Sarah
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Alpha Transparency in CSS
Video by: Sarah
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Advertise Here
Suggested Courses

664 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

Advertise Here