Interesting IE6 JavaScript Problem?

Ranch Hand

Posts: 823

posted 18 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi folks,

I've been asked to include a floating menu on a client's website and have adapted an old script I found.

My problem is that, in IE6 and Netscape 6, the menu does not float when the page is scrolled. However, in IE5.x and Opera 7 it works fine. To add to the mix, when I tried to simplify the XHTML page to use in this posting, the simplified example fixed the problem.

I've already overspent significantly on this project and would appreciate it if anyone can shed any light on the probable cause of this problem, or if anyone has an academic interest in solving it via the usual arduous method...

The script is as shown below:

The URL of the test site that uses this code is http://www.yourworkplace.co.uk/test/new/v5/.

I call it with <body onload="floatMenu('menuPanel',130)">, where menuPanel is the name of a div with position: absolute;

Any help would be greatly appreciated!

Cheers,

Jules

P.S. The simplified HTML page that works is as follows:

<html>
<head>
  <style type="text/css">
    body         { margin: 0; padding: 0; background-color: white; }
    #page        { width: 700px; background-color: pink; }
    #header      { width: 700px; height: 130px; background-color: blue; clear: both; }
    #content     { width: 700px; height: 1000px; background-color: red; position: relative; }
    #right-panel { width: 200px; height: 1000px; background-color: yellow; float: right; }
    #page-body   { width: 377px; height: 1000px; margin: 0 200px 0 120px; background-color: lightgreen; }
    #footer      { width: 700px; height: 100px; background-color: brown; clear: both; }
    /* Menu Panel */
    #menuPanel   { width: 120px; background-color: lightblue; position: absolute; left: 0; top: 130px; }
    #menuPanel a { width: 100%; display: block; }
</style>
<script type="text/javascript" src="scripts/wpc-master.js"></script>
</head>
<body onload="floatMenu('menuPanel',130)">
<div id="page">
  <div id="header"></div> 
  <div id="content"> 
    <div id="right-panel"></div>
    <div id="page-body"></div>
  </div>
  <div id="footer"></div>
  <div id="menuPanel"> 
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
    <a href="#">Option 4</a>
    <a href="#">Option 5</a>
  </div>
</div>
</body>
</html>

Note that the above simplification uses fixed pixel sizes whereas the actual page design is liquid.
[ August 03, 2004: Message edited by: Eric Pascarello ]

Eric Pascarello

author

Posts: 15385

posted 18 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Take a look at this script and how they do the floating menu...

http://dynamicdrive.com/dynamicindex1/staticmenu.htm

Eric

JulianInactive KennedyInactive

Ranch Hand

Posts: 823

posted 18 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi Eric,

Thanks for your reply. That's actually the script that I used as inspiration for my (clearly flawed) attempt. I want the script to be entirely contained in an external script file. Do you think that may be the cause of my problem? Then again, if that were the case, why would it work at all (even in the simplified version)?

I'm not concerned about support for browsers going back as far as NN4. IMO any remaining users should be dragged kicking and screaming into the 21st century where we have standards (at least of a sort!) :-)

Do you have any further thoughts?

Jules

JulianInactive KennedyInactive

Ranch Hand

Posts: 823

posted 18 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Fang from the Webdeveloper.com forum has just pointed me to this sticky menu script.

I haven't used the script itself but it contains the solution to the IE6 problem, i.e. use document.documentElement.scrollTop instead of document.body.scrollTop. My script still doesn't work with NN6, but I can live with that. Any further pointers appreciated, however.

The new code is as follows:

Thanks for your efforts.

Jules

Eric Pascarello

author

Posts: 15385

posted 18 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I forgot about that....

lol

When IE6 is in compliance mode, you need to adjust that property...lol...I forgot about that.

I promise I will be the best, most loyal friend ever! All for this tiny ad:

The Low Tech Laboratory Movie Kickstarter is LIVE NOW!

https://www.kickstarter.com/projects/paulwheaton/low-tech