Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:37

CSS problem, etc. - [SOLVED]


Poster: CozmoRaine
Dated: Monday July 25 2005 - 17:30:35 BST

I have a few problems:

1.) The instructions for how to use CSS in the JS document for the menu isn't working for me. Is there another way of doing this so I can keep my colors the same. All I want to do is ensure my text won't change size (which is does currently)

2.) The third tier of my menu does not work correctly. It makes the entire menu disappear and I'm not sure why. I used the same script for the first and second tiers. (Example - "Department>Camping Department>Parents>Camp Descriptions

3.) How can I copy the menu onto various HTML pages? I tried to copy the page and just change content, but that's not working. I also tried in Dreamweaver, making the script layer a Library item - that didn't work either.

I'm using Windows XP and I use the latest version of IE.

Here is the link -
http://www.net-aid.net/hidden/secondary2.html

Thanks in advance for any help you can provide!


Poster: slackbladder
Dated: Monday July 25 2005 - 19:16:27 BST

1
In menu_data.js set 'fontsize="78%";' to fontsize=10; (or size required)

2
Works OK for me (but I am on a MAC using FireFox as a browser)

3
Include:

Code:
<script type="text/javascript" src="milonic_src.js"></script>   
   <div class=milonic><a href="http://www.milonic.com/">JavaScript Menu, DHTML Menu Powered By Milonic</a></div>

   <script   type="text/javascript">
   if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");      
     else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
   </script>
   <script type="text/javascript" src="menu_data.js"></script>


on EVERY page either by coping and pasting in to every page or make a file containing the above and use include fuction to call it in to each page. If you haven't used SSI, PHP or similar before - then maybe best to stick to copying and pasting.


Poster: Ruth
Dated: Monday July 25 2005 - 19:30:35 BST

Hi Cozmo,

To add to what Slack said, the only way to make sure fontsize never changes is to use images.

Even using css is not absolute because browsers work differently. So, for example, setting font size to 10px works fine, unless the person has set personal style sheets in the browser which will take precedence over the style sheet you have. Setting font size works in IE not allowing even the use of the browser's textsize function to change the size, however that is not the case with most others. In Netscape, Firefox, Safari, I believe that even setting fontsize will not prevent the person from using the browser's text size feature to increase or decrease the size.

Ruth


Poster: CozmoRaine
Dated: Monday July 25 2005 - 19:32:23 BST

Thank you both for your help. I greatly appreciate it!


Poster: Ruth
Dated: Monday July 25 2005 - 19:41:49 BST

Hi,

One more thing, I forgot to ask which browser you are using when you don't get the 3rd level?

It works on PC using IE5.5, Firefox 1.0.2, Netscape

Ruth


Poster: CozmoRaine
Dated: Monday July 25 2005 - 19:47:38 BST

IE - whatever the latest version is


Poster: CozmoRaine
Dated: Tuesday July 26 2005 - 19:36:43 BST

I'm still having problems with the font issue and the third tier issue. I've tried all the suggestions listed above, but nothing seems to be working.

Any other suggestions?

Thanks


Poster: Ruth
Dated: Tuesday July 26 2005 - 22:07:17 BST

Hi,

I'm going back to your first post and the link you provided, you list:

1. problems using css in the js document for the menu. I don't see that you're using css in the menu_data file if that is what you mean. Could you point out where you are using css and the problem that is resulting?

2. What exactly are you doing when teh menu disappears, do you mean when you mouse over a 2nd tier item and the third tier opens or do you mean when you click on some item in the 3rd tier. All I'm getting from the link posted when I click anything in the menu is page not found.

3. Unfortunately I cannot help on divs, can't figure out what they are doing.

As to the font, I don't know what you mean. I'm not seeing any change in the menu_data.js file, the font is still set to 78% so it will be 78% of whatever the browser setting for the font is, so if someone has their browser font set to 120% then the font size will be 78% of 120%. If you have IE and it is set to smaller, it will be 78% of whatever that IE smaller font size is. As I said originally, there is no way to absolutely control the font size, you just can't, certain browsers will always allow the user's settings to be dominant, also, I think if you've got font size set in the css and applied to the divs, that will most likely become the dominant size over what is in the menu.

Ruth


Poster: CozmoRaine
Dated: Wednesday July 27 2005 - 13:40:15 BST

Ruth,

1.) You are correct - I am NOT using CSS currently, but I would LIKE to. I tried the suggestion of setting the font in the script to pixels instead of percent, but it still causes the text to change size. The only way I know of avoiding this is to apply a CSS to text, but I don't know how to do that with a JS file.

