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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Mar 2005
    Posts
    115
    Thanks
    3
    Thanked 0 Times in 0 Posts

    window.scrollTo completely screws up layout in IE

    Hi,

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

    http://www.theshamanskitchen.com/ie/recipes.main2.php

    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:
    http://www.theshamanskitchen.com/recipes.main2.php

    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...
    Last edited by pavinder; 12-18-2006 at 09:32 AM.

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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>
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    Regular Coder
    Join Date
    Mar 2005
    Posts
    115
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.
    Last edited by pavinder; 12-18-2006 at 01:54 PM.

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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
    Last edited by ahallicks; 12-18-2006 at 03:07 PM.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #5
    Regular Coder
    Join Date
    Mar 2005
    Posts
    115
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Happy to share techniques - but need to get it working first.

    Anybody have any ideas?

  • #6
    Regular Coder
    Join Date
    Mar 2005
    Posts
    115
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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:
    http://www.theshamanskitchen.com/brie/recipes.break.php
    (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...
    Last edited by pavinder; 12-30-2006 at 02:56 PM.

  • #7
    Regular Coder
    Join Date
    Mar 2005
    Posts
    115
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #8
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    : (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!

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    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:
    Code:
    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  */
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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