Conveyer Belt Problem

**diana keely** · 04-08-2008, 03:02 PM

1) Script Title: Conveyer Belt

2) Script URL: http://www.dynamicdrive.com/dynamici...rightslide.htm

3) Describe problem:
Why does only one photo continuously show up? There should be 5 in total but only one keeps appearing... Please help anyone

http://www.girlscoutsindiana.org/gsli/Photos/test.html

**ddadmin** · 04-08-2008, 06:49 PM

Hmm I've been trying out a few things, and so far all I know is that the reason is because each image within your slideshow is wrapping after the proceeding. You can see this by increasing the height of your slideshow to reveal the other slides (var sliderheight="150px"). What I can't tell is why though. It must have something to do with the layout the script is contained in. Try moving the entire script outside any container other than the <BODY> itself, just to confirm whether this is the case.

**rangana** · 04-09-2008, 05:34 AM

This is because you had set in your CSS the img element to display as block level element img:display:block;

...This is what ddadmin, had seen and we had experience which bring confusion

...The fix is not really on the script, but on the CSS, remove all the td img{display:block;} declaration and everything will work out fine

...This is how it will look like. (Don't worry, i've commented my ammendments)

Code:

	body {
		font-family: "Times New Roman", Times, serif;
	}
	
	#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	float : left;
	width : 11em;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-color: #faf8df;
	color: #003c79;
	height: auto;
	}
#left {
	background-color: #faf8df;
	float: left;
	width: 11em;
	height: auto;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: auto;
	position:relative;
	z-index:10000;

}
#holder {
	width: 814px;
	border: thin solid #000000;
	background-color: #FFFFFF;
	margin-right: auto;
	margin-left: auto;
}
#kekelogo {
	font-size: 100%;
	background-color: #082707;
	clear: none;
	width: 814px;
}
#header {
	width: 800px;
	border-bottom-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
	
	#nav li { /* all list items */
	position : relative;
	float : left;
	line-height : 1.25em;
	margin-bottom : -1px;
	width: 11em;
	background-color: #faf8df;
	color: #003c79;
	}
	
	#nav li ul { /* second-level lists */
	position : absolute;
	left: -999em;
	margin-left : 11.05em;
	margin-top : -1.35em;
	background-color: #faf8df;
	color: #003c79;
	}
	
	#nav li ul ul { /* third-and-above-level lists */
	left: -999em;
	color: #faf8df;
	background-color: #003c79;
	}
	
	#nav li a {
		width: 11em;
		w\idth : 10em;
		display : block;
		font-weight : bold;
		text-decoration : none;
		background-color: #faf8df;
		color: #003c79;
		border : 1px solid black;
		padding : 0 0.5em;
	}
	
	#nav li a:hover {
		color: #faf8df;
		background-color: #003c79;
	}
	
	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
		left: -999em;
		background-color: #faf8df;
		color: #003c79;
	}
	
	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
		background-color: #faf8df;
		color: #003c79;
	}
	
	#content {
	margin-left : 12em;
	width: 375px;
	font-family: "Times New Roman", Times, serif;
	}
    #floatbox {
	font-size: small;
	margin: 5px;
	padding: 1px;
	float: right;
	width: 125px;
	border: thin solid #666666;
	background-color: #e2e59e;
	display: block;
	color: #003c79;
}
    #footer {
	font-size: 80%;
	text-align: right;
	clear: none;
	width: 100%;
}
    #Layer1 {
	position:absolute;
	width:475px;
	height:453px;
	z-index:1;
	left: 409px;
	top: 186px;
}
    .style1 {color: #E7CA54}
	
	/*******************rangana editeed this part
	td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}

	*************end of rangana's edition***************/
	
    .h2 {
	font-size: large;
	font-weight: bolder;
	text-transform: capitalize;
	color: 003c79;
}
a:link {
	color: #003c79;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: 009878;
}
a:hover {
	text-decoration: none;
	color: #009878;
}
a:active {
	text-decoration: none;
}
h2 {
	font-size: large;
	color: #00755C;
}
h5 {
	color: #003c79;
}
h1 {
	font-size: x-large;
	color: #003C79;
}
h1,h2,h3,h4,h5,h6 {
	font-family: Arial, Helvetica, sans-serif;
}

Hope that helps

Thread: Conveyer Belt Problem

Thread Tools

Search Thread

Conveyer Belt Problem

Bookmarks

Bookmarks

Posting Permissions