absolute div 100% causing white line around page

2 replies [Last post]

Wed, 2008-08-20 10:17

eddjc

Offline

Regular

Last seen: 10 years 46 weeks ago

Timezone: GMT+1

Joined: 2007-07-28

Posts: 33

Points: 16

Hello everyone,

I've created a gallery type effect where when someone clicks on an image, the two divs become visible - one at half opacity that hides the rest of the page and one at full that displays the image. The half opacity div is at width:100% and height:100%.

Although (using the tips from this forum) when I used display:none instead of visibility:hidden the white line dissapears, when I show it using display:block or display:inline, the white line comes back. If it's not a white line then the scroll bars appear as if the page is exceeding the window's limits.

Here is the generated xHTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Black Hair Contemporary Music Ensemble</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->
<link href="rss.php" rel="alternate" type="application/rss+xml" title="Black Hair Website RSS News Feed" />
<script type="text/javascript" src="js/add_bookmark.js">
</script>
 
<script type="text/javascript" src="spryincludes/slidingpanels/SprySlidingPanels.js"></script>
<script type="text/javascript" src="spryincludes/SpryDOMUtils.js"></script>
<script type="text/javascript" src="spryincludes/sp_unobtrusive.js"></script>
<link href="spryincludes/slidingpanels/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="spryincludes/SpryEffects.js"></script>
 
</head>
<body>
<div id = "previewback">
</div>
<div id = "previewfront">
<div class = "picture">
 
<img src="#" id="preview">
</div>
<div class = "previewnav">
 
<table>
<tr><td colspan="2" id = "path"></td></tr>
<tr><td colspan="2" id = "blah"></td></tr>
<tr><td style ="width:400px; text-align:left">
<a href="#" id="leftlink" onclick="changePreview(currentPic - 1); return false;">Previous</a> | 
<a href="#" id="rightlink" onclick="changePreview(currentPic + 1); return false;">Next</a></td><td style ="width:200px; text-align:right">
<a href="#" id="close" onclick="closepreview(); return false;">Close</a></td></tr></table>
</div>
</div>
 
<div class = "wrapper">
 
	<div class = "header">
 
	</div>
 
	<div class = "bottom">
 
		<div class = "left">
			<div class = "homeleft">
				<div class ="about">
				<table class="head1"><tr><td style="width:300px; background:url(img/linedark.gif) repeat-x 0px 8px">BLACK HAIR CONTEMPORARY MUSIC ENSEMBLE</td><td><img src="img/blackicon.gif" /></td></tr></table>
					<div class = "abouttext">
 
 
					<b>Black Hair</b>  is an ensemble of musicians who share a commitment to exploring new ways of presenting new music.  Together the group devises programmes which take the audience on  journey - sometimes quite literally - and their concerts need to be seen as well as heard.     Experienced workshop leaders, the group also strives to share its ideas through collaborations and residencies, especially with young musicians, actors and dancers.					</div>
				</div>
				<div class = "newsticker">
				<table class="head1"><tr><td style="width:280px; background:url(img/linedark.gif) repeat-x 0px 8px">NEWS</td><td style="width:20px; background:url(img/linedark.gif) repeat-x 0px 8px"><a href="feed://www.blackhairensemble.com/rss.php">RSS</a></td><td><a href="feed://www.blackhairensemble.com/rss.php"><img src="img/rssicon.gif" /></a></td></tr></table>
					<div class = "newstext">
 
					<div class = "newsitem"></div><div class = "newsitem"><h2>New Video Added</h2><h3>Wednesday, 13th August 2008, 10:17pm</h3>Chris Brookes - Death vs Death<br /><br /><a href = "audio.php?res=1&&type=video">View Video</a></div><div class = "newsitem"><h2>New Audio Sample Added</h2><h3>Wednesday, 13th August 2008, 3:03pm</h3><table><tr><td>				<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="15" height="15" id="simple_player_28x28" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="flashVars" value="mp3=mp3/para.mp3" />
	<param name="movie" value="simple_player_28x28.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="simple_player_28x28.swf" quality="high" bgcolor="#ffffff" width="20" height="20" name="simple_player_28x28"  flashVars="mp3=mp3/para.mp3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
 
				</td><td>Edward Caine - 5/5/5</td></tr></table><br /><a href = "audio.php?res=1&&type=audio">Samples Page</a></div><div class = "newsitem"><h2>New Website!</h2><h3>Thursday, 24th July 2008, 4:39pm</h3>Welcome to our new website! This site will be regularily updated with news, images and sound examples, as well as a list our gigs/concerts and a list of repertoire. The website uses modern technologies, is run on PHP, MySQL, Javascript and XHTML. There is also an RSS newsfeed which you can subscribe to to be reminded automatically of new updates.</div><div class = "newsitem"><h2>New Gallery Added</h2><h3>Saturday, 26th May 2007, 7:00pm</h3>Title: Modena, Italy - 'Skin and bone'<br /><table><tr><td><img src = "photos/black1_tiny.jpg" / ></td><td><img src = "photos/black3_tiny.jpg" / ></td><td><img src = "photos/black5_tiny.jpg" / ></td></tr></table><a href = "gallery.php?gallery=2">View Gallery</a></div><div class = "newsitem"><h2>New Gallery Added</h2><h3>Wednesday, 20th September 2006, 1:00pm</h3>Title: September 2006 : Rotherham, Loosen your Talktapes<br /><table><tr><td><img src = "photos/018_18_tiny.jpg" / ></td><td><img src = "photos/027_27_tiny.jpg" / ></td><td><img src = "photos/048_48_tiny.jpg" / ></td></tr></table><a href = "gallery.php?gallery=1">View Gallery</a></div>					
					</div>
				</div>
			</div>
			<div class = "galleryview">
 
				<a href = "#" onclick="sp1.showPreviousPanel(); return false;"><div class = "up">
				</div></a>
				<div class = "gallery">
 
 
 
					<div id="example1" class="SlidingPanels" tabindex="0">
						<div class="SlidingPanelsContentGroup">
 
 
 
						<script> var galArray = new Array();var currentGal = "Modena, Italy - 'Skin and bone'";</script><div class="SlidingPanelsContent">
