CSS - Javascript Pop-up Menu Appearing Behind Divs

Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF.

Here's the site in Question: http://www.winchps.vic.edu.au

It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6.

Here's the CSS code for the basic layout:

Code:

body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}

#header {
width: 802px;
}

#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}

#content {
padding: 0px;
margin: 0px;
}

#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}

#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}

#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}

#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc).

Anyone got any ideas?

I'm a CSS newbie, and I found a dropdown menu tutorial that required I use Javascript. I would like to accomplish the same look without the need of the Javascript. I don't know how to do it.

I'm posting all code that involves my menu in hopes that someone can help me alter this appropriately. Thanks!

The following are in the Head:

Code:

/* Menu */
#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	width: 16em;
	text-decoration: none;
	font: 23px Georgia, "Times New Roman", Times, serif;
	color: #C0C0C0;
}

#nav li { /* all list items */
	float: left;
	width: 16em; /* width needed for Opera */
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: grey;
	width: 16em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
} 

Code:

<script type="text/javascript"><!--//--><![CDATA[//><!--
#sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

The following is in the Body:

Code:

<ul id="nav">
			
				<li><a href="%LINK%">Front Page</a></li>
				<li><a href="%LINK%">Who We Are</a></li>
	<li><a href="%LINK%">Where Are We</a>
		<ul>
			<li><a href="%LINK%">Europe</a></li>
			<li><a href="%LINK%">North America</a></li>
			<li><a href="%LINK%">Rest of the World</a></li>
		</ul>
	</li>

	<li><a href="%LINK%">Clients</a>
		<ul>
			<li><a href="%LINK%">Client 1</a></li>
			<li><a href="%LINK%">Client 2</a></li>
			<li><a href="%LINK%">Client 3</a></li>
			<li><a href="%LINK%">Client 4</a></li>
			<li><a href="%LINK%">Client 5</a></li>
			<li><a href="%LINK%">Client 6</a></li>
		</ul>
	</li>
                <li><a href="%LINK%">Links</a></li>
				<li><a href="%LINK%">Exit</a></li>

Thanks for taking the time to read my question.

I have a <div id="theheader"> area at the top of my page. Below that I have another <div id="contentbox"> area to which I have applied a negative margin. It displays perfectly in Fire Fox (as you would expect) but in IE the <div id="contentbox"> with the negative margin slips behind the top <div id="theheader">.

How can I get the page to display in both browsers the way FF does.?

Thanks,

Brad

CSS
Code:

@charset "iso-8859-1";

body {
background-color: #435371;
margin: 0px;
}

#theheader {
width: 100%;
height: 150px;
background-color: #FFF3D5;
}

#navbox {
width: 12%;
height: 300px;
float: left;
background-color: #435371;
color: white;
line-height: 20px;
text-align: right;
padding-right: 8px;
padding-top: 10px;
margin-right: 40px;
}

#mainbox {
width: 100%;
float: left;
color: white;
background-color: #435371;
}

#contentbox {
width: 70%;
float: left;
background-color: white;
color: black;
margin-top: -125px;
border-style: solid;
border-width: 5px;
border-color: white;
}

#contentheaderbox {
background-color: #435371;
height: 40px;
padding: 3px;
color: white;
font-weight: bold;
font-size: 40px;
}

ul.nav {
list-style-type: none;
}

a.mainnav:link {
color: white;
text-decoration: none;
}

a.mainnav:visited {
color: aqua;
text-decoration: none;
}

a.mainnav:hover {
color: #FFFFCC;
text-decoration: underline;
}

a.mainnav:active {
color: green;
font-weight: bold;
text-decoration: none;
}

HTML
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Lyndon and April Berg Construction and Finishing</title>
<meta name="description" content="Welcome to Berg Construction and Finishing. This site has information about the company, type of work they do, and examples of past projects.">
<meta name="keywords" content="residential, construction, interior, finishing, cement, concrete, framing, finished carpentry, national association of home builders, home, house, driveway, stamp, drywall, taping, cabinet, Winnipeg, Landmark, Manitoba, Canada">
<meta name="Revisit-After" content="7 Days" />
<meta name="Robots" content="index, follow" />
<link href="LABCSS.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="theheader">Sampson and Son</div>
<div id="mainbox">
<div id="navbox">
<a class="mainnav" href="LAB.html">Framing<a><br />
<a class="mainnav" href="LAB.html">Cement<a><br />
<a class="mainnav" href="LAB.html">Drywall<a><br />
<a class="mainnav" href="LAB.html">Finished Carpentry<a><br />
<a class="mainnav" href="LAB.html">Brick and Tile<a><br />
<a class="mainnav" href="LAB.html">Taping<a><br />
</div>
<div id="contentbox">
<div id="contentheaderbox">Home</div>
<ol>
<li>pictures of past jobs</li>
<li>company credo</li>
<li>company logo</li>
<li>contact information</li>
<li>are you a part of any associations?</li>
<li>links to association sites (reciprocal)</li>
<li>types of work Lyndon does</li>
<li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li>
<li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li>
<li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li>
<li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li>
<li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li>
</ol>
</div>
</div>
</body>
</html>

