CSS Image Gallery popping out of Content?!?!

sc21
avatar
rank newbie

newbie


Posts: 1
Joined: 2008-07-23

Posted: Wed, 2008-07-23 09:25

I wanna apologize if my title makes no sense at all, as i think one of my main problems is i don't know how to describe this problem at all (and hence cannot find an answer for it Oops! my bad )

^^ so as u can tell, I used the image gallery from Stu at: http://www.cssplay.co.uk/menu/lightbox.html

I imagine something in that css gallery has altered the page containers or the content divs.

html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: Tahoma, Arial, Helvetica, Verdana, Sans-serif;
	font-size: 12px;
	color: #666666;
	background: #666666;
}
a:link { text-decoration: none; color : #006699; border: none;}
a:active { text-decoration: none; color : #006699; border: none;}
a:visited { text-decoration: none; color : #006699; border: none;}
a:hover	{ text-decoration: underline; color : #4192e5; border: none;} 
a:link .image { border: 0px; }
a:hover .image {border: 0px; }
a:active .image {border:0px; }


.hidden {
	display: none;
}


#page-container {
	width: 760px;
	margin: auto;
}
#page-container2{
	width: 400px;
	margin: auto;
}
#menu {
	background: #666666;
	border: 0px; solid: #fff;
	height: 25px;
	margin-top: 20px;
	margin-bottom: 0px;
}
#menu dl { margin: 0; padding: 0; }

/* IE5 Mac Hack \*/ 

#menu {padding-left: 11px; } 
/*/ 
#menu { padding-left: 11px; overflow: hidden; } 	
/* End Hack */
#menu dt { float: right; }

#menu dt a {
	display: block;
	height: 0px !important;
	height /**/:25px; /* IE 5/Win hack */ 
	padding: 25px 0 0 0;
	overflow: hidden;
	background-repeat: no-repeat;
}
#menu dt a:hover {
	background-position: 0 -25px;
}
#menu dt#home,
#menu dt#home a { width: 75px; background-image: url(images/nav/home.png); }

#menu dt#about,
#menu dt#about a { width: 75px; background-image: url(images/nav/about.png); }

#menu dt#design,
#menu dt#design a { width: 75px; background-image: url(images/nav/design.png); }

#menu dt#resume,
#menu dt#resume a { width: 75px; background-image: url(images/nav/resume.png); }

#menu dt#contact,
#menu dt#contact a { width: 75px; background-image: url(images/nav/contact.png); }

#menu dt#blog,
#menu dt#blog a { width: 75px; background-image: url(images/nav/blog.png); }


#header {
	background-image: url('images/tbhome.png');	
	background-repeat: no repeat;
	height: 160px;
}

#content {
	background: #ffffff;
	line-height: 18px;
}
	
#content .padding {
	padding: 25px;
	line-height: 18px;
}

#content h2 {
	margin: 0px;
	padding: 0;
	padding-bottom: 5px;
}

#content p {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
}


#footer {
	clear:both;
	background-image: url('images/footer.png');	
	background-repeat: no repeat;
	height: 25px;
	font-family: Tahoma, Arial, Helvetica, Sans-serif;
	font-size: 10px;
	color: #c9c9c9;
	border-top: 1px solid #efefef;
	padding: 0px 10px 0px 10px;
	line-height: 18px;
	margin-bottom: 10px;
	text-transform: lowercase; 
	
	

}
#footer a {
	color: #c9c9c9;
	text-decoration: none;
}
#footer a:hover {
	color: #db6d16;
}
#footer #footernav {
	width: 610px;
	float: left;
	text-align: left;
}
	
}
h1 {
	margin: 18px;
	padding: 0px;
	font-weight: bold;
	line-height: 19px;
	}
h4 {
	color: #ffffff;
	font-weight: none;
	margin: auto;
	}

that is my style.css right now

and my html/css for the specific page including the stu hoverbox is 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<title>Sam Chan: School of Communication, Simon Fraser University</title>
	<meta http-equiv="Content-Language" content="en-us" />
	
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="MSSmartTagsPreventParsing" content="true" />
	
	<meta name="description" content="A Portfolio of Sam Chan" />
	<meta name="keywords" content="Sam Chan" />
	<meta name="author" content="Sam Chan" />
	<style type="text/css" media="all">@import "style.css";</style>
	<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/lightbox.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* common styling */