<a href = "#" onclick="showPreview(0);  return false;"><img src = "photos/black1_thumb.jpg" /></a>
<script>galArray[0] = { file:"black1", desc:"Damien up to his usual trinks"};</script></div>
<div class="SlidingPanelsContent">
<a href = "#" onclick="showPreview(1);  return false;"><img src = "photos/black3_thumb.jpg" /></a>
<script>galArray[1] = { file:"black3", desc:""};</script></div>
<div class="SlidingPanelsContent">
<a href = "#" onclick="showPreview(2);  return false;"><img src = "photos/black5_thumb.jpg" /></a>
<script>galArray[2] = { file:"black5", desc:""};</script></div>
<div class="SlidingPanelsContent">
<a href = "#" onclick="showPreview(3);  return false;"><img src = "photos/black8_thumb.jpg" /></a>
<script>galArray[3] = { file:"black8", desc:""};</script></div>
<div class="SlidingPanelsContent">
<a href = "#" onclick="showPreview(4);  return false;"><img src = "photos/pubblico_thumb.jpg" /></a>
<script>galArray[4] = { file:"pubblico", desc:""};</script></div>
					</div>
				</div>
			</div>
 
 
 
				<a href = "#" onclick="sp1.showNextPanel(); return false;"><div class = "down">
 
				</div></a>
			</div>
 
		</div>
 
		<div class = "navigation">
			<div class = "navplaces">
 
			<a href="index.php">HOME</a><p>
 
			<a href="repertoire.php">REPERTOIRE</a></p><p>
 
			<a href="workshops.php">WORKSHOPS</a></p><p>
 
			<a href="audio.php">AUDIO/VIDEO</a></p><p>
 
			<a href="gigs.php">UPCOMING GIGS</a></p><p>
 
			<a href="about.php">ABOUT US</a></p><p>
 
			<a href="gallery.php">GALLERY</a></p><p>
 
			<a href="contact.php">CONTACT</a></p><p>
 
			<a href="links.php">LINKS</a></p>
 
 
			</div>
 
 
			<div class = "options">
 
			<table>
			<tr><td style="width:24px; background:url(img/enddark.gif) no-repeat 16px 8px"><a href="feed://www.blackhairensemble.com/rss.php"><img src="img/rssicon.gif" /><a/></td><td><a href="feed://www.blackhairensemble.com/rss.php"><div style = "background:url(img/linedark.gif) repeat-x 0px 5px; width:90px;border-spacing:0px;">RSS News Feed</div></a></td></tr>
			<tr><td style="width:24px; background:url(img/enddark.gif) no-repeat 16px 8px"><a href="javascript:addToFavorites()"><img src="img/bookmarkicon.gif" /></a></td><td><div id="addBookmarkContainer" style = "background:url(img/linedark.gif) repeat-x 0px 5px; width:115px;border-spacing:0px;"></div></td></tr>
			</div>
 
		</div>
 
 
 
 
 
	</div>
 
</div>
 
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels('example1');
 
var currentPic = new Number;
 
function closepreview ()
{
//document.getElementById('previewback').style.visibility='Hidden';  
document.getElementById('previewback').style.display='none';  
document.getElementById('previewfront').style.visibility='Hidden'; 
document.getElementById('previewback').style.opacity='0';  
document.getElementById('previewfront').style.opacity='0';  
}
function showPreview (imgid)
{
changePreview(imgid);
 
//document.getElementById('previewback').style.visibility='Visible';  
document.getElementById('previewback').style.display='inline';  
document.getElementById('previewfront').style.visibility='Visible'; 
document.getElementById('previewback').style.opacity='.6';  
document.getElementById('previewfront').style.opacity='1';  
}
 
function changePreview(imgid) {
	document.getElementById('preview').src = 'photos/' + galArray[imgid].file + '.jpg';
 
	currentPic = imgid;
 
	document.getElementById('blah').innerHTML = galArray[imgid].desc;
	document.getElementById('path').innerHTML = '<a href="gallery.php">Galleries<\/a> > ' + currentGal;
 
	if (imgid == '0')
	{
		document.getElementById('leftlink').style.color = "#666";
	}
	else
	{
		document.getElementById('leftlink').style.color = "#0060ff";
	}
 
	if (imgid == (galArray.length - 1))
	{
		document.getElementById('rightlink').style.color = "#666";
	}
	else
	{
		document.getElementById('rightlink').style.color = "#0060ff";
	}
 
}
 
 
 
</script>
 
 
</body>
 
</html>

Here is the CSS:

/* @override <a href="http://localhost/blackhair/style.css" title="http://localhost/blackhair/style.css">http://localhost/blackhair/style.css</a> */
 
body
{
	font-size: 12px;
	background: black;
	font-family: Helvetica, Geneva, Arial;
	color: #ccc;
 
}
img
{
	border: 0px;
}
a img
{
	border:  0px;
}
h1
{
	font-size: 18px;
	color: #ff9933;
	font-weight: normal;
}
h2
{
	font-size: 14px;
	color: #ff9933;
	font-weight: normal;
	margin-top: 0px;
	margin-bottom: 0px;
}
h3
{
	font-size: 12px;
	color: #cc9966;
	font-weight: normal;
	margin-top: 0px;
	margin-bottom: 5px;
}
a{
	text-decoration: none;
	color: #ffcc33;
}
a:hover
{
	color: #ffffcc;
}
.highlight
{
	color: #fcff8c;
}
.wrapper
{
	width: 806px;
	height: 786px;
	margin-left: auto;
	margin-right: auto;
}
.header
{
	width: 806px;
	height: 135px;
	background: url(img/headback.jpg);
}
.bottom
{
	width: 806px;
	height: 651px;
	background: url(img/bodyback3.gif);
}
.left
{
	margin-top: 40px;
	margin-bottom: 0px;
	width: 630px;
	height: 611px;
	float: left;
 
}
.navigation
{
	width: 159px;
	height: 551px;
	float: left;
	padding-left: 15px;
	padding-top: 0px;
	border-left: 1px solid #ccc;
	margin-top: 50px;
	margin-bottom: 50px;
 
}
.navigation a
{
	text-decoration:none;
	color: #FFF;
 
	padding-top: 5px;
	padding-bottom:  5px;
	padding-right:  20px;
	padding-left:  5px;
}
.navigation a:hover
{
	text-decoration:none;
	color: #fcff8c;
 
 
}
.navplaces a:hover:after
{
	content: " >";
}
.navplaces a:hover:before
{
	//content: " +";
}
.navplaces
{
	height: 500px;
	width: 154px;
}
 
.options
{
	height: 61px;
	width: 154px;
}
.options a
{
	padding-right: 0px;
	padding-left:  0px;
}
.options table
{
	border-spacing:0px;
 
}
.options table td
{
	padding-bottom: 8px;
 
}
 
/* @group Home */
 
.homeleft
{
	margin-top: 10px;
	width: 355px;
	height: 541px;
	float: left;
 
}
.galleryview
{
	width: 275px;
	height: 571px;
	float: left;
}
.about
{
	width: 305px;
	height: 180px;
	padding-left: 30px;
	padding-right: 20px;
 
 
}
.newsticker
{
	width: 305px;
	height: 357px;
	padding-left: 30px;
	padding-right: 20px;
 
}
table.head1
{
	width: 315px;
	border-spacing:0px;
	padding: 0px;
	padding-bottom: 4px;
	color: #FFF;
}
table.head1 a
{
	color: #fff;
}
table.head1 a:hover
{
	color: #fcff8c;
}
.abouttext
{
	width: 315px;
	height: 140px;
	overflow: auto;
	padding-top: 10px;
 
}
.newstext
{
	width: 313px;
	height: 336px;
	overflow: auto;
}
.newsitem
{
	width: 288px;
	margin-bottom: 20px;
	margin-top: 10px;
	padding-right: 10px;
	padding-bottom: 20px;
	border-bottom: 1px dotted #ccc;
 
}
.newsitem h3
{
	margin-bottom: 15px;
 
}
.up
{
	height: 30px;
	width: 275px;
	background: url(img/updark.gif) no-repeat center;
	opacity: 0.8;
}
a .up:hover
{
 
	background: url(img/uphoverdark.gif) no-repeat center;
}
.gallery
{
	height: 511px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-right:20px;
	margin-left: 20px;
	width: 235px;
	background: url(img/gallerybackdark.gif) no-repeat center;
 
	opacity: 1;
}
.down
{
	height: 30px;
	width: 275px;
	background: url(img/downdark.gif) no-repeat center;
	opacity: 0.8;
}
a .down:hover
{
 
	background: url(img/downhoverdark.gif) no-repeat center;
}
 
/* @end */
 
#slide {
	width: 255px;
	height:  481px;
	padding: 30px;
}
.repertoire
{
	width: 560px;
	margin-left: 15px;
	margin-right: 15px;
	margin-top: 0px;
	padding: 20px;
	//background: black;
	opacity: 0.9;
}
.workshops
{
	width: 560px;
	margin-left: 15px;
	margin-right: 15px;
	height: 530px;
 
	margin-top: 0px;
	padding: 20px;
	background: #333;
	opacity: 0.8;
	overflow: auto;
	text-align: left;
 
}
.workshops h1
{
	margin-top: 0px;
	margin-bottom: 20px;
 
}
.workshops h2
{
	margin-bottom: 20px;
	margin-top: 20px;
}
.workshops h3
{
	margin-bottom: 15px;
	margin-top: 20px;
	}
.workshops img
{
	width: 180px;
 
}
.workshops table
{
	border-spacing: 0px;
	border: 0px;
	padding: 0px;
	margin-bottom: 20px;
}
.workshops table td
{
	padding-right: 8px;
}
.accordtext
{
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
	padding-left: 0px;
	//color: black;
	opacity: 1;
	//background: white;
	margin-bottom: 10px;
}
.accordtext table
{
	margin-top: 10px;
	margin-bottom: 10px;
	color: #cc9966;
}
.accordtext table td b
{
	color: white;
}
.accordtext table td
{
	padding-right: 20px;
	vertical-align: top;
}
.accordtext table b
{
	color: black;
}
.accordtext h2
{
	margin-top: 10px;
	margin-bottom: 25px;
	font-size: 16px;
	=
	//text-decoration: underline;
 
}
.selector
{
 
	padding: 5px;
}
 
.selector table
{
 
}
.selector td
{
	font-weight:bold;
	padding-right: 5px;
	padding-left: 5px;
 
 
}
.selector td a
{
	text-decoration: none;
	padding: 5px;
 
 
}
.selector td a:hover
{
	text-decoration: none;
	color: white;
	background: #333;
 
 
}
#effects
{
	width: 530px;
	height: 270px;
	overflow: hidden;
	padding: 10px;
	margin-left: 40px;
	margin-right: 40px;
	opacity: .8;
	background: #fff;
}
.player
{
	width: 320px;
	height: 280px;
	padding-left: 0px;
	padding-right: 10px;
	float: left;
	overflow: hidden;
}
.player img
{
	width: 320px;
	height: 270px;
}
.meta
{
	width: 180px;
	height: 240px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-top: 20px;
	overflow: auto;
	float: left;
	background: #333;
	opacity: 1;
}
.meta h1
{
	margin-top: 0px;
}
.mediaNav
{
	height: 291px;
	margin:10px;
	width: 590px;
 
	padding-top: 10px;
	padding-left: 20px;
	overflow: hidden;
}
.mediaGroupNav
{
	width: 275px;
	height: 311px;
	float: left;
	padding-left: 10px;
	padding-right: 10px;
	overflow: hidden;
 
}
.mediaItem
{
 
 
}
.mediaItem h1
{
	padding-left: 20px;
	padding-bottom: 20px;
	margin-bottom: 0px;
	width: 235px;
	border-bottom: 1px solid #999;
}
a .mediaItem
{
	border-top: 1px solid grey;
	padding: 20px;
	color: #333;
}
.mediaGroupNav ul
{
	margin-left: 0px;
	margin-top: 0px;
	padding-left: 0px;
	height: 231px;
	overflow: auto;
 
}
.mediaGroupNav ul a
{
	color: #ccc;
 
}
.mediaGroupNav ul a:hover
{
	color: #ffcc33;
}
.mediaGroupNav li
{
	border-bottom: 1px solid grey;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #ccc;
	padding-left: 20px;
	margin-left: 0px;
	width: 235px;
	list-style-type: none;
	list-style-image: none;
 
}
.mediaGroupNav li:hover
{
	background: #333;
	color: #ffcc33;
	opacity: 0.8;
}
.HTMLPanelLoadingContent, .HTMLPanelErrorContent {
	display: none;
}
.gigs
{
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
	height: 579px;
	overflow: auto;
}
.pic
{
	float: left;
	width: 210px;
	padding-right: 10px;
}
.text
{
	float: left;
	width: 330px;
}
.text table
{
	margin-top: 10px;
}
.pic img
{
	width: 200px;
}
.aboutbrowser
{
	overflow: hidden;
	padding-left:10px;
	padding-right:10px;
	width: 70px;
	height: 601px;
	float: left;
}
.aboutbrowser img
{
	width: 50px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	//border: 1px solid white;
}
.aboutbrowser img a
{
	border: none;
	//border: 1px solid white;
}
#aboutfull
{
	height: 481px;
	width: 531px;
	float: left;
}
.aboutpic
{
	height: 481px;
	float: left;
	width: 140px;
	overflow: hidden;
}
.aboutpic img
{
	width:120px;
}
.aboutinfo
{
	width: 380px;
	float: left;
	height: 481px;
	overflow: auto;
	padding-right: 10px;
}
 