Having read some of the posts in this forum, plus some other websites. With the over-lay capability of divisions could they be used for an expanding menu to show more links?
how about positioning, would it be relative to the menu it just came from?
would each menu be there but turned off by using: visability:hidden; ?

would this menu be possible?

Normal View:- home area 1 area 2 area 3 area 51 When Hover over area 51:- home area area2 area 3 area 51 vessel technology morgue artifacts

example, look in middle of page (blank space)

it is supposed to be in the middle, but instead there is a blank space. no, the ad is not new, over 3 months old. i changed something and forget what (a while ago), now i just noticed this.

heres the code:
php Code:
Original - php Code $i = 0; $gamesperpage = 50; $adplaced = false; // display game boxes $a = 2; foreach ($games as $game) { display_gamebox('float='.$a.'&display=rating', $game); if($a == 2) $a = 1; else $a++; if(!$adplaced && $i >= count($games)/2 && $a == 2) { echo ' <div class="clearboth clearafter aligncenter"> <script type="text/javascript"> <!--google_ad_client = "pub-5687621631516277"; /* 468x60, created 3/18/08 */ google_ad_slot = "1797650152"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div>'; $adplaced = true; } $i++; } // end of foreach game echo " <div class='clearboth'><hr></div> ";

  

 $i = 0;


         


         $gamesperpage = 50;


         $adplaced = false;


         


         // display game boxes      


         $a = 2;


         


         foreach ($games as $game) {


             display_gamebox('float='.$a.'&display=rating', $game);


             if($a == 2) $a = 1;


             else $a++;


             


             if(!$adplaced && $i >= count($games)/2  && $a == 2) {


                 echo '


                 <div class="clearboth clearafter aligncenter">


                     <script type="text/javascript">


                     <!--google_ad_client = "pub-5687621631516277";


                     /* 468x60, created 3/18/08 */


                     google_ad_slot = "1797650152";


                     google_ad_width = 468;


                     google_ad_height = 60;


                     //-->


                     </script>


                     <script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js">


                     </script>


                 </div>'; 


                 $adplaced = true;


             }


             $i++;


         } // end of foreach game


         


         echo "


         <div class='clearboth'><hr></div>


         "; 

As always IE woes...

Anyway I have a design that I'm currently reworking into a css/div positioned site.

I'm almost done with it, but the problem I'm having is that I have 2 floated divs below a horizontal navigation bar. In IE these two floated divs are not positioning themselves directly beneath the nav bar like they do in FF. There looks to be a 3px or so gap between them. I will post screenshots for a better idea of what I'm talking about.

The HTML is:
Code:

<div id="container">
  <div id="top"></div>
  <div id="brands">
   ....stuff here....
  </div>
  <div id="slides"></div>  <!-- Slides and Vert_nav are not appearing directly below brands in IE-->
  <div id="vert_nav">
     ....stuff here....
  </div>
</div>

CSS
Code:

/* CSS Document */

html, body {
  background: #000000;
  padding: 0px;
  margin: 0px;
  color: #FFFFFF;
}

#container {
  width: 760px;
  padding: 0px;
  margin: 0px;
}

#top {
  width: 760px;
  height: 239px;
  background: url(../images/top.jpg) top left no-repeat;
}

#brands {
  width: 760px;
  height: 31px;
}

#slides {
  width:  667px;
  height:  350px;
  float: left;
  background: url(../images/slides.jpg) top left no-repeat;
T}

#vert_nav {
  width: 93px;
  height: 350px;
  float: right;
}

should.jpg is how the page is supposed to look.

shouldnt.jpg is how it is appearing in IE.

I have a div called #Nav and inside it I have created a horizontal list. The issue is unless I set the height of the Nav div to like 40px the text shows up below the div OR the entire Div gets shifted down. Its like there is a margin or padding somewhere by default that i have not unset.