a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}

/* slides styling */

.photo {width:635px; text-align:left; position:relative; margin:0 auto;}

.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}

.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}

.photo ul.topic li a ul, 
.photo ul.topic li ul 
{display:none;}

.photo ul.topic li.active a
{color:#000; background:#bbb;}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}

.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #bbb; z-index:1;}

.photo ul.topic li a:hover ul, 
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #aaa; z-index:100;}

.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a:hover ul li a:hover, 
.photo ul.topic li:hover ul li a:hover 
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img, 
.photo ul.topic li:hover ul li a:hover img 
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}
</style>
</head>

<body>

<div id="page-container">
	<div id="menu">		
			<dt id="blog"><a href="http://anothersamchan.com">Blog</a></dt>
			<dt id="contact"><a href="contact.htm">Contact Me</a></dt>
			<dt id="resume"><a href="resume.htm">Resume</a></dt>
			<dt id="design"><a href="design.htm">Design</a></dt>
			<dt id="about"><a href="about.htm">About</a></dt>
			<dt id="home"><a href="index.htm">Home</a></dt>

	</div>
	<div id="header">	
	</div>
	<div id="content">		
		<div class="padding">
<div class="photo">
<ul class="topic">
	<li><a class="set" href="#Wallpapers">Wallpapers<!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="lbox/portrait1.jpg"><img src="http://www.cssplay.co.uk/menu/lbox/portrait1a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/portrait2.jpg"><img src="lbox/portrait2a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/portrait3.jpg"><img src="lbox/portrait3a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/portrait4.jpg"><img src="lbox/portrait4a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/portrait5.jpg"><img src="lbox/portrait5a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/portrait6.jpg"><img src="lbox/portrait6a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/portrait7.jpg"><img src="lbox/portrait7a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/portrait8.jpg"><img src="lbox/portrait8a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/portrait9.jpg"><img src="lbox/portrait9a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/portrait10.jpg"><img src="lbox/portrait10a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/portrait11.jpg"><img src="lbox/portrait11a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/portrait12.jpg"><img src="lbox/portrait12a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/portrait13.jpg"><img src="lbox/portrait13a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/portrait14.jpg"><img src="lbox/portrait14a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/portrait15.jpg"><img src="lbox/portrait15a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/portrait16.jpg"><img src="lbox/portrait16a.jpg" alt="" title="" /></a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>

	<li class="active"><a class="set" href="#Ads">Advertisements<!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="lbox/landscape1.jpg"><img src="http://www.cssplay.co.uk/menu/lbox/landscape1a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape2.jpg"><img src="lbox/landscape2a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape3.jpg"><img src="lbox/landscape3a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape4.jpg"><img src="lbox/landscape4a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape5.jpg"><img src="lbox/landscape5a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape6.jpg"><img src="lbox/landscape6a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape7.jpg"><img src="lbox/landscape7a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape8.jpg"><img src="lbox/landscape8a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape9.jpg"><img src="lbox/landscape9a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape10.jpg"><img src="lbox/landscape10a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape11.jpg"><img src="lbox/landscape11a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape12.jpg"><img src="lbox/landscape12a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape13.jpg"><img src="lbox/landscape13a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape14.jpg"><img src="lbox/landscape14a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape15.jpg"><img src="lbox/landscape15a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape16.jpg"><img src="lbox/landscape16a.jpg" alt="" title="" /></a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a class="set" href="#Pictures">Pictures<!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#flower1"><img src="http://www.cssplay.co.uk/menu/lbox/flower1.jpg" alt="" title="" /></a></li>
			<li><a href="#flower2"><img src="lbox/flower2.jpg" alt="" title="" /></a></li>
			<li><a href="#flower3"><img src="lbox/flower3.jpg" alt="" title="" /></a></li>
			<li><a href="#flower4"><img src="lbox/flower4.jpg" alt="" title="" /></a></li>
			<li><a href="#flower5"><img src="lbox/flower5.jpg" alt="" title="" /></a></li>
			<li><a href="#flower6"><img src="lbox/flower6.jpg" alt="" title="" /></a></li>
			<li><a href="#flower7"><img src="lbox/flower7.jpg" alt="" title="" /></a></li>
			<li><a href="#flower8"><img src="lbox/flower8.jpg" alt="" title="" /></a></li>
			<li><a href="#flower9"><img src="lbox/flower9.jpg" alt="" title="" /></a></li>
			<li><a href="#flower10"><img src="lbox/flower10.jpg" alt="" title="" /></a></li>
			<li><a href="#flower11"><img src="lbox/flower11.jpg" alt="" title="" /></a></li>
			<li><a href="#flower12"><img src="lbox/flower12.jpg" alt="" title="" /></a></li>
			<li><a href="#flower13"><img src="lbox/flower13.jpg" alt="" title="" /></a></li>
			<li><a href="#flower14"><img src="lbox/flower14.jpg" alt="" title="" /></a></li>
			<li><a href="#flower15"><img src="lbox/flower15.jpg" alt="" title="" /></a></li>
			<li><a href="#flower16"><img src="lbox/flower16.jpg" alt="" title="" /></a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->

	</li>
	<li><a class="set" href="#gfx">Other Graphics<!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#tree1"><img src="http://www.cssplay.co.uk/menu/lbox/tree1.jpg" alt="" title="" /></a></li>
			<li><a href="#tree1"><img src="lbox/tree2.jpg" alt="" title="" /></a></li>
			<li><a href="#tree1"><img src="lbox/tree3.jpg" alt="" title="" /></a></li>
			<li><a href="#tree1"><img src="lbox/tree4.jpg" alt="" title="" /></a></li>
			<li><a href="#tree1"><img src="lbox/tree5.jpg" alt="" title="" /></a></li>
			<li><a href="#tree1"><img src="lbox/tree6.jpg" alt="" title="" /></a></li>
			<li><a href="#tree1"><img src="lbox/tree7.jpg" alt="" title="" /></a></li>
			<li><a href="#tree1"><img src="lbox/tree8.jpg" alt="" title="" /></a></li>
			<li><a href="#tree1"><img src="lbox/tree9.jpg" alt="" title="" /></a></li>
			<li><a href="#tree1"><img src="lbox/tree10.jpg" alt="" title="" /></a></li>
			<li><a href="#tree1"><img src="lbox/tree11.jpg" alt="" title="" /></a></li>
			<li><a href="#tree1"><img src="lbox/tree12.jpg" alt="" title="" /></a></li>
			<li><a href="#tree1"><img src="lbox/tree13.jpg" alt="" title="" /></a></li>
			<li><a href="#tree1"><img src="lbox/tree14.jpg" alt="" title="" /></a></li>
			<li><a href="#tree1"><img src="lbox/tree15.jpg" alt="" title="" /></a></li>
			<li><a href="#tree1"><img src="lbox/tree16.jpg" alt="" title="" /></a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
</ul>
<br class="clear" />
</div>
		</div>
	</div>
	
	<div id="footer">	
		<div id="footernav">
		<a href="index.htm">Home</a> - 
		<a href="about.htm">About</a> - 
		<div class="hidden"><a href="design.htm">Design</a> - </div>
		<a href="resume.htm">Resume</a> - 
		<a href="contact.htm">Contact</a> - 
		<a href="http://anothersamchan.com">Blog</a>
		</div>Copyright &copy; 2008 Sam Chan
	</div>

</div>

</body>
</html>

I have a feeling it has something to do with floats or containers or positioning but I really have no idea. Hopefully you guys can shed some light. Thanks a lot!

<a href="http://anothersamchan.com">Aw man, ANOTHER SAM CHAN?</a>

David Laakso
David Laakso's picture
rank Enthusiast

Enthusiast


Posts: 248
Joined: 2008-07-18
Location: US

Put it on a public server

Posted: Wed, 2008-07-23 11:49

Put it on a public server and provide a clickable link to it in your post to the forum.

"Aw man, ANOTHER SAM CHAN?"

Nah,just...
SOME YOUNG GUY

wolfcry911
wolfcry911's picture
rank Guru

Guru


Posts: 2734
Joined: 2004-09-01
Location: MA, USA

you removed the height from

Posted: Wed, 2008-07-23 13:13

you removed the height from .photo

the nested uls are absolutely positioned, removing them from the document flow so you need to account for their height.