Problem with CSS Slide Show

Dev Shed Forums Sponsor:

October 19th, 2012, 10:56 AM

bigtail

Registered User

Join Date: Oct 2012

Posts: 2

Time spent in forums: 28 m 30 sec
Reputation Power: 0

Problem with CSS Slide Show

Hi,
This is a Slide Show made with CSS3.
It works great in FireFox but the text on the right hand side of the images is not visible in Chrome and Safari.
Could you please help me to find the mistake?

HTML Code:

Code:

<!DOCTYPE html>
<html class="no-js" lang="en">

<head>

	<meta charset="utf-8" />
	<meta content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width">

	<title>CSS3 Slideshow</title>

	<!-- CSS -->
	<link href="slideshow.css" media="screen, projection" rel="stylesheet" type="text/css" />
</head>

<body>

    
    <article id=slider>
		
		<!-- Slider Setup -->
        <!-- somit ermittlen wir die Werte. Die eigentliche Input felder werden allerdings durch CSS versteckt -->
	
		<input checked type=radio name=slider id="slide1" />
		<input type=radio name=slider id="slide2" />
		<input type=radio name=slider id="slide3" />
		<input type=radio name=slider id="slide4" />
		<input type=radio name=slider id="slide5" />
	
	
		<!-- The Slider -->
		
		<div id=slides>
		
            <div id="overflow">
			
				<div class=inner>
				
					<article>
						<div class=info><h3>First image</h3> by <a href="#">More Details</a></div>
						<img src="http://www.tutorials.de/images/01.jpg" alt="Travel Corporation" width="640"/>
					</article>
					
					<article>
						<div class=info><h3>Second image</h3> by <a href="#">More Details</a></div>
						<img src="http://www.tutorials.de/images/02.jpg" alt="Travel Corporation" width="640" />
					</article>
					
					<article>
						<div class=info><h3>Third image</h3> by <a href="#">More Details</a></div>
						<img src="http://www.tutorials.de/images/03.jpg" alt="Travel Corporation" width="640" />
					</article>
					
					<article>
						<div class=info><h3>Fourth image</h3> by <a href="#">More Details</a></div>
						<img src="http://www.tutorials.de/images/04.jpg" alt="Travel Corporation" width="640" />
					</article>
					
					<article>
						<div class=info><h3>Fifth image</h3> by <a href="#">More Details</a></div>
						<img src="http://www.tutorials.de/images/05.jpg" alt="Travel Corporation" width="640" />
					</article>
					
				</div> <!-- .inner -->
				
			</div> <!-- #overflow -->
		
		</div> <!-- #slides -->
	
	
		<!-- Controls and Active Slide Display -->
	
		<div id=controls>

			<label for="slide1"></label>
			<label for="slide2"></label>
			<label for="slide3"></label>
			<label for="slide4"></label>
			<label for="slide5"></label>
		
		</div> <!-- #controls -->
		
		<div id=active>

			<label for="slide1"></label>
			<label for="slide2"></label>
			<label for="slide3"></label>
			<label for="slide4"></label>
			<label for="slide5"></label>
			
		</div> <!-- #active -->
	
	</article> <!-- #slider -->


	
</body>
</html>

CSS Code (slideshow.css):

Code:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }
body {
  line-height: 1; }
ol, ul {
  list-style: none; }

a img {
  border: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block; }

body {
  font: 14px/22px Arial, Helvetica, sans-serif;
  color: #333;
  background: #ddd;
  margin: 10px auto;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
	font-weight:bold;
	font-size: 16px;
	margin: 12px 0;
}

h1 {
	margin: 35px 0 5px;
	font-size: 26px;
	font-weight: normal;
}

#slider {
	text-align: center;
}

h2 {
	margin: 40px 0 25px;
	border-bottom: 1px solid #bbb;
	padding: 0 0 10px;
}

p {
	margin: 0 0 16px;
}

strong { 
	font-weight: bold;
}

label, a {
	color: teal;
	cursor: pointer;
	text-decoration: none;
}
label:hover, a:hover {
	color: #000 !important;
}


/* Slider Setup */

input {
	display: none;
}

#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }


#overflow {
	/* Thomy instead of 100%*/
	width: 640px;   !important;
	overflow: hidden;
}

article img {
	width: 100%;
}

#slides .inner {
	width: 500%;
	line-height: 0;
}

#slides article {
	width: 20%;
	float: left;
}

/* Slider Styling */

/* Control Setup */

#controls {
	margin: -25% 0 0 0;
	width: 100%;
	height: 50px;
}

#controls label { 
	display: none;
	width: 50px;
	height: 50px;
	opacity: 0.3;
}

#active {
	margin: 23% 0 0;
	text-align: center;
}

#active label {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	display: inline-block;
	width: 10px;
	height: 10px;
	background: #bbb;
}

#active label:hover {
	background: #ccc;
	border-color: #777 !important;
}

#controls label:hover {
	opacity: 0.8;
}


#slide1:checked ~ #controls label:nth-child(2), 
#slide2:checked ~ #controls label:nth-child(3), 
#slide3:checked ~ #controls label:nth-child(4), 
#slide4:checked ~ #controls label:nth-child(5), 
#slide5:checked ~ #controls label:nth-child(1) {
	background: url('images/next.png') no-repeat;
	float: right;
	margin: 6% -45px 0 0;
	display: block;
}


#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
	background: url('images/prev.png') no-repeat;
	float: left;
	margin: 6% 0 0 -45px;
	display: block;
}


#slide1:checked ~ #active label:nth-child(1),
#slide2:checked ~ #active label:nth-child(2),
#slide3:checked ~ #active label:nth-child(3),
#slide4:checked ~ #active label:nth-child(4),
#slide5:checked ~ #active label:nth-child(5) {
	background: #333;
	border-color: #333 !important;
}

/* Info Box */

.info {
	line-height: 20px;
	margin: 0 60% -150%;
	position: absolute;
	font-style: italic;
	padding: 30px 0px;
	opacity: 0;
	color: #000;
	text-align: left;
	width: 25%;
}

.info h3 {
	color: #333;
	margin: 0 0 5px;
	font-weight: normal;
	font-size: 22px;
	font-style: normal;
}

#slides {
	margin: 15px 0 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	box-shadow: 1px 1px 4px #666;
	padding: 1%;
	background: #fff;
	background: rgb(252,255,244); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(252,255,244,1) 0%, rgba(219,218,201,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(219,218,201,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* IE10+ */
	background: linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#dbdac9',GradientType=0 ); /* IE6-9 */
}


/* Animation */

#slides .inner {
	-webkit-transform: translateZ(0);
	-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
     -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
        transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

	-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
        transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}

#slide1:checked ~ #slides article:nth-child(1) .info,
#slide2:checked ~ #slides article:nth-child(2) .info,
#slide3:checked ~ #slides article:nth-child(3) .info,
#slide4:checked ~ #slides article:nth-child(4) .info,
#slide5:checked ~ #slides article:nth-child(5) .info {
	opacity: 1;
	-webkit-transition: all 1s ease-out 0.6s;
	-moz-transition: all 1s ease-out 0.6s;
	-o-transition: all 1s ease-out 0.6s;
	transition: all 1s ease-out 0.6s;
}

FireFox:
http://imageshack.us/a/img195/3766/firefoxb.png

Chrome:
http://imageshack.us/a/img19/392/chrom.png

Thanks for your help.

Problem with CSS Slide Show

Developer Shed Advertisers and Affiliates