Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Menu moves when browser is resized

    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

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Hennessey View Post
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •