Forums

sharyush

when using the startStop slider in IE, it is moving to far on the second slide so the left side is cut off on the second and third slide.

http://www.newtelsystems.com/newtest/

any ideas?

i really appreciate your help

triplefour design

I believe the code below should fix your problem. Just delete the text in your file css/style.css and replace it with the code below.

The reason why it was being cutoff was because on the .slide div it had a padding of

padding: 8px 10px;

Which means it was having 8px on the top and bottom and 10px left and right.

when I changed it to the code below it gave a 20px padding at the top so it pushes the headings and images down but has no padding on the right or the left or the bottom. (It works like a clock first value (top) second value (right) and so on around the clock in a clockwise direction). This is how I remember it. Hope this helps, let me know if you have any problems implementing the code.

Andrew

padding: 20px 0 0 0;


a { 
	text-decoration: none; 
	outline: none; 
}
a img { 
	border: none;
}
h2 { 
	font-family: Georgia, Serif; 
	font-size: 36px; text-align: center;
	font-weight: normal; 
}
#page-wrap { 
	background: white; 
	width: 720px;
	padding: 120px 20px; 
}
#slider { 
	background: white; 
	height: 210px; 
	overflow: hidden;
	position: relative; 
	margin: 10px 0; 
	width: 700; 
}
/* DEFAULT is for three panels in width, adjust as needed                                   
This only matters if JS is OFF, otherwise JS sets this. */	
#mover	{ 
	width: 720px; 
	position: absolute; 
	background: white;
}
.slide	{ 
	padding: 20px 0 0 0; 
	width: 720px; 
	float: left; 
	position: relative; 
	background: white; 
}
.slide h1 { 	
	font-family: Helvetica, Sans-Serif; 
	font-size: 30px; letter-spacing: -1px;
	color: #4E76B4; 
}
.slide p { 
	color: #999; 
	font-size: 12px; 
	line-height: 22px; 
	width: 300px; 
}
.slide img { 
	position: absolute; 
	top: 20px; 
	left: 400px; 
}
#slider-stopper	{ 
	position: absolute; 
	top: 210px; 
	right: 10px; 
	background: gray; 
	color: white;
	padding: 3px 3px; 
	font-size: 10px; 
	text-transform: uppercase; 
	z-index: 1000; 
}

treehouse : what would you like to learn today?

Forums

css overflow problem IE