2.) When you mouse over the third tier item, the "hand pointer" disappears. It becomes a "pointer" and I'm not sure why. It doesn't do that with the first or second tiers and I used the exact same script for all three. When moused over the third tier, the first two tiers disappear, leaving just the third tier, with the pointer. This doesn't make any sense to me. Sorry - I know when you click on the third tier it doesn't show you a page. I haven't uploaded those pages yet.

3.) I'm going to try Slack's idea and put that script he suggested into my pages. Hopefully that will work

I'd really like to use this menu, because overall it is exactly what I want for my page. But before I register it, I'd like to know it's going to do what I want it to. Is there a contact number I should call to speak with someone directly? Or do I need to register my menu first?

Thanks for you help!

CozmoRaine


Poster: CozmoRaine
Dated: Wednesday July 27 2005 - 14:34:45 BST

Ruth

I think I figured out what's wrong when I'm trying to copy my script onto another page, but maybe you can help me.

Okay - I have a bunch of directories in my site and in each directory there are sub directories and so on. Every directory has an index.html page and will have this menu on it. How can I change the script on each page so I can have it link up to my menu_data.js? I only want to have 1 menu_data.js that will stay consisten throughout the whole site. Is this possible?

Thanks,

CR


Poster: slackbladder
Dated: Wednesday July 27 2005 - 14:45:35 BST

try leaving the menu files in your root folder (top), then amend each menu call in each index.html:

root
menu_data.js
milonic_src.js
etc
index.html =
Code:
........
<script type="text/javascript" src="menu_data.js"></script>.....


root / sub
index.html =
Code:
........
<script type="text/javascript" src="../menu_data.js"></script>.....


root / sub / sub1
index.html =
Code:
........
<script type="text/javascript" src="../../menu_data.js"></script>.....



or put a forward slash before each file:

Code:
<script type="text/javascript" src="/milonic_src.js"></script>   
   <div class=milonic><a href="http://www.milonic.com/">JavaScript Menu, DHTML Menu Powered By Milonic</a></div>

   <script   type="text/javascript">
   if(ns4)_d.write("<scr"+"ipt type=text/javascript src=/mmenuns4.js><\/scr"+"ipt>");     
     else _d.write("<scr"+"ipt type=text/javascript src=/mmenudom.js><\/scr"+"ipt>");
   </script>
   <script type="text/javascript" src="/menu_data.js"></script>


or put the full path in:

Code:
<script type="text/javascript" src="http://www.yoursite.com/milonic_src.js"></script>   
   <div class=milonic><a href="http://www.milonic.com/">JavaScript Menu, DHTML Menu Powered By Milonic</a></div>

   <script   type="text/javascript">
   if(ns4)_d.write("<scr"+"ipt type=text/javascript src=http://www.yoursite.com/mmenuns4.js><\/scr"+"ipt>");     
     else _d.write("<scr"+"ipt type=text/javascript src=http://www.yoursite.com/mmenudom.js><\/scr"+"ipt>");
   </script>
   <script type="text/javascript" src="http://www.yoursite.com/menu_data.js"></script>


Poster: CozmoRaine
Dated: Wednesday July 27 2005 - 15:06:16 BST

Slack,

