Image Gallery - other links no longer work

[Deryn]

1) Script Title: CSS Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...e-gallery/P60/

3) Describe problem:

Everything works wonderfully except the .gallerycontainer causes my links to not work. Can anyone help me fix it? I cannot currently show you the site as the domain is in the process of being registered, etc, but could put up the css and html if needed.

Thanks for any ideas.

Deryn

[jscheuer1]

Yes, we need to see it to fix it.

[Deryn]

Thanks, John. I have figured what is causing the problem but don't know how to fix it. The designer has text in the middle with images along the left side and along the bottom. I have a div (#container) that is wrapped around it all, including the .gallerycontainer div. If I move the .gallerycontainer div outside it works, but them my images all drop to the bottom of the page.

Here is the css and html:

* {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
}

@font-face {  
  font-family: "MyriadPro-Light";  
  src: url( /MyriadPro-Light.eot ); /* IE */  
  src: local("MyriadPro-Light"), url(MyriadPro-Light.ttf ) format("truetype"); /* non-IE */  
}  

/*HelveticaNeue-Light*/


body {
	background: #000000;
	margin: 0;
	font-family: "MyriadPro-Light", Arial, Helvetica, sans-serif;
	color: #efe9e4;
}


#container {
	width: 1000px;
	position: relative;
	float: none;
	background-color: #000000;
	z-index: 1;
	margin-bottom: 50px;
	margin-top: 0;
	margin-right: auto;
	margin-left: 20px;	
}
		
#language {
	margin-bottom:0px;
	margin-left:25px;
	margin-top: 20px;
	}

#intro {
	position: relative;
	padding-top: 70px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 1000px;
}

#pageHeader {
	width:772px;
	height:77px;
	background:transparent url(images/chasaduina.jpg);
	background-repeat: no-repeat;
	position:absolute;
	top: -20px;
	left: 330px;
	width: 559px;
}

		#pageHeader h1 span {
			display:none
		}

		#pageHeader {
			padding-top: 20px;
		}

#firstPara {
	color: #fff;
	margin-left: 210px;
	margin-top: 0px;
	height: 100%;
	font-family: "MyriadPro-Light", Arial, Helvetica, sans-serif;
	font-size: 11pt;
	font-weight: normal;
	font-variant: normal;
	padding-top: 10px;
	padding-right: 30px;
	padding-bottom: 0px;
	padding-left: 15px;
}

		#firstPara p {
			padding-left: 30px;
		}


#rates {
	color: #efe9e4;
	margin-left: 255px;
	font-family: "MyriadPro-Light", Arial, Helvetica, sans-serif;
	font-size: 14pt;
	position: relative;
	height: 100%;
	width: 680px;
	padding-top: 0px;
	padding-right: 35px;
	padding-bottom: 30px;
	padding-left: 0px;
	background-image: url(images/box.jpg);
	background-repeat: repeat;
}


#tariffs {
	width: 250px;
	float: left;
	color: #000000;
}
	
		#tariffs .p1 {
			margin-top: 10px;
			margin-left: 10px;
			font-size: 14pt;
		}
		
#season {
	margin-left: 260px;
	padding-top: 11px;
	width: 200px;
}
		
		#season .p1 {
			font-size: 14pt;
		}
		
#price {
	margin-left: 336px;
	margin-top: -100px; /*-100px*/
	width: 200px;
	float: right;
}
	
		#price .p1 {
			font-size: 14pt;
		}

#note {
	position: fixed;
	margin-bottom: 0px;
	padding-left: 10px;
	width: 745px;
	color: #000000;
}

		#note .p1 {
			font-size: 11pt;
		}


#footer {
	width: 720px;
	padding-top: 10px;
	padding-left: 253px;
	background-color: transparent;
}
		
		#footer a, #footer a:link, #footer a:visited {
			color: #a67c52;
			padding: 0 6px;
		}


/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
position: absolute;
left: 25px;
top: 70px;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px #c69d6f;
}

