Another menu gone awol

HTML & CSS
1

Hi,

I just put a thread up about another of my websites where the menu cant be seen. Strangely enough another of my websites is lacking its menu. There should be a purple box menu running down the left hand side of the index page at this addresss:

www.louandelcats.co.uk

I think this maybe a css problem:

The css is as follows:

/* CSS Document */
/* WebSite: CSS
-----------------------------------Possible selectors and elements------------------------------
body,
 h1, h2, h3,h4,h5,h6
 p
 div
 a
 background, border, caption, content, cursor, font, img, color, margin, list, padding, page, page-break,
 position, quotes, table layout, text-align, text-decoration, text-indent, text shadow, vertical-align, white space, word spacing, text height etc, z-index

 -----------------------------Page Rules------------------------------------------------------
 determine site styles first; Determine site positioning basics for each page and use float to place in page (i.e. wrapper; banner; nav; seondary nav; breadcrumbs; main content; footer
 -----------------------------------------
 */
 body{margin:0; padding:0;}

 /*-----------------------------------------Basic Structure----------------------------------------*/

#wrapper{width:964px; margin-left:15px; margin-top:15px; }/*ND*/
#banner{display:inline; float:left; width:964px;  }/*ND*/
#menu{ float:left; width:150px; background-color:#8080c0; z-index:13; }/*ND*/
#ccbox{
	position:absolute;
	width:200px;
	height:100px;
	left: 785px;
	top: 4px;/*cat chat box on banner*/
}/*ND*/
#marklogo{
	position:absolute;
	width:126px;
	height:61px;
	left: 20px;
	top: 535px;/*markets2000 logo */
}
#adbreak{float:left; width:125px; height:250px;  margin-top:50px; padding-left:10px; padding-right:10px;  }/*ND google ad on 2chalk2*/
#mainarea{float:left; width:810px; background-color:#ffffff;   padding-bottom:0px;}
/* class mainarea see diary pages */
#contentind{float:left;  width:660px;}/*ND*/
#contentbox{float:left; width:660px;}/*ND*/
.contentbox{float:left; width:600px; background-color:#999999; height:120px; z-index:2; padding-left:60px; padding-top:10px; }/*ND*/
#columntwo{float:left; width:150px; background-color:#8080c0; padding-top:30px; padding-bottom:15px;}/*ND*/
#footer{clear:left; width:810px; border-color:#CCCCCC ;  border-style:solid; border-width:thin; background-color:#FFFFFF; }/*ND*/
#sig{
	position:absolute;
	width:80px;
	height:30px;
	left: 614px;
	top: 208px;
	z-index:3;
}/*ND*/

 p{font-family:"Times New Roman", Times, serif; font-size:12px;padding-top:0px; padding-right:0px;  padding-left:0px;}
 .facts4{font-family: "Times New Roman", Times, serif; font-size:18px; padding-right:0px;  padding-left:0px; }