Thanks. I tried doing ALL of the amendments you listed and all I get is my page without any menu at all. :( This is really getting frustrating for me.

Any other thoughts?

Thanks

CR


Poster: slackbladder
Dated: Wednesday July 27 2005 - 15:11:00 BST

Can you post back a URL of a page where the menu doesn't work?


Poster: CozmoRaine
Dated: Wednesday July 27 2005 - 15:14:48 BST

Slack

This is a "sub" page where it's not working - http://www.net-aid.net/hidden/about_us/index.html

This is the page with the original script on it - http://www.net-aid.net/hidden/secondary2.html

Thanks

CR


Poster: slackbladder
Dated: Wednesday July 27 2005 - 15:21:18 BST

The menu paths need to be:


Code:
<script type="text/javascript" src="/hidden/milonic_src.js"></script>   
   <div class=milonic><a href="http://www.milonic.com/">JavaScript Menu, DHTML Menu Powered By Milonic</a></div>

   <script   type="text/javascript">
   if(ns4)_d.write("<scr"+"ipt type=text/javascript src=/hidden/mmenuns4.js><\/scr"+"ipt>");      
     else _d.write("<scr"+"ipt type=text/javascript src=/hidden/mmenudom.js><\/scr"+"ipt>");
   </script>
   <script type="text/javascript" src="/hidden/menu_data.js"></script>


if you are not going to be moving the pages from the 'hidden' directory


Poster: CozmoRaine
Dated: Wednesday July 27 2005 - 16:31:07 BST

Slack,

THANK YOU SO MUCH!!!!!! That's works!

Eventually, once the site is full-functionable, I won't need the "hidden" directory, so I'll just take that down.

One question down...two more questions to go!

THANKS AGAIN!

CR


Poster: slackbladder
Dated: Wednesday July 27 2005 - 16:39:27 BST

If the site isn't staying where it is you would be better off placing the menu files in to the root (http://www.net-aid.net/) or in to a dedicated folder ( http://www.net-aid.net/menu/ ).

Then make your code:

Code:
<script type="text/javascript" src="/menu/menu_data.js"></script>

if you use http://www.net-aid.net/menu/

or

Code:
<script type="text/javascript" src="/menu_data.js"></script>

if you use http://www.net-aid.net/


Poster: CozmoRaine
Dated: Wednesday July 27 2005 - 19:59:54 BST

Let me just throw this out there

On the tier issue, I notice that once I CAN get my mouse to work on the third tier, the first one disappears, yet the 2nd and 3rd tiers are still up. At this point - the pointer turns into a hand over both the tiers that are left up.

It seems to me that somehow I'm only "allowed" to have 2 fully-functionable tiers working at once.

Does this make much sense?

Thanks for the help!

CR


Poster: slackbladder
Dated: Wednesday July 27 2005 - 20:14:48 BST

Try removing the left and top statements of all your submenus.

Also consider reviewing one of the many examples here on the site and download one. Then edit it with your links.

http://www.milonic.com/menusample1.php


Poster: CozmoRaine
Dated: Wednesday July 27 2005 - 20:24:06 BST

I tried taking out the LEFT and TOP, but then the submenu was in the middle of the page.

Also - I did copy and paste the code from the sample. It's still not working.

Thanks for trying

CR


Poster: slackbladder
Dated: Wednesday July 27 2005 - 20:27:14 BST

Try using the Milonic example on a blank html page (upload to your server) to see if its your page thats at fault


Poster: Ruth
Dated: Wednesday July 27 2005 - 21:44:58 BST

Hi,

I believe you're going to find that the problems are a result of putting the menu in a div. It really shouldn't be in a div. It has to do with the positioning, absolute, relative, and so on which in some browsers can conflict with the divs in the menu programming.

As I said, I don't really understand divs, but I made a page using your layout - rather it looks like your layout - and it does have your divs, most of them, but it uses a table for the top and the menu. You can test and see if that works for you as to the submenus.

I didn't really know how to position the divs so I just did test and change the top or left or margin or padding until it looked the same as to layout on your link and also looked the same in Netscape 7.1, Opera 7.54, Firefox 1.02. and IE 5.5

Link Removed



Hope this helps.

Ruth


Poster: CozmoRaine
Dated: Friday July 29 2005 - 15:08:10 BST

Ruth,

THANK YOU SO MUCH! This has helped so much! :) I really, really appreciate your help!

Just one more question - how do I change the coordinates of WHERE the menu (and the submenus) are placed? I can't seem to find coordinates in either the htm or js files.

THANKS AGAIN! You've been such a help!

CR


Poster: Ruth
Dated: Friday July 29 2005 - 15:32:07 BST

Hi CR,

You're welcome :)

You can't change the 'coordinates' there are no coordinates, per se. The menu is place relatively, position="relative"; it's inside the table so it will always be there and it will 'shift' as the content shifts, just as the table shifts. But, the submenus will go where they are supposed to go :)

Can you tell me what you want to do as to moving it?

I dont' know if you noticed but I made new images, given that I was using the table layout. So your top image is actually two, the main image about as wide as you had it before, and then at the right is a little background image that will expand if the resolution is changed and the right side of that 'banner' will seem to extend so it goes all across the page no matter what the resolution. I also had to figure out how to do the image map, never done that before, because with the table the placement of the imagemap you had didn't work, it shifted those items too far right.

Anyway, if you could tell me what you need to do as to moving the menu, I can figure it out for you and post back.

Ruth


Poster: CozmoRaine
Dated: Friday July 29 2005 - 15:51:35 BST

Ruth,

Thanks again for all your help!

Okay - here is the link for the page I reconstructed using your sample. http://www.net-aid.net/hidden/test.htm

I want my menu to line up with the green line to the left of it (the one where the search engine is inside of.)

Also - I notice that when you resize the page and the screen resolution is small, the menu disappears (well, the "About Us" does, anyway.) Is there a way to avoid this problem?

THANKS!

CR


