Hey all,

 

I'm having problems with a menu bar on a site I'm working on. For some reason on a certain page I am unable to click on the menu name to get to the corresponding page. I have click above the writing for it to work.

 

Here's a link to the page it does it on:

 

http://xratedsounds.com/mixes.html

 

It seems to behave the way it should do on the other pages.

 

Here's the html the page that I'm having the problems with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>X-rated Sounds</title>

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

</head>

<body>



<div id="main_page">

<div id="top">

	<div id="logo">

		<div id="banner">

			<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 

			codebase="http://download.macromedia.com/pub/shockwave/
			cabs/flash/swflash.cab#version=6,0,40,0" 

			width="449" height="80" 
			 id="mymoviename"> 

			<param name="movie"  

			value="animation/banner.swf" /> 

			<param name="quality" value="high" /> 

			<param name="bgcolor" value="#ffffff" /> 

			<embed src="animation/banner.swf" quality="high" bgcolor="#ffffff"

			width="449" height="80" 

			name="mymoviename" align="" type="application/x-shockwave-flash" 

			pluginspage="http://www.macromedia.com/go/getflashplayer"> 


			</embed> 

			</object>



		</div>


	</div>

		<div id="nav">

			<ul>
				<li><a href="index.html">	<img src="images/home.png"/>			</a></li>
				<li><a href="images.html">	<img src="images/images.png"/>					</a></li>	
				<li><a href="projects.html">	<img src="images/projects.png"/>	</a></li>

				<li><a href="links.html">	<img src="images/links.png"/>			</a></li>
			</ul>


		</div>


</div>

	<div id="content">

		<div id="mid_con_pro">

			<div id="over">

		<div align="center"><embed src="http://www.datpiff.com/embed/mixtape/m469d094/" quality="high" wmode="transparent" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="470" height="221" allowScriptAccess="always" allowScripting="on"><br><a href="http://www.datpiff.com/Safe-D_DJC_PanCake_Giddy_Grims_Professor_Agg.m71342.html" target="_blank">Download Mixtape</a> | Provided by <a href="http://www.datpiff.com" target="_blank">DatPiff.com</a></div>


			</div>
		</div>



	</div>

		<div id="bottom">


		</div>











</div>






</body>
</html>

 

 

And css:

html,body{
 margin:0;
 padding:0;
 font-family:arial, verdana, sans-serif;
 background-color:#000000;
 height:100%;

 background-repeat: no-repeat;

}

a:link,a:visited {
text-decoration:none;
color:#ffffff;
}

a img { border: none; }

a {
outline:none;
}

#main_page {
width:846px;
height:900px;
margin-right: auto;
 	margin-left: auto; 
 	min-height:100%;
 	position:relative;
 	background-image: url(images/logos.png);

}


#top {
width:846px;
height:248px;
margin-right: auto;
 	margin-left: auto; 
 	position:relative;	


}

#logo {
width:600px;
height:170px;
margin-right: auto;
 	margin-left: auto; 
 	position:relative;	
}

#banner {
width:450px;
height:81px;
margin:auto;
position:relative;	
background-color:#003000;
top: 100px;
}

#nav {
width:600px;
height:77px;
margin-right: auto;
 	margin-left: auto; 
 	position:relative;	
top: 40px;
}

#content {
width:600px;
height:461px;
margin-right: auto;
 	margin-left: auto; 
 	position:relative;	

}

#mid_con {
width:410px;
height:350px;
margin-right: auto;
 	margin-left: auto; 
 	position:relative;	
top: 70px;
left: 30px;
font-color: #FFFFFF;
overflo: scroll;

}



#mid_con_pro {
width:410px;
height:350px;
margin-right: auto;
 	margin-left: auto; 
 	position:relative;	
top: 70px;
right: 30px;
font-color: #FFFFFF;
overflo: scroll;
top: 135px;
}


p {

color: #ffffff;
}

h3 {

color: #ffffff;
font-color: #FFFFFF;
}

#nav a {
 	float:left;
 	margin:0;
   padding:0 0 0 0px;
   text-decoration:none;
 }

#nav {

 /*	width: 547px;
  height: 35px;*/
 left: 65px;

 bottom: 1px;
 position: relative;
}

#nav li {
 display:inline;
 margin:0;
 padding:0;
 }

#left  {
left: 22px;

}

 

Thanks again!

I'm not sure why it's doing it, my best solution would be to overwrite index.html and just paste in the information that you had in <div id="over"> from the mixes.html file

If you use the firebug extension and inspect the elements, on that page the content div is overlapping those images

Hey, thanks for the help that solved my problem and awesome app aswell!

 

Cheers