Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Closed Thread
 
Thread Tools Display Modes
Share |
  #1  
Old 04-15-2010, 11:48 AM
cruizer cruizer is offline
Junior Member
 
Join Date: 04-08-10
Posts: 7
iTrader: 0 / 0%
Cool menu cross browser issue

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/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()
Thanks!
 

Advertisement

Advertisement

  #2  
Old 04-16-2010, 07:41 AM
cruizer cruizer is offline
Junior Member
 
Join Date: 04-08-10
Posts: 7
iTrader: 0 / 0%
Why is it that my problems are one's that no one else has ever had?
 
  #3  
Old 04-16-2010, 09:18 AM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,558
iTrader: 5 / 100%
How about starting with fixing the HTML errors the W3C validator found?

And the ones the CSS validator found.

This might not solve your problem but it does eliminate coding as the issue.
 
  #4  
Old 04-16-2010, 11:58 AM
cruizer cruizer is offline
Junior Member
 
Join Date: 04-08-10
Posts: 7
iTrader: 0 / 0%
Done! Except for the colors that it says doesn't exist.

Unfortunately problem still exists,
 
  #5  
Old 04-16-2010, 12:35 PM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,558
iTrader: 5 / 100%
What happens if you change this:
Code:
#nav { position:relative; height:20px; width: 100%; }
To:
Code:
#nav { width: 800px; margin-left: auto; margin-right: auto; }
or just to:
Code:
#nav { height:20px; }
 
  #6  
Old 04-16-2010, 01:13 PM
cruizer cruizer is offline
Junior Member
 
Join Date: 04-08-10
Posts: 7
iTrader: 0 / 0%
1st) removed the 20px space

2nd) puts it back.

Other than that nothing changes, on either IE or FF.

It's weird, FF just doesn't contain it in the DIV, where as IE does.
 
  #7  
Old 07-21-2011, 05:03 AM
vageesanr vageesanr is offline
Junior Member
 
Join Date: 07-21-11
Posts: 1
iTrader: 0 / 0%
IE 8 and 9 issue

I am using cool menu for a while for IE 6 and IE 7 and now I need to use it for IE8 and IE9. The menu doesn't appear at present in IE8.

@cruizer Can you tell me what you did for it to work in IE8?
 
Go Back   Webmaster Forum > Web Development > Coding Forum

Closed Thread


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Is There A Reliable Cross Browser, Cross Platform JavaScript Date Format? abajan Coding Forum 3 08-14-2009 12:52 PM
cross-browser fly-in ads script johnbraduly Coding Forum 1 08-22-2007 05:30 AM
Cross browser issue. Fixes on page refresh Mr.Bill Coding Forum 3 08-13-2007 12:13 AM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 11:52 PM.
Powered by vBulletin
Copyright © 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC