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:44

SSI and subdirectory problems


Poster: Davidk
Dated: Thursday February 5 2004 - 15:37:33 GMT

Hi!

I've now decided to use SSI for my upcoming Website, but I'm having difficulties to get the menu to load when I try to open it by SSI in a file that is not in the same directory as the menu itself. You can find my very short testsite at:

http://www.davidkarlsson.se/ssi/index.shtml

All I have in what will become the root (which is not actually the root now, but in one directory) is the index.shtml file and a css file and one directory. I have saved the menu in a html file places in a directory called "includes" where I also have a file called "right" which opens up very nice in the index.shtml file, through the same SSI command as I unsuccessfully try to open the menu with (<!--#include virtual="/ssi/includes/right.html" --> and <!--#include virtual="/ssi/includes/menu.html" -->). I have not made any changes in the four menu files, not adding any '../' or '/' at all.

The message I'm receiving when the page loads is that 'ns4' is undefined. I understand that this probably has something to do with the subdirectories and I have tried to surf around the forum and try different solutions presented, but I just don't manage. please help me!

David


Poster: fredlongworthhighschool
Dated: Thursday February 5 2004 - 16:08:28 GMT

I'm just starting to use SSI but until I get familliar with it, am leaving the included file in my root directory.


Poster: UEBen
Dated: Thursday February 5 2004 - 17:39:44 GMT

The path to the milonic_src.js and menu_data.js files is incorrect.

You need to add "includes/" to the file path for these two javascript sources.


Poster: Davidk
Dated: Thursday February 5 2004 - 17:50:48 GMT

Thanks, that helps. However, if I like now have added a directory - "institute", where I have placed the file "charter.shtml" and included the same SSI-tags as in the index.shtml, it will only show the "right.html"-include and not the "menu.html"-include. This is where I run into problems, I need to be able to structure my website with directories and not keep all my files in the root. What to do???

You can now find the two files I have up there at:

http://www.davidkarlsson.se/ssi/index.shtml
- This file is now working (although it's not looking good!)

http://www.davidkarlsson.se/ssi/institute/charter.shtml
- This file only shows the "right.html"-include and not my menu, although I'm using the same commands

Please help!

David


Poster: John
Dated: Thursday February 5 2004 - 22:24:00 GMT

OK, first things first. Your HTML is seriously screwed up, right from the start. This will just be a general outline, I'm not going to plug it all in here...

At http://www.davidkarlsson.se/ssi/index.shtml you have (roughly)...
Code:
<doctype...>
<html>
<head>
</head>
<body>
<table>
<td><doctype...>
<html>
<head>
</head>
<body></body>
</html>
...
<td><doctype...>
<html>
<head>
</head>
<body>
</table>
</body>
</html></td>
...
</table>
</body>
</html>

There is some heavy-duty cleaning up that needs to be done with this code before we talk about anything else. If you don't understand let us know. We can give limited HTML help, but that is not the purpose of this Forum.

Once your code is fixed we'll work on getting rid of the numerous ../../../../../../ items, and get the includes working by using something called server-relative addressing (you can find articles on that here by doing a Search, but I'd really worry about the code first).

Thanks John!


Poster: Davidk
Dated: Friday February 6 2004 - 14:19:19 GMT

John!

Thank you for your frankness! I think I did what is probably not uncommon for SSI-newbies, I neglected to realize that the code from the included pages will be written into the viewed page. I have now thoroughly cleaned up the code! I now believe I'm ready for the server-relative addressing. I manage to get the "right.html" included, but the menu wont appear and I of course understand it has to do with the addressing, but I can not figure out how to mend the problem. Any further assistance would be greatly appreciated!

Here's the url again:

http://www.davidkarlsson.se/ssi/index.shtml

David


Poster: UEBen
Dated: Friday February 6 2004 - 16:33:27 GMT

David,

The source path to your javascript files are incorrect. Again, you are missing: "includes/"

Also, put the javascript for the Milonic menu in the <head></head> of your index page and simply use the menu settings to position it on the page.

Ben

Re: Thanks John!


Poster: John
Dated: Friday February 6 2004 - 19:01:10 GMT

Davidk wrote:
Thank you for your frankness!

Hope it didn't sound too strong, but regardless, you're welcome.
Davidk wrote:
I think I did what is probably not uncommon for SSI-newbies, I neglected to realize that the code from the included pages will be written into the viewed page.

Ah, that's what you did! I was racking what's left of my brain trying to figure how all that extra stuff had gotten in there.

Just think of an include file as a snip of code, not a complete html page. Whatever you 'include' will just be sandwiched into the current page code at the location of your include statement.
Davidk wrote:
I now believe I'm ready for the server-relative addressing.

Not quite yet, although I will tell you how to do it. First you really need to update your menu code, and get it licensed. You're still running RC15, with RC50 current. That's way too far back to try and shoot any other problems we may (will!) see along the way.

I have taken your code, as it stands with corrections only to the JS calls (not the menu _data code), and posted it at http://tiggr.com/ssi/. All the menu files are in /includes/. This gives us essentially the same path structure as is on your server. As you can see the menu does now display, but needs some work. The _data file also needs some minor syntax corrections. We will not work with code this old, as it would be a waste of both our time and yours as well. Update (and license)!

Note the new code for the JS calls...
Code:
<script language="JavaScript" src="/ssi/includes/milonic_src.js" type="text/javascript"></script>   
<script language="JavaScript">
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=/ssi/includes/mmenuns4.js><\/scr"+"ipt>");      
else _d.write("<scr"+"ipt language=JavaScript src=/ssi/includes/mmenudom.js><\/scr"+"ipt>");
</script>
<script language="JavaScript" src="/ssi/includes/menu_data.js" type="text/javascript"></script>

You will see I have added /ssi/includes/ to each path. This is server-relative addressing (since your server address is http://www.davidkarlsson.se/). With the coding in this form, you can now have your site go as many levels deep as you need and the calls will remain exactly the same. That won't work with the suggestion Ben posted, as he missed the leading / . His suggestion will work if your site remains at one level only.

He is correct about moving the code. Take the entire block shown above and move it to the first lines after <body>. Just leave the <td> where it is now empty. You could even place that block in an include file and call it that way if you like. Then, should something change in the calls, you only have to make the correction in one place, rather than on every page. While in some cases it is necessary to place the code in the <head> (and the menu is designed to work from either location), we find the <body> placement usually works better.

OK, your assignment is...

1. Update the code to the current version

2. Get licensed

3. Move the JS call block

4. Make the corrections to the calls

Assignment completed!


Poster: Davidk
Dated: Monday February 9 2004 - 9:25:04 GMT

Hi again,

First of all, thanks for all the help John. I think I've completed all my assignments!

1. The code is updated to the latest version (I have followed instructions here at the Forum, and as I understand it, it is the three js-files except menu_data.js that need to be updated)
2. I'm licensed
3. I've moved the JS call block, or more correctly the include command to the first line after <body>
4. I've made the corrections to the calls.

When I display it in Netscape 7.1 is works, although the menu still looks a bit screwed up, but that I of course have to work on with my configurations. However, I still can't get the menu to apper in IE.

http://www.davidkarlsson.se/ssi/index.shtml

// David


Poster: Ruth
Dated: Monday February 9 2004 - 10:04:20 GMT

I have IE and I can't either. I get a message, line 17 char 1 not implemented. I downloaded the page and subsituted my data.js file and it worked, so I looked at yours, and you have a top="106" no ; after it, so I fixed that, but it still didn't work, so next I just took it out since you also have that listed under the Main Menu. It worked fine in IE on my desktop when I did that. So try that and see if it works on the site.

Ruth

Brilliant!


Poster: Davidk
Dated: Monday February 9 2004 - 10:28:29 GMT

Thanks alot Ruth!

I took the first top="106" without the ; and now it's working fine! Amazing how a few characters can screw thins up immensly! Now it actually seems to be working just fine, thanks everyone for your help. If it should start to mess with me again, I'll be back!

Now I just have to figure out the positioning, it works fine in IE but in Netscape it's messed up, it's a few pixels of the mark. I try to have it centered, 106 from the top and with a 2 pixel offset from the left.

http://www.davidkarlsson.se/ssi/index.shtml

Take care,

David


Poster: John
Dated: Monday February 9 2004 - 14:11:51 GMT

Two small things. It looks like you got most of the syntax problems in your _data, but you quit at "Africa". You have...
Code:
aI("text=Overview;url=overview.html");

Should be...
Code:
aI("text=Overview;url=overview.html;");

Note the additional ; after .html.

Also, 5.0 Final was released this morning. Move on up!


Poster: Davidk
Dated: Monday February 9 2004 - 14:26:08 GMT

It seems that I'm missing the ; at several places, I'm assuming that it should be at the end of each .html in the following line before the ":

aI("text=Overview;url=overview.html;");

I guess I was a bit to quick to update :D I probably did it just before the final version was released! But, then again, it's not to hard to update it again. Any ideas on my positioning problems, or have I used up all my inquiry credits?

I really appreciate all help!

David


Poster: Ruth
Dated: Monday February 9 2004 - 15:25:31 GMT

Well, I use a table bound on one particular page on my site. If you have a template or since you are using ssi, I'd guess you can make a file to call in the particular place you want the main menu. Someone else would have to tell you about making that file, or if it's possible to call it like this, I don't know, but.... you'd take the Main Menu OUT! of the menu_data.js file and actually put it in the cell you have marked
Code:
<TR height=23><!-- empty window for dropdown menu by way of SSI -->
    <TD colSpan=3 height=23>
coded like this...I tried it on my computer and it works in netscape, ie, firebird, opera....
Code:
<TR height=23><!-- empty window for dropdown menu by way of SSI -->
    <TD colSpan=3 height=23><script language=javascript>with(milonic=new menuname("Main Menu")){
style=menuStyle;
itemwidth="100%";
position="relative";
alwaysvisible="1";
orientation="horizontal";
aI("text=Home;url=/ssi/index.shtml;status=Back To Home Page;");
aI("text=The&nbsp;Institute;showmenu=Institute;");
aI("text=Education;showmenu=Education;");
aI("text=Technical&nbsp;Cooperation;showmenu=Coop;");
aI("text=Research;showmenu=Research;");
aI("text=Publications;showmenu=Publications;");
aI("text=Seminar&nbsp;Series;showmenu=Seminar;");
aI("text=Library;url=library.html;");
}drawMenus();</script></TD></TR>


That will make sure it is always in that table cell and that it's 100% of it. The disadvantage is that you cannot set it to follow scroll...the advantage is many people dislike the menu coming down as they are trying to read. But, you could provide a small menu...made in the same data.js file that is always visible and it can follow down the left side of the page when they click it will take them back to the menu... [your margin would need to be about ?? 18 or so on that side so it wouldn't overlap your table. You'd insert another menu in the data file something like this
Code:
with(milonic=new menuname("back2top")){
style=menuStyle;
top=106;
left=2;
itemwidth=18;
alwaysvisible=1;
followscroll=1;
aI("text=MENU;padding=2;url=#top;");

}


Ruth


Poster: Davidk
Dated: Tuesday February 10 2004 - 8:41:58 GMT

Thanks again Ruth, I sure will give it a try, however, I really want to keep my follow scrolling menu. There must be some good way of getting the menu centered in both IE and Netscape. I know this is a widely debated topic and I realize that people might not want to repeat themselves, if that is the case, maybe I could just get a hint in which thread I might find a good answer.

I have my table centered and I'm using screenposition="center"; and left="offset=-2"; for the menu, which seems to put it in the middle in IE, but a few pixels of mark in Netspace. Also the top="106"; does not repond in the same way in IE and Netscape.

Sending the url again:

http://www.davidkarlsson.se/ssi/index.shtml

// David


Poster: Ruth
Dated: Tuesday February 10 2004 - 18:19:11 GMT

I think the problem has to do with the built in margins the various browsers set. There was a code I used in my body tag leftMargin=0 topMargin=0 MARGINHEIGHT=0 MARGINWIDTH=0 that used to make the margins the same on netscape and ie [0]. So, you might do that in your css, then you can play with how to get the table to have that nice empty space on all sides....maybe put a surrounding one cell table with equal padding or something. Anyway, I think that's why you have the differences because the browsers have different auto margins, didn't think of that before [too simple I guess, lol].

Ruth


Poster: fredlongworthhighschool
Dated: Wednesday February 11 2004 - 11:27:31 GMT

The way I've gotten around includes is when I create a site there are nothing but folders in the root. The three folders which are always there are:

JS
MAIN
IMAGES

...then subsequent folders for other parts of my site, such as NEWS, ABOUT, GAMES etc. Basically a folder for the main titles on my menu

JS folder contains all the JS menu files, a CSS style sheet and a file called INC.HTM which has just the menu calls.

MAIN contains my main default page

IMAGES contains images like ARROW.GIF that the menu uses.

Every time I then create a page, all I need to add is:

Code:
<link href="../js/colors.css" rel="stylesheet" type="text/css">
<!--#include file="../js/inc.htm" -->


I don't know if this is a universally accepted way of doing it, but it seems to work well for me. There is a uniformity is the ue of ../js/ on all pages.


Poster: Davidk
Dated: Wednesday February 11 2004 - 13:53:15 GMT

Thanks again Ruth! Now it's working fine, although I set top margin to 10, but both IE, Netscape and Opera seems to accept this. Excellent! Now I just have the small problem left of getting all of this to work in older verions of browsers. I'm running IE6.0, Netscape 7.1 and the latest version of Opera. Although, according to my friend it doesn't work at all in Communicator 4.8. I saw in an older message from you Ruth that you have:

"just info...I have 4.79 so I can test my pages...milonic.com works fine But I'm on a pc, not a mac."

...as you are already involved in my project (!) would you mind having a look in your 4.79 and see what happend and perhaps also tell me what's wrong!

David


Poster: Ruth
Dated: Wednesday February 11 2004 - 16:48:11 GMT

Ok, it doesn't work in my nn4.79...but I tested it on my computer and the problem seems to be this line
Code:
outfilter="randomdissolve(duration=0.3)";
If that is taken out it works. Now, I can't test it with the includes...well I could but it would take too long to find the info on how to do it again :lol: but if you take that line out of your menu_data.js file drop a note here when it's done, I'll try it again. I didn't change where the calls were on the page, so I guess they work in 4.79 even when they are in the body. Be aware though that the it definately doesn't look like it does in IE or the later browsers...The older one is static. The menu is up a bit from where it is in the others, but it's not too bad and it functions, and there aren't too many with older browsers.

Ruth


Poster: Davidk
Dated: Thursday February 12 2004 - 8:11:14 GMT

Thanks Ruth! I've taken the:

Code:
outfilter="randomdissolve(duration=0.3)";


...away now. I have two includes on the page The right-hand window, conatining a small picture of a building among other things, is also an include, so if it appears, the include command is probably working.

The reason I'm so anxious to get it to work at least fairly well in older browsers is that our Website is directed if not primarily - at least to a large extent - to countries where the Internet revolution perhaps not has reached as far as in other countries.

David


Poster: Ruth
Dated: Thursday February 12 2004 - 9:43:32 GMT

You're welcome, and I also make sure mine will function ok in older browsers. I was a teacher and there are still a lot of institutions, not just schools but many public institutions are still with old things like netscape 4.79 and that area. It's not as easy for you, but one thing I also have just in case is a totally text version of the site...since it's text it doesn't take much room at all. Many have written to say they like that option. I just do an entry page with some preferred links plus one to the first page, and then every page just has a next, back and home text link on it.

Ruth


Poster: Davidk
Dated: Monday February 16 2004 - 16:47:07 GMT

Back again! Now the menu seems to be working fine, it looks excellent in both IE and Opera, but Netscape 7.1 keeps causing a minor problem. On every other page the menu seems to be one pixel of it's alignment, however, i'm not sure whether or not the blame my menu or my html configurations. Url:

http://www.davidkarlsson.se/newindex.shtml

E.g., the 'the institute/board of trustees'-page and the 'the institute/work opportunities' are working fine, while in the 'the institute/charter' and 'the institute/policy paper', either the menu or my table is one pixel off line.

I'm puzzled!

David


Poster: Maz
Dated: Monday February 16 2004 - 18:06:45 GMT

Hi, I haven't followed this thread, so just taking a peek at your menu in safari, it is moving back and forth due to your left and right margin shrinking and enlarging. I also see about 10px white line to the right of your image and the black border around the page. So that might be why there is movement.

Your question concerns counting pixels, I don't know if its a temporary thing with this release or if its normal but I've noticed there is an extra pixel around text size then padding then border. Usually padding is what changes in different browsers, some render in width and some outside of width, I suggest looking at the layout problem first because that is where the movement is comming from.

Regards,
maz


Poster: Davidk
Dated: Tuesday February 17 2004 - 9:00:57 GMT

Thanks Maz, but I just can't figure out what's causing the movement, I've taken all the padding in my css-file away, it now looks like this:

Code:
body   { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: justify; margin: 10px 0px 0px }
p     { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: justify }
.small   { font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif }
td { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: justify }
.ongoing  { color: navy; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: justify }
h1   { font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif }
h2    { font-style: italic; font-weight: bolder; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif }
h3   { font-weight: bolder; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif }
a:link  { color: navy }
a:visited  { color: navy }
a:active  { color: navy }
.map { background-image: url(/images/map.jpg); background-repeat: no-repeat}
li       { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: justify }


All I have is a 10 px top margin while left and right body margin is set to 0 px. Parts ot the white line after my picture is my hspace set to 5 px and the other part was the padding, which is now taken away.

I know this is perhaps a bit more html than menu questions, but I need the help to get my menu to look good! I'm on the verge of just going for a table bound menu instead... but I want my follow scrolling!

Btw, I have updated to v. 5.02.

David


Poster: Maz
Dated: Tuesday February 17 2004 - 10:19:23 GMT

I'm too tired now to look into it, maybe in the morning.

You need your padding around the text, but it looks like you may have a td or something after the color. It might be colspan 2 not 3. It looks like an extra td throwing it off.



laterzzz
maz


Poster: Davidk
Dated: Tuesday February 17 2004 - 10:37:13 GMT

Hehe, I understand that you're tired, I'm quite a few hours ahead of you here in Sweden!

This is what my template-page looks like

Code:
<body bgcolor="#F4F4FA">
   <!--#include virtual="/includes/menu.html" -->
      <table width="702" align="center" border="0" cellspacing="0" cellpadding="0" style="border: 1px #000000 solid;" bgcolor="white">
         <tr>
            <!-- "top"-window with logo -->
            <td colspan="3"><img src="/images/top.gif" height="90" width="700"></td>
         </tr>
         <tr height="23">
            <!-- empty window for dropdown menu by way of SSI -->
            <td colspan="3" height="23"></td>
         </tr>
         <tr valign="top">
            <!-- "main"-window -->
            <td width="560"><br>
            <!-- insert text here -->
            <br>
            <P class="small">Page updated: <!--#echo var="LAST_MODIFIED" --></p>
            </td>
            <!-- vertical line -->
            <td bgcolor="black" width="1"><img src="/images/px_trans.gif" border="0"></td>
            <!-- "right"-window by way of SSI -->
            <td width="139"><!--#include virtual="/includes/right.html" --></td>
         </tr>
         <tr>
            <!-- "bottom"-window -->
            <td colspan="3" bgcolor="#6D8670">&nbsp</td>
         </tr>
      </table>
   </body>


The extra <td>s might be my vertical line, it's a 1 px wide <td> with a transparent picture and black background to create a black 1 px vertical line. So I think I need the colspan=3.

It seems that in both IE and Opera although the page is jumping slightly to right and left, the menu does the same, however, it wont to that in Netscape. My table is 702 px wide, but my <td>:S only amount to 700 px, that's because I have the

Code:
style="border: 1px #000000 solid;"


on my table, could this cause problems? I thought that the border added two pixels, that's why I have the table wider than the <td>s put together.

Jeez... this is starting to wear me down!

David


Poster: Maz
Dated: Tuesday February 17 2004 - 18:17:58 GMT

I took a look in Safari and Firebird, Firebird gets the width correct, but the last menu item still stretches on first load.

Try menuwidth="700px"; in the main menu style, above menu items.

Safari corrects itself on reload.

I tried w3 validator, css is okay, html could use some fixing, but I didn't see anything causing a problem, I don't see any reason for the </div> and </p> that are not open. But that's not it.

After adding 700px to menuwidth, try removing justify in the body tag to see if that is throwing it off. Actually it might make more sense to center the page in body and then justify everything.

I didn't get around to writing out the total pixel width, but since it does work on reload that's probably not it.

Regards,
maz


Poster: kevin3442
Dated: Wednesday February 18 2004 - 5:34:30 GMT

Hey David,

So... I've been to your site with both IE6 and NS7.1 in Win2k, playing with my handy-dandy little window resizer utility (free at this site by the way). I don't think what's happening has to do with individual pages so much as it has to do with how things are centering in each browser at different window widths. I've noticed the following:

In IE6. At 800x600, your content starts at left=36 and is 702px wide; you have 35px of white space to the left of your content, and 35px to the right. Menu and content are perfectly aligned. If you go from an even width to an odd one (say 800x600 to 801x600), then IE simply "adds" an extra pixel's worth of white space to the right side of the page (I know that's not what's really happening (the window simply resizes, but that's the perceptual effect... adding 1px to the right)... the upshot is that content and menu do not move, so that at 801x600, you have 35px of white space on the left, and 36px on the right. When you go the next step, from 801 to 802 wide, IE "adds" another vertical pixel of white space to the left, and both menu and content shift over 1px. Would that NS7 would behave the same... but that'd be asking too much, right?

In NS7. At 800x600, your content starts at left=38 and is 702px wide; you have 37px of white space to the left of your content, and 38px to the right. The menu, on the other hand, also 702px wide, starts at left=39, with 38px of white space to the left and 37px to the right. When you go to 801x600, NS7 adds an extra vertical pixel of white space to the left, shifting your content over by 1px, and the menu remains in the same place. Now everything lines up perfectly, with 38px on either side of both content and menu. Go to 802x600, and the extra pixel is added to the right; content remains in the same place, but the menu shifts over by 1px. So, in NS7, everything lines up as long as the window is an odd number of px wide.

I don't know if all of that made sense, but I guess it boils down to this generalization: In IE6, if the display area is an odd number of pixels wide, both menu and content favor the left side of center; i.e., they both remain in the same location as they would be if the display area was 1px narrower. In NS7, however, when the display area is an odd number of pixels wide, your content favors left of center, but the menu favors right of center; hence the 1px difference in their alignment.

I don't know if the behavior you see in NS7 results from the way NS7 centers things inherently, or if its the way the menu centers itself in NS7. Either way, Andy should be able to code around it pretty easily in the menu code (i.e, if it's NS7 and the available width is odd, subtract 1px from the left coordinate of the centered menu). Of course, that's easy for me to sit here and say, because I'm not the one who would have to make the change!