Code:

<div id="header">
	<div id="wrapper">
    	<div id="navcol1"></div>
		<div id="navcol2">Insert List with Links </div>
	</div>
</div>

<div id="nav">
    <center>
		<ul class="nav">
  			<li class="nav"><a href="#home" class="nav">XRPpro</a></li>
  			<li class="nav"><a href="#home" class="nav">X-Ray Equipment</a></li>
  			<li class="nav"><a href="#home" class="nav">QuickSOAP Touchnotes</a></li>
        	<li class="nav"><a href="#home" class="nav">Online Courses</a></li>
  			<li class="nav"><a href="#home" class="nav">Chiro Marketing</a></li>
  			<li class="nav"><a href="#home" class="nav">Bohnology</a></li>
		</ul>
    </center>
</div>

Code:

#header {
	width:100%;
	height:160px;
	background-image:url(Images/header_background.jpg);
	margin-bottom:0px;
}
#nav {
	width:100%;
	background-color:#343434;
}
ul.nav	{
	list-style-type: none;
}
li.nav	{
	display: inline;
	margin-right:15px;
	font:"Century Gothic", Verdana, Geneva, sans-serif;
	font-size:12px;
}

Hello, for some reason my CSS XHTML web site shows an Iframe in the body of the body. here's the link:http://www.caillouette.com/Utilitrek/eight/members/search_inquiry.php

I've fiddled with the widths and container widths with no luck.

Can anyone tell me why this is happening?

thanks
-Sean

I'm playing around with web development after quite a lengthy break. I wrote the home page out by hand and had attempted to validate, fixed the errors and repeated until it validated at w3.org. When I copied the code from the first page and removed the right side of the table ( it was 3 columns on the main page but I only wanted 2 columns for the "template page" ). When viewing the template page in IE the table is off center ( all the way to the left ) and the links have unwarranted line spaces between them.

I can understand removing a column might affect the alignment of a table ( or at least, this is not what I'm worried about so much ) but the alterations to the navigation pane are baffling. Specifically, because the nav pane is inserted by the same php script on both the working, and dysfunctional page. The css is also the same as they are coded to pull from the specified url copy and pasted from one doc to the other as opposed to mistakenly using a css in a different directory than the working one.

The working page is:
Code:

<html>
<head>
<title> Under Construction </title>
<link rel="stylesheet" type="text/css" href="css/pcss.css" id="css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<table class="main">

<tr class="header">
	<th class="left"><div  id="img"></div></th>
	<th class="center"><h1 class="MainHeading">Brendan Walton</h1></th>
	<th class="right">&nbsp;</th>
</tr>
<tr class="body">
	<td>
		<div id="navMenu">
<ul class="navlist">
<li>
<div class="navhead" onclick='IsOpen(0)'>Literature</div>
<ul class="navlist" id="sm0" style="display:block;">
<li><a href="" class="navlink">Guides</a></li>
<li><a href="" class="navlink">Web Reference</a></li>
<li><a href="" class="navlink">Desktop Reference</a></li>
<li><a href="" class="navlink">External Reference</a></li>
</ul>
</li>
<li>
<div class="navhead" onclick='IsOpen(1)'>Fun and Random</div>
<ul class="navlist" id="sm1" style="display:none;">
<li><a href="" class="navlink">Videos</a></li>
<li><a href="" class="navlink">Images</a></li>
<li><a href="" class="navlink">Music</a></li>
<li><a href="" class="navlink">Random Page</a></li>
</ul>
</li>
<li>
<div class="navhead" onclick="IsOpen(2)">Code Base</div>
<ul class="navlist" id="sm2" style="display:none;">
<li><a href="code_base_sample2.html" class="navlink">Java</a></li>
<li><a href="code_base_sample2.html" class="navlink">C++</a></li>
<li><a href="code_base_sample2.html" class="navlink">PHP</a></li>
<li><a href="code_base_sample2.html" class="navlink">JavaScript</a></li>
</ul>
</li>
<li><div class="navhead" onclick="IsOpen(3)">General</div>
<ul class="navlist" id="sm3" style="display:none;">
<li><a href="" class="navlink">About Us</a></li>
<li><a href="" class="navlink">Don't Like the Look?</a></li>
<li><a href="" class="navlink">Community</a></li>
<li><a href="" class="navlink">Site Map</a></li>
</ul>
</li>
</ul>
</div>
<div class="navhead" style="height:150px;"><img src="images/stats.jpg" alt="TempStats" /></div>
<script type="text/javascript" src="javascript/menuwork.js"></script>
	</td>
	<td>
		<h4 class="heading">Coming Soon!!</h4>
		<hr class="pagebreak" />
		<p class="cblock"> This website will eventually have content, for now, just enjoy the pretty colors and the fancy, interactive menu to the left...</p>
		<h4 class="heading">Update: April 6, 2010</h4>
		<hr class="pagebreak" />
		<p class="cblock"> I have changed the navigation to the left to reflect the content the site will eventually house. Additionally I have begun styling how the codebase will eventually display it's information. To see a sample of the code output simply click any of the codebase links to the left.</p>
		<p class="cblock"> On a personal note, it has recently come to my attention that Dom's birthday was actually the second of April, not the fourth. I apologize for the tardy wishes. </p>
		<h4 class="heading">Update: April 4, 2010</h4>
		<hr class="pagebreak" />
		<p class="cblock"> Still working on the style for the website, It's coming along, albeit slowly... Also, even though you're never going to see this, Happy birthday Dom 8-)</p>
	</td>
	<td><img src="images/Brendan.jpg" alt="Brendan" id="portrait" />
	<hr style="width:150px;" />
	<p class="iblock"> "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
