coolmenu not staying in div on FF

**cruizer** · 04-16-2010, 03:25 PM

Hello all, new here and as you will quickly learn, I have problems that no one has ever had or can figure out. But I try.

I have a js menu, i've designed the webpage, and everything work perfectly in IE. But FF doesn't like it. Basically the meny is places exactly were I want it in IE, and in FF, it is all the way to the left. Basically I want it in the 'nav' div.

Here is a live link:
http://cgsart.com/test2/

The HTML

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Events By Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css" />


<script language="JavaScript1.2" src="coolmenus4.js">

/*****************************************************************************
Copyright (c) 2001 Thomas Brattli (webmaster@dhtmlcentral.com)

DHTML coolMenus - Get it at coolmenus.dhtmlcentral.com
Version 4.0_beta
This script can be used freely as long as all copyright messages are
intact.

Extra info - Coolmenus reference/help - Extra links to help files **** 
CSS help: http://coolmenus.dhtmlcentral.com/projects/coolmenus/reference.asp?m=37
General: http://coolmenus.dhtmlcentral.com/reference.asp?m=35
Menu properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=47
Level properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=48
Background bar properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=49
Item properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=50
******************************************************************************/
</script>
</head>

<body>

<div id="container">


<div id="nav">

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

</div><!-- CLOSES NAV -->


   <div id="header"></div><!-- CLOSES HEADER -->

   <div id="body">

<div class="left">

</div>

<div class="right">
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  </p>
</div>


<div style="clear:both"></div>


   </div><!-- CLOSES BODY -->



   <div id="footer">

<div class="copyright">
<table width="100%">
<tr><td width="60%">
© 2010 Events By Design.  All rights reserved.
</td><td width="40%" align="right">
Website Created and Maintained By: <a href="http://www.cgsart.com" target="_new">CreativityForHire.com</a>
<td></tr>
</table>
</div><!-- CLOSES COPYRIGHT -->

	</div><!-- CLOSES FOOTER -->


</div><!-- CLOSES CONTAINER -->




</body>
</html>

the CSS

Code:

	html, body {
   	margin:0;
   	padding:0;
   	height:100%;
	background: url(images/events_bkgnd.gif) top center;
	}


	#container {
   	min-height:100%;
   	position:relative;
	left:50%;
	width:800px;
	margin:0 0 0 -400px;
	border-left: #705544 2px solid;
	border-right: #705544 2px solid;
	background: url(images/content_background.gif) top left;
	}

	#nav	{
	position:relative;
	height:20px;
	width: 100%;
	}
	
	#header {
   	min-height:125px;
	border-bottom: #705544 2px solid;
	background: #dfd4c3;
	}

	#body {
	min-height: 100%;
   	padding-bottom:20px;   /* Height of the footer */
	}

	.left	{
	position:relative;
	float:left;
	height:100%;
	padding: 10px;
	width: 180px;
	}

	.right {
	position:relative;
	float:right;
	padding: 10px;
	width: 580px;
	}

	#footer {
   	position:absolute;
   	bottom:0;
   	width:100%;
   	height:20px;   /* Height of the footer */
	font-size:11px;
	color: #000000;
	border-bottom: #705544 2px solid;
	border-top: #705544 2px solid;
	background: #dfd4c3;
	}

	.copyright {
	position:relative;
	width:800px;
	font-size:11px;
	color: #000000;
	border-bottom: #000000 1px solid;
	}



/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:relative; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */
  
/*Style for the background-bar*/

	.clBar	{
	position:relative; 
	width:10; 
	height:10; 
	background-color:#ffffff; 
	layer-background-color:#dfd4c3; 
	visibility:hidden
	}

	/*Styles for level 0*/
	.clLevel0,.clLevel0over	{
	position:absolute; 
	padding:2px; 
	font-family:tahoma,arial,helvetica; 
	font-size:12px; 
	font-weight:bold
	}

	.clLevel0	{
	background-color:#dfd4c3; 
	layer-background-color:#dfd4c3; 
	color: #705544 ;
	}

	.clLevel0over	{
	background-color:#ccbfa9; 
	layer-background-color:#ccbfa9; 
	color:000000; 
	cursor:pointer; 
	cursor:pointer; 
	}

	.clLevel0border	{
	position:absolute; 
	visibility:hidden; 
	background-color:#705544 ; 
	layer-background-color:#705544 
	}

	/*Styles for level 1*/
	.clLevel1, .clLevel1over{
	position:absolute; 
	padding:2px; 
	font-family:tahoma, arial,helvetica; 
	font-size:11px; 
	font-weight:bold
	}

	.clLevel1	{
	background-color:#dfd4c3; 
	layer-background-color:#dfd4c3; 
	color:#705544 ;
	}

	.clLevel1over{
	background-color:#ccbfa9; 
	layer-background-color:#ccbfa9; 
	color:#000000; 
	cursor:pointer; 
	cursor:pointer; 
	}

	.clLevel1border{
	position:absolute; 
	visibility:hidden; 
	background-color:#705544 ; 
	layer-background-color:#705544 
	}

	/*Styles for level 2*/
	.clLevel2, .clLevel2over	{
	position:absolute; 
	padding:2px; 
	font-family:tahoma,arial,helvetica; 
	font-size:10px; 
	font-weight:bold
	}

	.clLevel2 {
	background-color:#dfd4c3; 
	layer-background-color:#dfd4c3; 
	color:#705544 ;
	}

	.clLevel2over {
	background-color:#ccbfa9; 
	layer-background-color:#ccbfa9; 
	color:#000000; 
	cursor:pointer; 
	cursor:pointer; 
	}
	
	.clLevel2border	{
	position:absolute; 
	visibility:hidden; 
	background-color:#705544 ; 
	layer-background-color:#705544 
	}