Poster: Ruth
Dated: Friday July 29 2005 - 16:47:10 BST

Hi CR,

I need to have you tell me some things.

EDIT: I deleted what i wrote....... See next post.

I can fix the 'hiding' problem.
Ruth


Poster: Ruth
Dated: Friday July 29 2005 - 17:22:22 BST

Hi CR,

What's happening is that even though the table cell at the left of the menu is set to 157px to be the same size as the div, when you make the browser window smaller that cell shifts smaller. So, to fix it, you need to put in a transparent image and set its height to 1 and it's width to 157. I use a 1x1 transparent pixel image I name blank.gif.

You'd put it here
Code:
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
  <TBODY>
  <TR>
    <TD class=2nd vAlign=top width=157 bgColor=#a0bf7d><img src="blank.gif" width="157" height="1" border="0"></TD>
    <TD class=2nd bgColor=#a0bf7d height=28>


As to the menu 'meeting' the div. If you do that then there will be problems in different browsers. The reason I have that little 5px table cell to the left of the menu is that if you get rid of it and make it line up in IE it will be a little bit covered by the div in Netscape and Firefox. It has to do with how the different browsers render text size. Even if you make it a fixed size that doesn't always work. The browsers tend to be about 5 pxs different so that's why I moved it, to make sure the div didn't cover any part of it in the other browsers.

Hope that helps.

Ruth


Poster: Ruth
Dated: Friday July 29 2005 - 18:30:21 BST

WHOOO HOOOO I fixed it so it will meet like you want :!:

Took me forever to figure out the increments and such.

OK, I am uploading a zip file. It has the new page, the new data file and the blank.gif image. new zip

So you know what I did:

1. I removed padding=4 from the data file and added
Code:
rawcss="padding:3px 3px 4px 3px";


2. I changed separatorsize to 2 from 3

3. I added the blank.gif image to the table cell as shown above but made it 152px wide.

4. I changed the height of the td cell in which the table for the menu is from 28px to 30px

5. I added the following to the main menu, it has to have some text, but putting the headerbgcolor and headercolor to the same as the main menu offbgcolor makes it so it doesn't show. Using a non-breaking line space does not work in netscape, it acts as if there is nothing there.
Code:
aI("text=a;headerbgcolor=#F1EB93;headercolor=#F1EB93;itemwidth=5px;separatorsize=0;type=header;");


Finally, I changed and you have to change the links to the menu. You are linking to the Milonic site, you need to link to your version of the menu. It's why I didn't include my menu program files in the zip file. I guess I must have somehow left in the milonic site links in the zipped page. Usually I don't do that, but everybody messes up sometimes :)

Anyway, doing it that way makes the layout look exactly the same in Netscape, Firefox and IE so get the zip file with page, image and new data file and test that.

Ruth


Poster: CozmoRaine
Dated: Monday August 1 2005 - 13:30:34 BST

Hi Ruth,

Thanks so much for the new files. They work beautifully. I only have one question: what do you mean by this - Finally, I changed and you have to change the links to the menu. You are linking to the Milonic site, you need to link to your version of the menu. It's why I didn't include my menu program files in the zip file. I guess I must have somehow left in the milonic site links in the zipped page. Usually I don't do that, but everybody messes up sometimes I can't seem to see where my links are incorrect, in either the HTML page or the JS file.

You have been a really big help. Thanks again!

CR


Poster: Ruth
Dated: Monday August 1 2005 - 14:59:28 BST

Hi CR,

If you look in the first download, I must have 'zipped' the test page I put up instead of the one that was made for the zip. So, the one you put up didn't link to net-aid.net but to milonic site for the program files, the milonic_src.js etc. That's not acceptable for users [not that you did it, it was my error]. Users have to download and get a license for their own menu on their own site. I'm pretty sure I didn't put those links in the new file, but you need to check that and make sure you link to your files on your site.

Ruth


Poster: CozmoRaine
Dated: Monday August 1 2005 - 16:25:50 BST

Ruth,

We haven't purchased a license yet, because we're still in our 40-day trial period. Is that why it might still be pointing to Milonic's site?

I know we're planning on purchasing sometime this week, so should I wait until then to change anything? I'll be using this menu throughout my entire site - would you recommend waiting to copy the script to these pages until we've purchased a license?

Thanks again for all your help!

CR


Poster: CozmoRaine
Dated: Monday August 1 2005 - 19:31:12 BST

Ruth,

We have purchased the license for our site. Just an FYI.

Thanks,

CR


Poster: Ruth
Dated: Monday August 1 2005 - 20:15:08 BST

Hi CR,