- Martin Golding"</p>
	<hr style="width:150px;" />
	<a href="aboutus.php"> About Us </a>
	</td>
</tr>
<tr >
	<td>&nbsp;</td>
	<td>
		<!-- footer removed for containing urls -->
	</td>
	<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

The dysfunctional page is:
Code:

<!-- XHTML 1.1 -->

<!-- Document Start -->
<html>

<!-- Head -->
<head>

<!-- Title -->
<title>  </title>

<!-- Style Sheet -->
<link rel="stylesheet" type="text/css" href="css/pcss.css" id="css" />

<!-- Charset UTF-8 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- PHP Includes -->
</head>
<!-- End Includes -->
<!-- Body -->
<body>

<!-- Main Table -->
<table class="main">
<!-- First Row - Header -->
<tr class="header">
	<!-- Start Banner -->
	<th class="left"><div  id="img"></div></th>
	<th class="center"><h1 class="MainHeading">Brendan Walton</h1></th>
	<!-- End Banner -->
</tr>
<!-- End First Row -->
<!-- Second Row - Content -->
<tr class="body">
	<td>
		<div id="navMenu">
<ul class="navlist">
<li>
<div class="navhead" onclick='IsOpen(0)'>Literature</div>
<ul class="navlist" id="sm0" style="display:block;">
<li><a href="" class="navlink">Guides</a></li>
<li><a href="" class="navlink">Web Reference</a></li>
<li><a href="" class="navlink">Desktop Reference</a></li>
<li><a href="" class="navlink">External Reference</a></li>
</ul>
</li>
<li>
<div class="navhead" onclick='IsOpen(1)'>Fun and Random</div>
<ul class="navlist" id="sm1" style="display:none;">
<li><a href="" class="navlink">Videos</a></li>
<li><a href="" class="navlink">Images</a></li>
<li><a href="" class="navlink">Music</a></li>
<li><a href="" class="navlink">Random Page</a></li>
</ul>
</li>
<li>
<div class="navhead" onclick="IsOpen(2)">Code Base</div>
<ul class="navlist" id="sm2" style="display:none;">
<li><a href="code_base_sample2.html" class="navlink">Java</a></li>
<li><a href="code_base_sample2.html" class="navlink">C++</a></li>
<li><a href="code_base_sample2.html" class="navlink">PHP</a></li>
<li><a href="code_base_sample2.html" class="navlink">JavaScript</a></li>
</ul>
</li>
<li><div class="navhead" onclick="IsOpen(3)">General</div>
<ul class="navlist" id="sm3" style="display:none;">
<li><a href="" class="navlink">About Us</a></li>
<li><a href="" class="navlink">Don't Like the Look?</a></li>
<li><a href="" class="navlink">Community</a></li>
<li><a href="" class="navlink">Site Map</a></li>
</ul>
</li>
</ul>
</div>
<div class="navhead" style="height:150px;"><img src="images/stats.jpg" alt="TempStats" /></div>
<script type="text/javascript" src="javascript/menuwork.js"></script>
	</td>
	<td>
		&nbsp;
	</td>
</tr>
<!-- End Second Row -->
<!-- Third Row - Footer -->
<tr>
	<td>&nbsp;</td>
	<td>
		<!-- footer removed for containing urls -->
	</td>