**cruizer** · 04-16-2010, 03:26 PM

And the menu.js

Code:

/*** 
This is the menu creation code - place it right after you body tag
Feel free to add this to a stand-alone js file and link it to your page.
**/

//Menu object creation
oCMenu=new makeCM("oCMenu") //Making the menu object. Argument: menuname

oCMenu.frames = 0

//Menu properties   
oCMenu.pxBetween=0
oCMenu.fromLeft=-1
oCMenu.fromTop=0   
oCMenu.rows=1 
oCMenu.menuPlacement="left"
                                                             
oCMenu.offlineRoot="file:///C|/Inetpub/wwwroot/dhtmlcentral/projects/coolmenus/examples/" 
oCMenu.onlineRoot="/coolmenus/" 
oCMenu.resizeCheck=1 
oCMenu.wait=1000 
oCMenu.fillImg="cm_fill.gif"
oCMenu.zIndex=0

//Background bar properties
oCMenu.useBar=1
oCMenu.barWidth="800"
oCMenu.barHeight="menu" 
oCMenu.barClass="clBar"
oCMenu.barX=0 
oCMenu.barY=0
oCMenu.barBorderX=0
oCMenu.barBorderY=0
oCMenu.barBorderClass=""

//Level properties - ALL properties have to be spesified in level 0
oCMenu.level[0]=new cm_makeLevel() //Add this for each new level
oCMenu.level[0].width=99.01
oCMenu.level[0].height=20
oCMenu.level[0].regClass="clLevel0"
oCMenu.level[0].overClass="clLevel0over"
oCMenu.level[0].borderX=1
oCMenu.level[0].borderY=1
oCMenu.level[0].borderClass="clLevel0border"
oCMenu.level[0].offsetX=0
oCMenu.level[0].offsetY=0
oCMenu.level[0].rows=0
oCMenu.level[0].arrow=0
oCMenu.level[0].arrowWidth=0
oCMenu.level[0].arrowHeight=0
oCMenu.level[0].align="bottom"

//EXAMPLE SUB LEVEL[1] PROPERTIES - You have to specify the properties you want different from LEVEL[0] - If you want all items to look the same just remove this
oCMenu.level[1]=new cm_makeLevel() //Add this for each new level (adding one to the number)
oCMenu.level[1].width=oCMenu.level[0].width-2
oCMenu.level[1].height=20
oCMenu.level[1].regClass="clLevel1"
oCMenu.level[1].overClass="clLevel1over"
oCMenu.level[1].borderX=1
oCMenu.level[1].borderY=1
oCMenu.level[1].align="right" 
oCMenu.level[1].offsetX=-(oCMenu.level[0].width-2)/2+20
oCMenu.level[1].offsetY=0
oCMenu.level[1].borderClass="clLevel1border"


//EXAMPLE SUB LEVEL[2] PROPERTIES - You have to spesify the properties you want different from LEVEL[1] OR LEVEL[0] - If you want all items to look the same just remove this
oCMenu.level[2]=new cm_makeLevel() //Add this for each new level (adding one to the number)
oCMenu.level[2].width=99
oCMenu.level[2].height=25
oCMenu.level[2].offsetX=0
oCMenu.level[2].offsetY=0
oCMenu.level[2].regClass="clLevel2"
oCMenu.level[2].overClass="clLevel2over"
oCMenu.level[2].borderClass="clLevel2border"


/******************************************
Menu item creation:
myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, overImage, regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout) 
*************************************/
oCMenu.makeMenu('top0','','&nbsp;Home','index.html','')
  	
oCMenu.makeMenu('top1','','&nbsp;About Us','about.html')
	oCMenu.makeMenu('sub10','top1','Founder','about.html#')
	oCMenu.makeMenu('sub11','top1','Testimonials','about.com#')

oCMenu.makeMenu('top2','','&nbsp;Blog','index.html','')
	
oCMenu.makeMenu('top3','','&nbsp;Weddings','weddings.html')
	oCMenu.makeMenu('sub31','top3','Services','weddings.html#')
	oCMenu.makeMenu('sub32','top3','Packages','weddings.html#')

oCMenu.makeMenu('top4','','&nbsp;Invitations','invitations.html')
	oCMenu.makeMenu('sub40','top4','Passion for Paper','invitations.html#')
	oCMenu.makeMenu('sub41','top4','Paper Products','invitations.html#')


oCMenu.makeMenu('top5','','&nbsp;Portfolio','portfolio.html')
	oCMenu.makeMenu('sub50','top5','Photos','portfolio.html')
	oCMenu.makeMenu('sub51','top5','Videos','portfolio.html')

oCMenu.makeMenu('top6','','&nbsp;Vacations','vacations.html')
	oCMenu.makeMenu('sub60','top6','Sandals','vacations.html')

oCMenu.makeMenu('top7','','&nbsp;Contact','contact.html')


//Leave this line - it constructs the menu
oCMenu.construct()

**cruizer** · 04-16-2010, 08:18 PM

Summary:

IE is keeping the svript contained in the nav div, FF is not. Any ideas??

**rjewell** · 01-24-2011, 05:31 PM

I have exactly the same problem. Did you ever find a solution?

Thread: coolmenu not staying in div on FF

Thread Tools

Search Thread

coolmenu not staying in div on FF

Bookmarks

Bookmarks

Posting Permissions