Meantime, I suppose there are some coding workarounds available to you. For example, you could implement an onresize event handler that sniffs the browser and if it's NS7 and the width is odd, then resize the window yourself to make it 1px narrower. Or, onresize if it's NS7 and the available width is odd (the window width is even), then reset the menu's position by 1px to the left. You could also call the same function onload, so that the adjustment is made if necessary when the page first loads.

Something else that might be worth a stab.... I used your site in my experiments. Everything there is an even number of px wide (702). Makes me wonder how the browsers might behave differently if you content and menu were an odd number of px wide. You might try changing things so that your content and menu are 703px wide and see what happens.

An interesting puzzle, but my ramblings are done. I'll stop back tomorrow to see if this still makes any sense. If you want to take a stab at the resize handler and you need help, I could probably lend a hand.

Kevin


Poster: Davidk
Dated: Wednesday February 18 2004 - 11:12:32 GMT

Hi Maz and Kevin,

Thanks alot, you're both really helpful! I've now tried I think everything you proposed. First of all I cleaned up both my css-file, and the two pages:

http://www.davidkarlsson.se/mall.shtml
http://www.davidkarlsson.se/newindex.shtml

which are the two pages I'm now trying everything on, using the W3 validitors.

- I tried menuwidth="700px"; - didn't help
- I have removed justify in the <body>-tag
- I didn't figure out how to center the page in my CSS-file, as I can't find an alignment command for <body>
- I've tried making the content and my menu 703px wide - it didn't help