</tr>
<!-- End Third Row -->
</table>
<!-- End Table -->
</body>
<!-- End Body -->
</html>
<!-- End Doc -->

The css is:
Code:

body
{
 color:#333333;
 background-color:#FFFFFF;
 margin:0px;
 padding:0px;
}

hr.pagebreak
{
 width:450px;
 color:#550072;
}

.subHeading
{
 color:#8A00B8;
 font-size:18px;
}

ul.navlist
{
 display:inline;
 list-style-type:none;
 margin:0px;
 padding:0px;
}

a.navlink:link
{
 color:#FFFFFF;
 background-color:#550072;
 display:block;
 text-align:right;
 text-decoration:none;
 font-weight:bold;
 margin:0px;
 padding-right:2px;
}

a.navlink:visited
{
 color:#FFFFFF;
 background-color:#550072;
 display:block;
 text-align:right;
 text-decoration:none;
 font-weight:bold;
 margin:0px;
 padding-right:2px;
}

a.navlink:hover
{
 color:#FFFFFF;
 background-color:#8A00B8;
 text-decoration:none;
 margin:0px;
 padding-right:2px;
}

tr
{
 vertical-align:top;
}

table
{
 margin-left:auto;
 margin-right:auto;
 margin-bottom:0;
 margin-top:0;
}

table.main
{
 background-color:#FFFFFF;

}

th.left
{
 width:150px;
}

th.center
{
 width:500px;
}

th.right
{
 width:150px;
}

a.navhead:link
{
 display:block;
 text-decoration:none;
 text-align:left;
 color:#550072;
 font-weight:bold;
 border-style:groove;
 margin:0px;
 padding:0px;
}

a.navhead:visited
{
 display:block;
 text-decoration:none;
 text-align:left;
 color:#550072;
 font-weight:bold;
 border-style:groove;
 margin:0px;
 padding:0px;
}

div.navhead
{
 display:block;
 text-decoration:none;
 text-align:left;
 color:#550072;
 font-weight:bold;
 border-style:groove;
 margin:0px;
 padding:0px;
}

h4.heading
{
 display:block;
 margin:0px;
 padding-right:30px;
 color:#550072;
 text-indent:15px;
 text-align:right;
 font-size:24px;
}

img
{
 display:block;
 margin:0;
 padding:0;
}

p.cblock
{
 display:block;
 text-indent:15px;
 padding-left:10px;
 width:475px;
}

p.fblock
{
 display:block;
 text-indent:15px;
 padding-left:10px;
 width:475px;
 text-align:center;
}

.footer
{
 text-align:center;
}

#navMenu
{
 height:300px;
}

h1.MainHeading
{
 font-size:50px;
 color:#550072;
 text-align:left;
}


#img
{
 background-image:url("../images/purple-150x150-clear.jpg");
 background-repeat:no-repeat;
 height:150px;
 width:150px;
}
img.cssscriptimg
{
 display:inline;
}

#portrait
{
 width:150px;
}

p.iblock
{
 display:block;
 text-indent:15px;
 padding-left:10px;
 width:150px;
}

The navigation script is below:
PHP Code:
<?php
// This is a simple script to insert the navigation pane into every page

