[PixelBit]

Here's what is happening, notice the slider selectors (the little squares under the leader boards); http://gyazo.com/8cb...86aecdb27f8fca7

Here is the Html and Css for them;

	<div id="slider">
		<div class="wrap">
			<div class="slide">
				<h5>#112443</h5>
				<p>Game time: 0:08:26 - Ranked Summoner's Rift</p>
				<div class="table">
					<img src="img/vs.png" class="center"/>
					<div class="clearboth"></div>
					<div class="tableleft">
						<ul>
							<li><a href="#"><img src="img/board_icon.png" />Name23423</a></li>
							<li><a href="#"><img src="img/board_icon.png" />Name23423423</a></li>
							<li><a href="#"><img src="img/board_icon.png" />Name23</a></li>
							<li><a href="#"><img src="img/board_icon.png" />Name23423</a></li>
							<li><a href="#"><img src="img/board_icon.png" />Name2</a></li>
							<li><a href="#"><img src="img/spectate_button.png" id="spectate" /></a></li>
						</ul>
					</div>
					<div class="tableright">
						<ul>
							<li><a href="#">Name3243234<img src="img/board_icon.png" /></a></li>
							<li><a href="#">Name432<img src="img/board_icon.png" /></a></li>
							<li><a href="#">Name2323<img src="img/board_icon.png" /></a></li>
							<li><a href="#">Name423<img src="img/board_icon.png" /></a></li>
							<li><a href="#">Name<img src="img/board_icon.png" /></a></li>
							<li><a href="#"><img src="img/bet_button.png" id="makebet" /></a></li>
						</ul>
					</div>
					<div class="clearboth"></div>
				</div>
			</div>

			<div class="slide">
				<h5>#112443</h5>
				<p>Game time: 0:08:26 - Ranked Summoner's Rift</p>
				<div class="table">
					<img src="img/vs.png" class="center"/>
					<div class="clearboth"></div>
					<div class="tableleft">
						<ul>
							<li><a href="#"><img src="img/board_icon.png" />Name23423</a></li>
							<li><a href="#"><img src="img/board_icon.png" />Name23423423</a></li>
							<li><a href="#"><img src="img/board_icon.png" />Name23</a></li>
							<li><a href="#"><img src="img/board_icon.png" />Name23423</a></li>
							<li><a href="#"><img src="img/board_icon.png" />Name2</a></li>
							<li><a href="#"><img src="img/spectate_button.png" id="spectate" /></a></li>
						</ul>
					</div>
					<div class="tableright">
						<ul>
							<li><a href="#">Name3243234<img src="img/board_icon.png" /></a></li>
							<li><a href="#">Name432<img src="img/board_icon.png" /></a></li>
							<li><a href="#">Name2323<img src="img/board_icon.png" /></a></li>
							<li><a href="#">Name423<img src="img/board_icon.png" /></a></li>
							<li><a href="#">Name<img src="img/board_icon.png" /></a></li>
							<li><a href="#"><img src="img/bet_button.png" id="makebet" /></a></li>
						</ul>
					</div>
					<div class="clearboth"></div>
				</div>
			</div>
			<div id="selectors">
				<div class="selector"></div><div class="activeselector"></div><div class="selector"></div><div class="selector"></div><div class="selector"></div>
			</div>
		</div>
	</div>

#slider {
	background-color: #424242; 
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#505050), to(#3c3c3c));
	background-image: -webkit-linear-gradient(top, #505050, #3c3c3c); 
	background-image: -moz-linear-gradient(top, #505050, #3c3c3c);
	background-image: -ms-linear-gradient(top, #505050, #3c3c3c);
	background-image: -o-linear-gradient(top, #505050, #3c3c3c);
	border-top: solid 1px #343434;
	border-bottom: solid 1px #343434;
	padding: 20px;
	width: 100%;
	text-align: center
}

#slider .slide {
	width: 424px;
	display: inline-block;
	margin-right: 40px;
}

#slider .slide h5 {
	font-size: 16px;
	font-weight: bold;
	color: #ececec;
	text-align: center;
	text-shadow: 0px 2px #0f0f0f;
}

#slider .slide p{
	font-size: 12px;
	color: #ececec;
	text-align: center;
	padding-bottom: 10px;
	text-shadow: 0px 2px #0f0f0f;
}

#slider .table {
	background-color: #303030; 
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#535353), to(#1c1c1c));
	background-image: -webkit-linear-gradient(top, #535353, #1c1c1c); 
	background-image: -moz-linear-gradient(top, #535353, #1c1c1c);
	background-image: -ms-linear-gradient(top, #535353, #1c1c1c);
	background-image: -o-linear-gradient(top, #535353, #1c1c1c);
	border: solid 1px #222222;
	border-radius: 3px;
	padding-left: 20px;
	padding-right: 20px;
	-webkit-box-shadow: 0 8px 10px -68px #000000;
	-moz-box-shadow: 0 8px 10px -8px #000000;
	box-shadow: 0 8px 10px -8px #000000;
}

#slider .tableleft {
	float: left;
	text-align: left;
	margin-left: -40px;
}

#slider .tableright {
	float: right;
	text-align: right;
}

#slider .table li {
	padding-bottom: 5px;
}

#slider .table img.center {
	padding-top: 5px;
	display: block;   
	margin-left: auto;   
	margin-right: auto;
}

#slider .table a {
	color: #ffffff;
	font-size: 12px;
	font-weight: bold;
	text-shadow: 0px 1px #0f0f0f;
}

#slider .table img {
	margin-left: 4px;
	margin-right: 4px;
}

#slider #spectate {
	padding-left: 20px;
}

#slider #makebet {
	padding-right: 20px;
}

#slider #selectors {
	margin-top: 5px; 
}

#slider #selectors .selector {
	display: inline-block;
	width: 12px;
	height: 12px;
	background: url("../img/selector_inactive.png") no-repeat;
	padding-right: 5px;
}

#slider #selectors .activeselector {
	display: inline-block;
	width: 12px;
	height: 12px;
	background: url("../img/selector_active.png") no-repeat;
	padding-right: 5px;
}

Cheers,
~Jamal

This post has been edited by PixelBit: 21 August 2012 - 11:40 AM

[BenignDesign]

Just an FYI, the sliders aren't functioning for me in IE8.