Thus, I think that Kevin pinpointed the problem, it must be the resizing of the windows that causes the problem. It would of course be excellent if this could be fixed in the menu code (I'm a bit proud actually, it seems that I have presented a problem, which when Andy can find the time to fix, will actually improve the menu ;) ), but until then, if you would be so kind to help me Kevin, I'd really like to give the resize handler a go! I belive this will actually fix my problems!

David


Poster: kevin3442
Dated: Wednesday February 18 2004 - 20:32:43 GMT

Hi David,
Davidk wrote:
...if you would be so kind to help me Kevin, I'd really like to give the resize handler a go!...

OK... two choices:

//(1) You can LINK REMOVED and save it to the same place as your menu scripts. Then add the following line:
Code:
<script language="JavaScript" src="mm_recenter.js" type="text/javascript"></script>

into your html file, just below the line where you load your menu_data.js file. This choice requires you to add to your html, so unless you use includes, you'll end up editing every file. //

To avoid that, you could also:


(2) Copy and paste the code from the file (or from below) to the bottom of your menu_data.js code, just after the drawMenus() funciton call. The advantage there is that, presumably, all of your pages already load the menu_data.js file, so they will now load the re-centering functions too.

Here's the code:
Code:
/*****************************************************************************
Functions to re-center your Milonic "main menu" in NS7 (and potentially other
browsers) where screenposition="center" leaves the menu a little off center.

Note that this code will replace your onload and onresize handlers if you
already have some defined... so it may require a little tweaking on your
part to integrate with your existing code.

version:  1.0
date:     02/18/2004
by:       kevin3442
tested:   Milonic Menus v5.02
*****************************************************************************/

// User-setable parameters... EDIT THE FOLLOWING TO SUIT

// The name of your Main Menu is...
mm_mainMenuName = "Main Menu";

// The Browsers that bug you are... (browser1 | browser2 | browser3 ...)
mm_reCenter     = (ns7 | ns6) ? true : false;

// The number of pixels you want to bump the menu is... (negative numbers move it left)
mm_adjustBy     = -1

// The number of milliseconds you want to wait before adjusting the menu is...
// (a small delay is required, but won't really be noticable by the user)
mm_adjustDelay  = 100;

////////////////////////////////////////////////////////////////////
// DO NOT EDIT BELOW THIS LINE (unless you know what you're doing!)

window.onload   = function(){mm_recenter();}
window.onresize = function(){mm_recenter();}

function mm_recenter()
{
  if (mm_reCenter) {
    if ((getInnerWidth() % 2) == 0) {
      funcStr ="mm_setLeftPosition(mm_mainMenuName, mm_getLeftPosition(mm_mainMenuName)" + mm_adjustBy + ")";
      tID = setTimeout(funcStr, mm_adjustDelay);
    }
  }
}

function getInnerWidth()
{
  if (document.all) return document.body.offsetWidth;
  else return window.innerWidth;
}

function mm_setLeftPosition(menuName, left)
{
  spos(gmobj("menu" + getMenuByName(menuName)),null,left,null,null);
}

function mm_getLeftPosition(menuName)
{
  menuPosArr = gpos(gmobj("menu" + getMenuByName(menuName)));
  return menuPosArr[1];
}

All you have to do is set the four variables at the top. I think that they are currently set for your particular situation David, but holler if you need a hand. Let us know how it goes.

Kevin


Poster: Davidk
Dated: Thursday February 19 2004 - 12:52:28 GMT

Hi Kevin!

I'm feeling that I'm slowly approaching the end of this. I used the following option:

kevin3442 wrote:
(2) Copy and paste the code from the file (or from below) to the bottom of your menu_data.js code, just after the drawMenus() funciton call. The advantage there is that, presumably, all of your pages already load the menu_data.js file, so they will now load the re-centering functions too.


However, it's still not 100%, it doesn't always resize on 'onload', however, it always resizes it I click refresh.

Could it possible be that if I visit one page it will resize, and then when I visit another page it will again resize the already rezised window? I.e. causing it to again be one px off. However, as I mentioned, if I click refresh, it aligns perfectly.

Puh, almost there... and again, thanks for all the help. Here the url again:

http://www.davidkarlsson.se/newindex.shtml

David


Poster: kevin3442
Dated: Thursday February 19 2004 - 16:30:17 GMT

Hi David,

It actually doesn't resize anything. I took the "recenter" approach, which will adjust the position of the menu, rather than adjusting the size of the window. I figured that the window size is a user's choice but page layout is the designer's choice. The recentering approach modifies the page layout slightly, leaving the user's choice of window size alone.

Anyway, the approach treats each page anew, and each instance of a window resize anew. So, it wouldn't be a matter of recentering an already-recentered menu. I think it's more likely that the recentering function is running before the menu is completely done rendering and that somehow prevents the adjustment. That's just a hunch based on some behavior I observerd while working on the solution, and that's why I put in the mm_adjustDelay setting. The value you assign to mm_adjustDelay determines how long to wait before adjusting the position of the menu. 100 milliseconds worked OK in my tests, but that was all from my hard disk. You might want to increase the value until you get consistent performance, then increase it a little more for a buffer zone. The value is in milliseconds, so 100 is only a tenth of a second (bump it up to 2000 and reload the page, then you'll see what I mean... the menu will move to the left by 1px two seconds after the reload or resize, but only if it was in a bad spot to begin with).

Hope that helps,

Kevin


Poster: Davidk
Dated: Friday February 20 2004 - 12:48:02 GMT

Thanks again Kev!

When I changed the mm_adjustDelay it seems like it fixed the pages I though looked odd before, but now the pages that looked ok before, like:

http://www.davidkarlsson.se/institute/board.shtml

ailgns the menu 1 px to the left of the table! :oops:

Hrm... I will have a look at my html and get back, but it sure seems odd, doesn't it? Does the page above look ok in your Netscape?

D


Poster: Maz
Dated: Friday February 20 2004 - 16:54:37 GMT

I still think that your style sheet is influencing the menu.

test td{ text-align:center;} replacing justify.

It only goes off on first load then adjusts itself normally.

I have been using menualign=center & screenposition=center another thing to try in different browsers.

Regards,
maz


Poster: kevin3442
Dated: Friday February 20 2004 - 18:18:06 GMT

Davidk wrote:
...Does the page above look ok in your Netscape?

Yep (NS7.1/Win2k). Depending on the window size, the adjuster may or may not kick in. It only kicks in when the menu is to the right of the table, and then the menu adjusts 1px to the left, to the correct position. I can't get the menu to go to the left of the table at any window size. What specific browser/OS are you using?

Kevin


Poster: Davidk
Dated: Monday February 23 2004 - 13:14:33 GMT

Hi again!

I've added the menualign="center", but I don't understand why I would want the:

Quote:
test td{ text-align:center;} replacing justify.


I don't want the text centered, I want it justified, anything I'm misunderstanding?

Quote:
What specific browser/OS are you using?


I'm using NS7.1/WinXP

Two pages where I get the menu aligned 1 px to the left is:

http://www.davidkarlsson.se/misc/contact.shtml
http://www.davidkarlsson.se/misc/cookies.shtml

Amazing that just 1 px can keep messing with you :cry:

David


Poster: Davidk
Dated: Monday February 23 2004 - 15:00:51 GMT

Hrm, very strange indeed! I've now been playing around a bit and come to a strange conclusion. I used this page:

http://www.davidkarlsson.se/institute/work.shtml

which on my screen (NS7.1/WinXP) aligns the menu 1 px to the left of the table. I have the mm_adjustDelay set to 500, so I can see that the menu is perfectly align on onload, then it moves 1 px to the left (as we have indeed asked it to do with the resize handler).

However, after just adding a bunch of text to the very same page, the result is different. The new page:

http://www.davidkarlsson.se/institute/work2.shtml

aligns the menu 1 px to the right of the table (as we first anticipated) on onload and then by help of the resize handler aligns the menu perfectly with the table.

It thus seems that it all depends on how much text I have on a particular page, that the table width or alignment somehow is effected by this. I can't at all figure out why, but someone might help me with that.

Again, Kevin, Maz, Ruth and all - you rock! Thanks for all the help, I'm now slowly getting to where I want to be with my site! If I can just get this last pixel to agree with me!
David

Edit!!!

Now, on page:

http://www.davidkarlsson.se/institute/work3.shtml

I haven't even added text, just empty paragraphs:

Code:
<p>&nbsp</p>


and then it aligns as it should after resize. Hrm...

While "shorter" pages as:

http://www.davidkarlsson.se/misc/contact.shtml

still will align the menu 1 px to the left after resize...


Poster: Maz
Dated: Monday February 23 2004 - 16:17:48 GMT

This is a bit of a guessing game ;)

You were puzzled about replacing justfy, but did you test it?
The reason I ask is because the body tag can influence the menu, I don't know what justify does to the menu position, the only way to find out is to try removing it and see what happens.

Thanks,
maz


Poster: Davidk
Dated: Monday February 23 2004 - 16:28:30 GMT

Hi Maz!

Yupp, for a long time I tried with any "justify" in any tag in my css, but it unfortunately didn't help. It seems to be a problem of "long" and "short" pages, I know it sounds ridiculous, and it is probably not the correct "title" of the problem, but indeed, if I make the pages "longer" it works!

Guessing game - you bet ya! :lol:

David


Poster: Maz
Dated: Monday February 23 2004 - 16:53:53 GMT

Some details:

Take the quotes off padding "5" to padding=5; same with top=
followscroll= and alwaysvisible=

maz


Poster: Davidk
Dated: Monday February 23 2004 - 17:05:04 GMT

maz wrote:
Some details:

Take the quotes off padding "5" to padding=5; same with top=
followscroll= and alwaysvisible=

maz


Done! Thanks Maz! It didn't change anything that I can see right now, but then again, my knowledge is limited, and it sure is better to clean everything up before than after the Website is finally published! :)

D