a.thirdcol:link{color:#FFFFFF; text-decoration:none;}
a.thirdcol:visited{color:#FFFFFF; text-decoration:none;}
a.thirdcol:hover{color:#00FF00; text-decoration:none;}/*these three links for third colomn*/




/*---------------------------------------End of Basic Structure------------------------------*/

/*----------------------------------------Fonts,etc-------------------------------------------*/

h1{font:"Times New Roman", Times, serif; color:#666666; }
h1.comic{font:"Comic Sans MS"; color:#FF3333;}/*articlerules*/
h2{font:"Times New Roman", Times, serif; color:#666666; }
.red{color:#CC3333;}
h3{font:"Times New Roman", Times, serif; color:#000000;}
.blue{color:#0099CC;}
h4{font:"Times New Roman", Times, serif; color:#000000;}
h4.alert{display:block; background-color: #FF6600; color:#FFFFFF }


a:link{color:#0099FF; text-decoration: underline}
a:visited{color:#0099ff; text-decoration:underline;}
a:hover{color:#00CC33; text-decoration:underline}

/*--------------------------------------Positioning for articles------------------------------*/

#contactSoon{width:300px; height:300px; border:thin #0099CC  inset; background-color: #99FFCC; margin-top:100px; margin-left:300px;}
.contentbox3{float:left; width:580px; margin:20px;}/*articlerules*/
#Layer1{
	position:absolute;
	width:150px;
	height:149px;
	z-index:1;
	left: 545px;
	top: 422px;
}
#adbreak2{float:left; width:125px; height:850px;  margin-top:15px;  }/*ND picture on article form*/

/*-----------------------------------------catcare--------------------------------------------*/
#headline1{float:left;width:405px; padding-left:20px; padding-right:15px; padding-bottom:15px;}
#headline2{float:left;width:405px; padding-left:20px; padding-right:15px;}
#headline3{float:left;width:605px; padding-left:20px; padding-right:15px; padding-bottom:15px;}
.banner{float:left;width:640px; margin-bottom:15px; }
#mainbody{float:left; width:655px;}
#halfbody{float:left; width:320px; padding-top:20px; padding-left:20px;}
.index{float:left; width:320px;  padding-left:10px; padding-right:10px;}
.index1{width:600px; font-size:14px; color:#666666;padding-top:15px; padding-left:10px; padding-right:10px; padding-bottom:40px; margin:0px;} /*ND*/
.index2{width:600px; font-size:16px; color:#666666;padding-top:15px; padding-left:10px; padding-right:10px; padding-bottom:40px; margin:0px;} /*ND*/
.halfbody2{float:right;width:270px; margin-top:130px; padding-left:12px;}
#halforigin{float:left; width:315px;  padding-right:20px;}
#biggerspot{
	position: absolute;
	width:172px;
	left: 647px;
	top: 87px;
	z-index:100;
}
#callink{
	position:absolute;
	width:120px;
	height:120px;
	left: 679px;
	top: 112px;
}
#spotex{float:left; width:293px;  margin-top:20px; margin-left:10px; border:thin #6699FF solid; z-index:9;}/*index*/
#indbanner{float:left; width:270px;}
#half{float:left;  width:310px; margin-left:10px;}/*ND*/
#dataped{
	position:absolute;
	width:85px;
	height:88px;
	left:742px;
	top:422px;
}
#newindex{float:left; width:580px; margin-top:10px; margin-left:10px; padding-left:70px;}
#news{
	float:left;
	width:145px;
	border-color: #cccccc;
	border-style:solid;
	border-width:thin;
	left: 761px;
	top: 272px;
	height: 120px;
	background-color: #AAFFAA;
	height:250px;
	padding-top:10px;
}/*ND World cat news box*/
#sidepanel{float:right;width:125px; height:300px; margin-right:15px; margin-top:10px;}/*cat reading index */
/*-----------------------------------------Testsitephp/cms for Louandel---------------------------*/
.articles{float:left; height:900px; width:250px; border:#999999 thin dashed;}
.form{float:left; width:600px; }
ul{width:200px;}
li{width:200px;}
/*-------------------------------------------staffarea-------------------------------------------*/
#wrapper1{float:left; padding-left:30px; width:1000px;}
#staffbanner{float:left; width:1000px; height:150px; padding-top:30px; padding-left:20px; margin-bottom:15px; background:#99CC99; }
#staffmain{float:left; width:990px;  }

h1{font:"Times New Roman", Times, serif; color:#FFFFFF;}
.log{color:#666666;}
h4{font-family:Arial, Helvetica, sans-serif; color:#FF0000;}
p.message{color:#993333; font-size:20px;}
.pages{float:left;  padding-bottom:3px; padding-top:3px; margin:5px; background:#CCCCCC; width:300px; border: thin groove #009900;}
h3.left{padding-left:25px;}
.staffpage{background:#cccccc; width:600px; border:#006633 thick groove;}
/*------------------forms text types------------*/
h1.tit{color:#FF0000;}
.tits{ color:#666666;}
p.index{font-size:14px; color:#666666; padding-top:15px; padding-left:10px; padding-right:10px; padding-bottom:50px;}/*ND*/

And the html is as follows:

<?php require_once("connect/connection.php");
include("includes/functions.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home</title>



<script type="text/javascript" language="JavaScript1.2" src="menu.js"></script>
<style type="text/css">
<!--
.style3 {
	font-size: 12px;
	color: #000000;
}
.style4 {color: #FF0000}
.style5 {color: #008000}
.style6 {color: #808080}
-->
</style>
<link href="articles/content1.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#Layer2 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:4;
	left: 776px;
	top: 831px;
}
-->
</style>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-18301581-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head>

<body background="images/catchatstuff/orangeback.jpg" >
<div id="wrapper">
<div id="banner"><img src="images/catchatstuff/newbanner2.gif" align="left" alt="banner index" width="964" height="80" border="2" /></div>
<div id="ccbox"><img src="images/catchatstuff/catchatlogo3.gif" width="200" height="100" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="12,9,187,93" href="phpbb/index.php" />
</map></div>
<div id="menu"><?php require("includes/addmenu.js");?></div> <div align="center" >

    <p ><script src="http://services.newsgator.com/ngws/headlines.aspx?uid=1118043&mid=6"></script></p>
</div>
<div id="marklogo"><a href="http://www.markets2000.co.uk"><img src="images/catchatstuff/design graphic.gif" alt="web site design by markets2000" width="127" height="60" border="0" usemap="#Map11" /></a>
<map name="Map11" id="Map11"><area shape="rect" coords="13,7,116,54" href="http://www.markets2000.co.uk" />
</map></div>
<div id="dataped"><img src="images/catchatstuff/pedhigh.gif" alt="This months highlight"  /></div>

<div id="mainarea">

<div id="contentind">
    <div id="contentbox"><?php  tablerows(" ","intro", "4");?><div id="sig"><img src="images/catchatstuff/sig1.gif" alt="Louandel web master " width="135" height="43" /></div>
 </div><!--contentbox-->

<div class="contentbox">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="508" height="100">
    <param name="movie" value="images/catchatstuff/newflash.swf" />
    <param name="quality" value="high" />
    <embed src="images/catchatstuff/newflash.swf" width="508" height="100" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
  </object>
</div><!--flash-->

<div id="half">
<div id="spotex"><img src="images/articleimage/streetcat.jpg" alt="Cat Care" width="293 height="42" style="float:right" />
  <?php  tablerows("topleft_tit","topleft_cont","4");?>
  <div id="Layer2"><img src="images/catchatstuff/lilel1.gif" width="141" height="93" /></div>
</div>
<div id="spotex"><img src="images/articleimage/catcare1.jpg" /><?php tablerows("botleft_tit","botleft_cont","4");
 ?>
</div>
</div>
<div id="half">
<div id="spotex"><?php tablerows("topright_tit","topright_cont", "4");
 ?></div>
<div id="spotex"><img src="images/articleimage/catandlap1.jpg" /><?php tablerows("botright_tit","botright_cont","4");?></div>
 </div>
<div id="newindex"><img src="images/articleimage/articleask.gif" alt="Send in your own articles" width="480" height="90" border="0" usemap="#Map2" />
  <map name="Map2" id="Map2">
    <area shape="rect" coords="54,15,443,76" href="articles/articleRules.php" alt="Article rules" />
  </map>
  </div>
</div> <!-- contentind -->
<?php require("includes/index_footer.php");

I am aware there are function scripts involved her but i dont think they have anything to do with the problem but let me know if you wnat me to put them up

thanks for your help

2

Where is the ‘purple box’ in the code? If it’s in the HTML of your site, it’s probably a CSS issue, but if it’s not in the HTML, it’s prolly a PH issue. Is it in the HTML of your site? (I don’t know what to look for.)

3

This is the code (in the html) for the menu:

<div id=“menu”><?php require(“includes/addmenu.js”);?></div>

4

Ah, OK. Thanks.

Well, sweet Jesus, look at the code that include pulls in:

<div id="menu">

[COLOR="#FF0000"]<script type="text/javascript" language="JavaScript1.2">BuildLayer('v','','','','250','250','','','','0','20','1px Solid #ACA899','1px Solid #ACA899','1px Solid #ACA899','1px Solid #ACA899','left','#8080C0','','1','1','','Filter:progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.5) progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.5)','1','#C0C0C0','6','Default','Pointer','','100','0','#FFFFFF')
SwapDiv('wme1','','Home','blank.gif','blank.gif','0','0','blank.gif','blank.gif','0','0','18','40','Comic Sans MS','Comic Sans MS','20px','20px','normal','normal','#FFFFFF','#80FF00','normal','normal','none','none','#8080C0','#8080C0','blank.gif','blank.gif','1','1','1','1','0px Solid #FFFFFF','0px Solid #FFFFFF','0px Solid #FFFFFF','0px Solid #FFFFFF','0px Solid #3A4057','0px Solid #3A4057','0px Solid #3A4057','0px Solid #3A4057','middle','left','http://www.louandelcats.co.uk/index.html','Where the cat bowl is','','_self','','','0','blank.gif','blank.gif','auto','auto','0','0','0')
SwapDiv('wme4','wme1','Cat Chat!',_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,'http://www.louandelcats.co.uk/phpbb/index.php','The cat Lovers meeting place',_,_,_,_,'0',_,_,_,_,_,_,_)
SwapDiv('wme5','wme1','Louie<br/> and<br/> Ellie',_,_,_,_,'arrow.gif','arrow.gif','7','7',_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,'','The trials and tribulations of lou and el',_,_,_,_,'0',_,_,_,_,_,_,_)
FreeLayer('wme7','','5','v','5','-2','0','13','1px Solid #ACA899','1px Solid #ACA899','1px Solid #ACA899','1px Solid #ACA899','#8080C0','','1','1','','Filter:none(Duration=0.5)','1','#C0C0C0','6','100')
SwapDiv('wme6','wme1','Chalk and Cheese',_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,'http://www.louandelcats.co.uk/2chalk2.html','Two very different cats....',_,_,_,_,'0',_,_,_,_,_,_,_)
SwapDiv('wme8','wme1','Diary',_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,'http://www.louandelcats.co.uk/2diarytemp2.html','From kitten to monster...',_,_,_,_,'0',_,_,_,_,_,_,_)
SwapDiv('wme9','wme1','Roots',_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,'http://www.louandelcats.co.uk/2rootsA2.html','Where it all began',_,_,_,_,'0',_,_,_,_,_,_,_)
InitDiv();
SwapDiv('wme10','wme1','Global<br/> Cats',_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,'http://www.louandelcats.co.uk/2glob2.html','Share your cat weith us',_,_,_,_,'0',_,_,_,_,_,_,_)
SwapDiv('wme11','wme1','Fact Vault',_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,'http://www.louandelcats.co.uk/2archive2.html','a little midnight reading...',_,_,_,_,'0',_,_,_,_,_,_,_)
SwapDiv('wme12','wme1','Links',_,_,_,_,_,_,_,_,_,'87',_,_,_,_,_,_,_,'#00FF00',_,_,_,_,_,_,_,_,_,_,_,_,'1px None #8080C0','1px None #8080C0','1px None #8080C0','1px None #8080C0','1px None #3A4057','1px None #3A4057','1px None #3A4057','1px None #3A4057',_,_,'http://www.louandelcats.co.uk/2links22.html','Useful cat sites',_,_,_,_,'0',_,_,_,_,_,_,_)
HideDiv();
</script>[/COLOR]


</div>

What’s actually in the addmenu.js file?

5

What’s actually in the addmenu.js file?

not sure what you mean here. the addmenu.js file is exactly the same as what has been pulled on to the page.

so its on the server. Its being drawn onto the page. surely it must be Css that is stopping it getting seen. maube the divs (sorry really badly written)

but id menu is:

#menu{ float:left; width:150px; background-color:#8080c0; z-index:13; }/ND/

any ideas?

6

Somewhere in there you’ve got

script {display: none;}

so I guess you could override it with

script {display: block;}

but I don’t think it will get you far. Really, this is not a good way to use JS at all. That menu is totally inaccessible. Is there any reason it’s done with JS at all?

7

It may have something to do with the menu.js file not being found. Check that it has been uploaded to the location declared in the src attribute of the script element below.

<script type="text/javascript" language="JavaScript1.2" src="menu.js"></script>

As Ralph says, relying upon javascript to render a menu is not ideal.

8

When I add in the display code above, the menu shows, but just as JS code, not as a menu.

9

The strange thing is I have found that locally this page shows fine. could it be to do with the path on the remote server to includes/addmenu.js?

10

No. That file is being found. It’s the menu.js file that’s missing, and it’s almost certainly required for the menu to work.

11

Thats it! It was the menu.js file. It wasn’t on the remote server. this all started with my hosts having to move my files from one database to another because of a virus. they obviously failed to move all of the files.

Thanks to everyone for their precious advice,