function echoNav ()
{
    // color changer
    //echo "<img class=\"cssscriptimg\" src=\"images/purple.jpg\" alt=\"purple\" onclick=\"LoadCss(\"purple\")\" />";
    //echo "<img class=\"cssscriptimg\" src=\"images/red.jpg\" alt=\"red\" onclick=\"LoadCss(\"red\")\ />";
    //echo "<img class=\"cssscriptimg\" src=\"images/green.jpg\" alt=\"green\" onclick=\"LoadCss(\"green\")\" />";

    // navMenu devision
    echo "<div id=\"navMenu\">\n";
    
    // Section List
    echo "<ul class=\"navlist\">\n";

    // First section
    echo "<li>\n";
    echo "<div class=\"navhead\" onclick='IsOpen(0)'>Literature</div>\n";

    // First link list
    echo "<ul class=\"navlist\" id=\"sm0\" style=\"display:block;\">\n";
    echo "<li><a href=\"\" class=\"navlink\">Guides</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Web Reference</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Desktop Reference</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">External Reference</a></li>\n";
    echo "</ul>\n";

    // End first section
    echo "</li>\n";

    // Second Section
    echo "<li>\n";
    echo "<div class=\"navhead\" onclick='IsOpen(1)'>Fun and Random</div>\n";
    echo "<ul class=\"navlist\" id=\"sm1\" style=\"display:none;\">\n";
    echo "<li><a href=\"\" class=\"navlink\">Videos</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Images</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Music</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Random Page</a></li>\n";
    echo "</ul>\n";
    echo "</li>\n";
    // End Second Section

    // Third Section
    echo "<li>\n";
    echo "<div class=\"navhead\" onclick=\"IsOpen(2)\">Code Base</div>\n";
    echo "<ul class=\"navlist\" id=\"sm2\" style=\"display:none;\">\n";
    echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">Java</a></li>\n";
    echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">C++</a></li>\n";
    echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">PHP</a></li>\n";
    echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">JavaScript</a></li>\n";
    echo "</ul>\n";
    echo "</li>\n";
    // End Third Section

    // Fourth Section
    echo "<li>";
    echo "<div class=\"navhead\" onclick=\"IsOpen(3)\">General</div>\n";
    echo "<ul class=\"navlist\" id=\"sm3\" style=\"display:none;\">\n";
    echo "<li><a href=\"\" class=\"navlink\">About Us</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Don't Like the Look?</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Community</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Site Map</a></li>\n";
    echo "</ul>\n";
    echo "</li>\n";
    // End Fourth Section

        // End Section List
        echo "</ul>\n";

        // End navMenu
        echo "</div>\n";

    // Stats
    echo "<div class=\"navhead\" style=\"height:150px;\"><img src=\"images/stats.jpg\" alt=\"TempStats\" /></div>\n";

    // Scripts
    echo "<script type=\"text/javascript\" src=\"javascript/menuwork.js\"></script>\n";
    // echo "<script type=\"text/javascript\" src=\"javascript/LoadCss.js\"></script>\n";
}

?>




Note:
I apologize for only pasting the HTML, this is the HTML as seen by IE after scripts have been run. I would have put links but I am a new user and that appears to be restricted. Removed direct URL access to the javascripts, images, and doctypes, as a result of being a new user as well, in the actual source they are accessed by a URL to ensure that it is compatible no matter which directory the functions are called within. That being said, the javascript was never a problem, even with the display issue, the javascript functioned as expected.

Any help would be very appreciated 8-)

Hi again,

I have an issue which is only appearing in FF.

I am trying to create a footer, but it is appearing under my header and inside my content area, instead of at the bottom. I think it may be something to do with the margins. This is the code for the footer:

PHP Code:
#footer_wrapper{
width: 780px;
height: 21px;
margin: 0 auto;
background-image: url('img/footer_bg.png');
background-repeat:repeat-x;}

#footer_left{
float:left;
padding-left: 10px;}

#footer_right{
float: right;
padding-right: 10px;} 





Any ideas?

Hi,
I want to make some text "appear" when hovering over a different set of text:

e.g.
The "Hover here" text is always apparent on the page. If you hover your mouse over it the "Text to appear" text...appears!

Hover here - Text to appear

How can I do this?

Thanks, Ian

I must be missing the obvious?

I have created an image that I want to tile vertically in the body of my document. So I have created a style for body in a linked css file with the following:

body {
background-image:url(image/background.gif);
background-repeat: repeat-y;
}

In Design view in Dreamweaver, the image has the desired effect and tiles no problems, however when I go to preview it in the browser, the image does not appear.

I have checked that the path of the image is correct in relation to the index.html page.

Everything is saved on the desktop just now because I am experimenting with the technique, so in desktop I have the index.html and the image file (with the background.gif) in it. Oh and the css file is on the desktop too. I have also tried embeddeding the style rule in the head of the index.html and it still wont work.

Would someone put me out of my misery please

dmlocke

Hello, if you visit http://tombraiders.net/katie/alison/index2.html you'll see the site I'm working on. (User: letme Pass: in)

I want to put a background image within the container that all the body copy resides.

I've tried editing the CSS file, located at http://www.tombraiders.net/katie/al...tyle_screen.css under "container3" however nothing ever appears.

The image I'm trying to link right now is located under the img folder at the path img/image.jpg -- it's just a test image I want to use for now to see if I can get one working at all.

Any help would be great! Not sure why it's not showing up. Thanks

Hi,

I have a drop down menu which is appearing under some flash. I have given my flash a div wrapper with a z-index of 1 and give the embed a wmode of transparent. I have given my <ul> and <li>'s a z-index of 1000, but still it appears under the flash in Chrome and IE,

Any ideas?

Thanks