Quote:
Originally Posted by Hennessey
So I'm taking over a couple websites for a student job at my college and I'm trying to fix some of the problems with the site. I plan on redoing this menu completely in the future but for now I just want to fix it. So one of the sites has a problem with the menu moving left and right when the browser is resized,it resets if you refresh the page but I'm at a loss on how to fix it. I'm sure it probably has to do with the css and positioning but so far I've been unable to figure it out.
The site is:
http://www.starnet.org
heres a link to the css page that controls the menus. It wouldn't let me post the code for some reason.
http://starnet.org/scripts/stylesheet.css
Any advice or pointers would be greatly appreciated!
Thanks |
It's a javascript-generated menu that uses position:absolute; but without a position:relative; parent/container so when the javascript runs and inserts the menu, it does so relative to the browser's inner viewport which is why the menu "moves" (pay attention and you'll see that it actually stands quite still while everything else really moves on resize). It looks like it has an onresize function that is supposed to fire to rebuild the menu, but it isn't functioning:
Code:
//We also need to "re place" the menu on resize. So:
oCMenu.onresize="pos = findPos(); oCMenu.fromLeft=pos[0]; oCMenu.fromTop=pos[1]"
For a quick fix you need to either get the onresize function working again, or you need to get the menu to be inserted into a container that uses position:relative; instead of just having it inserted into the <body> element.
Try this to get the onresize function to work again (line 42 of
http://www.starnet.org/scripts/nav.js):
Code:
//We also need to "re place" the menu on resize. So:
oCMenu.onresize=function(){pos = findPos(); oCMenu.fromLeft=pos[0]; oCMenu.fromTop=pos[1]};
I haven't tested that at all but it might work. If not, then I really wouldn't invest much more time into hacking it into submission.
That's quite an ugly, ugly little menu script (last updated in 2002, according to the comments).
If you want the fastest possible fix, and one that will make you look like a completely lazy sack to anyone who follows you to check your work, you can beat this page into submission by adding this to your CSS:
Code:
body{width:768px;margin:0 auto !important;position:relative;}
However, since the menu does nothing more than allow for drop-down submenus, and since you probably don't want your work to reflect poorly on you, I would recommend you recode this menu with pure HTML/CSS, skip the hack CSS above, and leave the javascript out of the process entirely. It would be far better to spend the extra 15 minutes on HTML and CSS than on repairing a dead script you will never use again, or on spending 10 seconds using an ugly little CSS hack to make the menu work.
If you want help rebuilding the menu with HTML/CSS then please post back with some specific questions and with whatever code you have worked up so far.
Before you post, read our: 