.aboutinfo h1
{
	margin-top: 0px;
	margin-bottom: 5px;
}
.aboutinfo h2
{
	margin-bottom: 10px;
}
#aboutgallery
{
	width: 531px;
	height: 100px;
	margin-top: 10px;
	float: left;
	visibility: hidden;
 
}
.agleft
{
	width: 30px;
	height: 100px;
	background: url(img/agleft.gif);
	opacity: 0.8;
	float: left;
}
a .agleft:hover
{
	opacity: 1;
}
.aboutgall
{
	background: url(img/agback.gif);
	width: 471px;
	height: 100px;
	float: left;
	opacity: 0.9;
}
.agright
{
	width: 30px;
	height: 100px;
	background: url(img/agright.gif);
	opacity: 0.8;
	float: left;
}
a .agright:hover
{
	opacity: 1;
}
#previewback
{
	position: absolute;
	z-index: 2;
	background: black;
	opacity: 0;
 
	display: none;
	width: 100%;
	height: 100%;
}
#preview
{
	height: 400px;
	padding: 20px;
}
#previewfront
{
	position: absolute;
	z-index: 3;
	width: 600px;
	height: 500px;
	left: 20%;
	right: 20%;
	top: 25%;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
	background: white;
	opacity: 0;
	visibility: hidden;
	text-align: center;
}
.previewnav
{
	height: 70px;
	vertical-align:middle;
	overflow: hidden;
 
}
.previewnav a
{
	color: #e6212b;
}
.previewnave table
{
	margin-top:0px;
	border-spacing: 0px;
 
}
.previewnav td
{
	padding-left: 10px;
	padding-right: 10px;
	text-align: left;
	color: #666;
	height: 14px;
}
#path
{
	color: #336699;
}
#blah
{
	border-bottom: 1px solid #ccc;
	padding-bottom:8px;
 
}
.picture
{
	height: 430px;
	width: 600px;
}
.contact
{
	margin-left: 60px;
	margin-top: 10px;
}
.contact td
{
	vertical-align:top;
	padding-left: 20px;
}
.contact td h1
{
	margin-top: 0px;
}
.links
{
	width: 500px;
	height: 580px;
	margin-left: 50px;
	margin-top: 10px;
	overflow: auto;
}
.link
{
	overflow: hidden;
}
.linkimg
{
	float: left;
	padding-right:20px ;
	padding-left: 20px;
	width: 100px;
}
.linkimg img
{
	width: 100px;
}
.linktxt
{
	width:350px;
	float: left;
	padding-right: 10px;
}
.linktxt h2
{
	margin-top: 0px;
	margin-bottom: 10px;
}
.linktxt h1
{
	margin-top: 0px;
	margin-bottom: 0px;
}
.galleryleft
{
	margin-top: 30px;
	margin-left: 20px;
	width: 315px;
	height: 531px;
	float: left;
	padding-left: 10px;
	padding-right: 10px;
	//background: white;
	overflow: auto;
	opacity: 0.8;
}
.galDesc
{
	padding: 10px;
}

The important bits of code are this:

CSS:
 
#previewback
{
	position: absolute;
	z-index: 2;
	background: black;
	opacity: 0;
 
	display: none;
	width: 100%;
	height: 100%;
}
#preview
{
	height: 400px;
	padding: 20px;
}
#previewfront
{
	position: absolute;
	z-index: 3;
	width: 600px;
	height: 500px;
	left: 20%;
	right: 20%;
	top: 25%;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
	background: white;
	opacity: 0;
	visibility: hidden;
	text-align: center;
}
 
JAVASCRIPT:
 
function closepreview ()
{
//document.getElementById('previewback').style.visibility='Hidden';  
document.getElementById('previewback').style.display='none';  
document.getElementById('previewfront').style.visibility='Hidden'; 
document.getElementById('previewback').style.opacity='0';  
document.getElementById('previewfront').style.opacity='0';  
}
function showPreview (imgid)
{
changePreview(imgid);
 
//document.getElementById('previewback').style.visibility='Visible';  
document.getElementById('previewback').style.display='inline';  
document.getElementById('previewfront').style.visibility='Visible'; 
document.getElementById('previewback').style.opacity='.6';  
document.getElementById('previewfront').style.opacity='1';  
}

Any Ideas?

Thanks
Edd

Tags:

Beginners CSS Questions

Thu, 2008-08-21 12:17

thepineapplehead

Offline

Moderator

Last seen: 1 year 5 weeks ago

Timezone: GMT+1

Joined: 2004-06-30

Posts: 9683

Points: 819

Have you got it online

Have you got it online anywhere for us to see it in action?

Verschwindende wrote:

CSS doesn't make pies

Thu, 2008-08-21 13:02

eddjc

Offline

Regular

Last seen: 10 years 46 weeks ago

Timezone: GMT+1

Joined: 2007-07-28

Posts: 33

Points: 16

Hi there, yep -

Hi there,

yep - http://www.edwardcaine.com/blackhair/preview/preview.html

If you click on one of the pictures you'll see what I mean (in default state previewback has a display:none; so white line doesn't show.

Many Thanks

Edd

absolute div 100% causing white line around page

Have you got it online

Hi there, yep -

User login

Navigation