View Full Version : window.scrollTo completely screws up layout in IE

12-18-2006, 09:28 AM

Wondering if anyone can offer a suggestion to resolve an IE problem. I can't find anything similar on any other threads.


The bottom level menu "MAIN COURSES" contains "javascript:window.scrollTo(0,x)" links for the individual food items.

Black Bean Sauce
Marinated Tofu Stir-Fry
Dressed Ribbon Noodles

In other browsers, clicking on these links works correctly, and the page scrolls to the correct position, but in IE the scrolling causes both the page text and sidebar/menus (and even the window's scrollbar) to jump vertically up over the header or even (if the bottom link is clicked) off beyond the top of the page.
The body background and header remain fixed in place throughout.

Absolutely stumped on this one - any help would be gratefully appreciated.

To be honest, I only need this to work in IE - I already have a far more elegant working solution for other browsers at:

but have decided to rewrite the page for IE as after weeks of tweaking and modification I couldn't get that original version working in IE either.

Thanks in advance...

12-18-2006, 10:36 AM
Could you not just use a link to an id to get those links to move to the correct point on the page? IE: creating an id with a specific name and on those links use (I think) <a href="#theidname"></a>

12-18-2006, 12:37 PM
Thanks for the suggestion...

Your signature: "write it for FireFox then hack it for IE." is exactly what I've done but I can't hack it cleanly!

Yes, the #idname method is indeed one way to go, but because of my fixed page header, the links would need to be put in the "wrong" place (a few lines before the actual point in the document we want to link to) to ensure the correct position appears immediately under the header.

This not only requires guesswork as to the exact positioning, but also requires additional links to be put into all the text content.

The menu links are currently populated by a javascript routine which detects all occurrences of a particular tag (in this case h6 tags) and creates the menu from the positions of those tags within the document. By using scrollTo(0,x) and taking off a number of pixels to compensate for the header, this is a much "cleaner" way to do the job. Unfortunately IE doesn't like it!

So ideally instead of doing the "dirty" fix I'd like to find a way to get IE to support the scrollTo command. After all, scrollTo is standard javascript - there must just be a little something I've missed.

I assume it's a css tweak needed somewhere to keep the rest of the page fixed/relative to the header and background while the content itself will scroll. Of course, as it already works fine in firefox obviously just an IE bug.

12-18-2006, 02:47 PM
Have you floated your page elements? It seems that the content has not been floated therefore is being place on top of the header section. As for that scroll bar that appears on the right, I have not got a clue!

And a question for you... how did you get the smooth scroll? And once you figure it out can I use it please :D

12-19-2006, 01:34 AM
Happy to share techniques - but need to get it working first.

Anybody have any ideas?

12-30-2006, 02:32 PM
This has become my worst nightmare....

I've modified the menu-creating routine so it now references anchors placed in the page as suggested before. Despite what I said in a post before, I've had to place the anchors in the "wrong" positions within the content so the page scrolling isn't hidden behind the header. But when these links are clicked the entire page including sidebar still scrolls up in IE.

Again, it works fine in Firefox, although that's irrelevant as these pages are for IE only.

Please, please can somebody help with this....this site was meant to be online 2 months ago, the client is furious, another web designer who offered help says he has no idea how to fix it, and I am completely out of ideas and stuck. I have absolutely no idea what else to try.

The page coded to the current spec is:
(other linked pages are still old versions so obviously won't work)

The page validates fine, there are a number of css validation warnings but only to do with background colour setting.

Thank you someone - if you have ANY ideas, anything at all, please help...

01-02-2007, 11:54 AM
Anyone with ANY ideas?

The page verifies fine. 2 designer friends have looked at the code and can't suggest any fixes - they've both said "it SHOULD work". Which doesn't really help. Client is now talking about going to another designer, and witholding all payment for my weeks of design and development work.

I'm sure this must just be a small CSS tweak needed somewhere....but have no idea where to start looking anymore. Any advice from any kind forum members? Please?

02-15-2007, 02:54 PM
Hopefully you've come across a solution? If not too late, maybe these "madmac" threads have clues to offer:
Firefox, overflow: hidden, anchor tags, big trouble? (http://www.webmasterworld.com/forum83/8516.htm): (Feb 2006)

I'm a very novice HTML/javascripter who only recently became exposed to cross-browser problems, as I had only been website-designing within IE alone. Attending to the "repairs" of very-visible problems in other browsers was quite an eye-opening experience! IE must tolerate a good deal more of non-optimal coding relative to other browsers, but I finally managed a compatible design for IE (6.0) and Firefox (2.0) (...still attending to Opera and Netscape...)

I didn't realize how sloppy my only-apparently-under-IE-"clean" HTML/javescript was until I downloaded FF, installed and loaded my code.

OOO-weee! What a shock!

I started "slugging it out"...learning on the fly...amazing.

Anyway, hope you got a solution in time for your project!

02-15-2007, 04:24 PM
Goodmorning pavinder,
I'll mess around with this a bit today. This page is in the late stages of development and debugging now is a little complicated for someone new just stepping in. It's hard for me to edit for IE6 as I have to walk down the hall to look at it on my wifes computer, this machine only has IE7 and FF2.
I guess I'm saying don't get your hopes up.

Anyway, I'm sure you already know this, but IE7 and FF2 both have the scrolling text of #content going under the header.
This bit bit fixes that:

div#content {
padding:0 10px;
/* margin-left:236px; /* outside 50 + side bar 166 + inside padding 20*/ /* pavi removed */
/* margin-left: 20px; see ie6.css */
position: absolute; top: 90px; left:236px; width: 584px; /* pavi's addition */