I'm so sorry, I didn't mean to imply you had to buy the license right now while you were in development. I was trying to say the links on your test page are incorrect because I made a mistake. When I put up a zip file with test pages for someone, I usually code the calls for the files as
Code:
<script type="text/javascript" src="milonic_src.js"></script>   
<script   type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");      
  else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
</script>
If you go to your test page and look at the call for those files you'll see that I forgot to change the links and they are still pointing at the files on the Milonic site.

You won't be unhappy with the menu in my opinion. I think it's the best one out there, so very versatile of design and cross-browser compatible.

Ruth


Poster: CozmoRaine
Dated: Monday August 1 2005 - 20:46:33 BST

Ruth,

I think I understand...the test.htm page you sent me awhile ago had references to the milonic site. The cozmo_new.htm page doesn't, right? Here is what was in the cozmo_new.htm page
Code:
<SCRIPT language=JavaScript src="milonic_src.js"
type=text/javascript></SCRIPT>

<DIV class=milonic><A href="http://www.milonic.com/">JavaScript Menu, DHTML Menu
Powered By Milonic</A></DIV>
<SCRIPT language=JavaScript>
_scr="SCRIPT"
if(ns4)_d.write("<"+_scr+" language=JavaScript src=mmenuns4.js><\/scr"+"ipt>");
  else _d.write("<"+_scr+" language=JavaScript src=mmenudom.js><\/scr"+"ipt>");
</SCRIPT>

<SCRIPT src="table_data_new.js" type=text/javascript></SCRIPT>


Is this correct? Do I need to do anything else to change this? Will I need to change the script when I save it to different subdirectories? Or will this script work just fine?

Thanks!

CozmoRaine


Poster: Ruth
Dated: Monday August 1 2005 - 20:53:38 BST

Hi CR,

You need to make that script point to wherever you put your menu files.

So, let's assume you're making a special folder in your root directory called menu and you put all the menu files in it, then you need to make the links point to that folder, for example:

Code:
<SCRIPT language=JavaScript src="http://www.yourdomian.com/menu/milonic_src.js"
type=text/javascript></SCRIPT>

<DIV class=milonic><A href="http://www.milonic.com/">JavaScript Menu, DHTML Menu
Powered By Milonic</A></DIV>
<SCRIPT language=JavaScript>
_scr="SCRIPT"
if(ns4)_d.write("<"+_scr+" language=JavaScript src=http://www.yourdomain.com/menu/mmenuns4.js><\/scr"+"ipt>");
  else _d.write("<"+_scr+" language=JavaScript src=http://www.yourdomain.com/menu/mmenudom.js><\/scr"+"ipt>");
</SCRIPT>

<SCRIPT src="http://www.yourdomain.com/menu/table_data_new.js" type=text/javascript></SCRIPT>


I use full paths 'cause I have trouble with relative paths, you just need to make sure you point the link to wherever you have uploaded the menu files. I don't put the menu files in subdirectories because I use full path so I just leave all of the files in my 'menu' directory and call them from there on every page.

Ruth


Poster: CozmoRaine
Dated: Monday August 1 2005 - 21:08:30 BST

Ruth,

Oh - okay - that all makes sense to me. I guess it's the same as the problem I had originally when it wasn't showing up on the subdirectory pages.

Hopefully I'm good to go now! You have been a LIFESAVER! THANK YOU, THANK YOU, THANK YOU! I appreciate all the time and energy you've spent on this with me!

You're the best! :)

CozmoRaine


Poster: CozmoRaine
Dated: Monday August 1 2005 - 21:20:49 BST

Ruth,

If I understand correctly - this is what I need to put on ALL of my pages (even those in subdirectories) because it will still point to the menu_data.js file that is in the MAIN directory:
Code:
   
<SCRIPT language=JavaScript src="http://www.cpcumc.org/milonic_src.js"
type=text/javascript></SCRIPT>

<DIV class=milonic><A href="http://www.milonic.com/">JavaScript Menu, DHTML Menu
Powered By Milonic</A></DIV>
<SCRIPT language=JavaScript>
_scr="SCRIPT"
if(ns4)_d.write("<"+_scr+" language=JavaScript src=http://www.cpcumc.org/mmenuns4.js><\/scr"+"ipt>");
  else _d.write("<"+_scr+" language=JavaScript src=http://www.cpcumc.org/mmenudom.js><\/scr"+"ipt>");
</SCRIPT>

<SCRIPT src="http://www.cpcumc.org/mmenu_data.js" type=text/javascript></SCRIPT>


Am I correct? (Fingers crossed)

;) CR