.thumbnail span{ /*CSS for enlarged image*/
	position: absolute;
	background-color: black;
	padding: 5px;
	left: -1000px; /* -1000px*/
	border: 1px dashed #c69d6f;
	visibility: hidden;
	color: white;
	text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 280px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

a:link {color: #a67c52; text-decoration: underline; }
a:visited {color: #a67c52; text-decoration: underline; }
a:hover {color: #a67c52; text-decoration: none; }
a:active {color: #a67c52; text-decoration: underline; }

<!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" />
	<style type="text/css" title="currentStyle" media="screen">
		@import "chasaduina.css";
	</style>
<title>Chasa d'Uina</title>
</head>

<body>
<div id="container">
            <div id="language"><a href="index-g.html"><img src="images/deutschenglish.jpg" alt="Deutsch/English" /></a></div>
  <div id="intro">
	<div id="pageHeader">
	  <h1><span>Chasa d'Uina</span></h1>
		</div>

		<div class="p1" id="firstPara">
			<p class="p1"><span>Chasa d’ Uina is situated in the idyllic alpine village of Sent, just above Scuol in the lower Engadin region of 
Switzerland - Heidiland! The comfy flat has two bedrooms (4 beds), a bathroom with shower and a living/dining
with cosy open fire place and views across to the Engadin mountain ranges. The kitchen has a dishwasher, 
the flat is equipped with TV and DVD and wireless internet.  A well protected courtyard invites you to linger.</span></p>
			<p class="p2">In the cellar lies the communal laundry and ski room. In winter, Sent is on what is known as the “dream piste”, 
			  a direct run from the ski region of Scuol, Motta Naluns. In the morning, the skibus leaves 100 meters from 
			  the house to take you to the base station or the hot thermal baths.</p>
		  <p class="p3"><span>For the huge winter and summer tourist offering, click on <a href="http://www.scuol.ch">www.scuol.ch</a></span></p>
		  <p class="p2"><span>How to get to us by plane, train or car, click:  <a href="http://www.scuol.ch/de/page.cfm/Reisehinweise">www.scuol.ch/de/page.cfm/Reisehinweise</a></span></p>
		  <p class="p3"><span>To find Sent and Chasa d’Uina with <a href="map.html">Google Maps</a></span></p>
	</div>
  </div>

<div id="rates">
		<div id="tariffs">
			<p class="p1"><span>Our Tariffs are as follows:</span></p>
		</div>

		<div id="season">
				<p class="p1"><span>High Season:</span></p>
				<p class="p1"><span>Season:</span></p>
        	    <p class="p1"><span>Low season:</span></p>
	  </div>

	  <div id="price">
				<p class="p1"><span>Fr.980.- per week</span></p>
				<p class="p1"><span>Fr.835.- per week</span></p>
        	    <p class="p1"><span>Fr.620.- per week</span></p>                
	  </div>

  	  <div id="note">
			<p class="p1"><span>All prices are inclusive of linen, cleaning and electricity, you need to pay the tourist taxes and bring your towels.</span></p>
	  </div>
  </div>
	   <div id="footer">
			<p align="center" class="p1">For further information or to make a booking, please contact us via email</p>
			<p align="center" class="p2"><span><a href="mailto:a.zangger@bigpond.com">a.zangger@bigpond.com</a></span></p>
  </div>        
<br />
  <br /><br /><br />
<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><img src="images/pic-1.jpg" width="179px" height="207px" border="0" /><span><img src="images/pic-1-big.jpg" /><br />The House</span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="images/pic-2.jpg" width="179px" height="142px" border="0" /><span><img src="images/pic-2-big.jpg" /><br />Wildlife</span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="images/pic-3.jpg" width="179px" height="142px" border="0" /><span><img src="images/pic-3-big.jpg" /><br />The Lounge</span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="images/pic-4.jpg" width="179px" height="142px" border="0" /><span><img src="images/pic-4-big.jpg" /><br />Bedroom</span></a>
<a class="thumbnail" href="#thumb"><img src="images/pic-5.jpg" width="179px" height="142px" border="0" /><span><img src="images/pic-5-big.jpg" /><br />
Front Door</span></a>
<a class="thumbnail" href="#thumb"><img src="images/pic-6.jpg" width="179px" height="142px" class="thumbnail" /><span><img src="images/pic-6-big.jpg" /><br />
 Kitchen</span></a>
<a class="thumbnail" href="#thumb"><img src="images/pic-7.jpg" width="179px" height="142px" border="0" /><span><img src="images/pic-7-big.jpg" /><br />Views</span></a>
<a class="thumbnail" href="#thumb"><img src="images/pic-8.jpg" width="179px" height="142px" border="0" /><span><img src="images/pic-8-big.jpg" /><br />Laundry</span></a></div>
</div>
</body>
</html>

[jscheuer1]

From your description of the issue it sounds like it may involve z-index.

However, when I said:

Yes, we need to see it to fix it

I meant literally see. Since there are images for sure (and perhaps other resources) required by your code that I cannot see or easily imagine, it is still just a guessing game as far as I'm concerned. Put up a demo of this issue (it need not be as complex as your posted code, but can be) somewhere live on the web and post a link here to it. Make sure to tell us what we need to do and in which browser(s) to observer the issue.

[Deryn]

Okay. I have uploaded to a temporary place.

http://www.doctorhospitality.com.au/...a/index-e.html

The only thing that is not working are the links. The first link, the brown button in the top left-hand corner that switches between German and English, is working but the rest are not. They are brown and underlined. I have tried in Safari and in Firefox, and am in the process of downloading a newer version of Explorer.

Thanks for your patience.

[jscheuer1]

Add this to the beginning of your stylesheet:

a {
	position: relative;
	z-index: 100;
}
a.thumbnail {
	position: static;
}

[Deryn]

You're a genius. Thanks so much.

[Deryn]

I had to change the z-index to 49, because at 100, the links were showing through the images on mouseover. And I learned something new. I didn't really know anything about z-index before. Thanks again.