JavaScript Forum

**cruizer** · 04-15-2010, 02:55 PM

So as usual, things are working perfectly in IE8 and not in anything else (i.e. Firefox). So naturally this means that IE is the problem.
In IE, the menu is placed exactly where I want it to be. In Forefox, it's all the way over to the left. Honestly I have no clue why.
The Live Demo: 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 
 }

and 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/dhtmlcent...enus/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()

Thanks!

**JeremyMiller** · 04-15-2010, 08:13 PM

I moved this to the javascript forum b/c it's related to the javascript. I don't have time to check now, but it has something to do with how you're using the script: You have the code for running the menu.js file in the wrong spot and never tell it (as far as I can see on a quick look-through) to put it in the navigation DIV.

Will look later when I have more time unless this gets resolved.

**cruizer** · 04-16-2010, 12:59 AM

Thank you, I wasn't sure where this went, because I am not sure exactly what the problem is.

Just to hopefully help clarify: coolmenu4.js, link to script located in the head, is the reference to the script that runs the menu. menu.js is the script that designs the personalized menu. I created a link to menu.js between the 'nav' div tags, instead of building the whole menu there, as this menu will be placed on multiple pages, and a single file is easier for overall site menu changes. If I replace the link to the script with the actual menu code, I get the same results.

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

FF ist just not keeping the scrip contained in the DIV, IE is. Any ideas?