I've run into a very weird issue with anchor/jump links. The client wanted links at the top to jump people down the page to the particular heading. So I wrote a bit of JS to grab the headings, create a list of links at the top, and put the appropriate tags before the appropriate headings.
The only problem is, when I click the link to jump down the page, and scroll back up, the h1 has shifted up. I've tried everything I can think of to fix it and nothing works. The same thing happens in both Firefox and Safari, but not in IE. Did I miss something obvious? It seems unlikely, given that it's doing the same thing in both, but do you think it could be a bug in Firefox and Safari?
Here's the URL: http://www.oldsproducts.com/olds-products
User: csscreator
Pass: csscreator
Any help would be greatly appreciated. Thank you!
I don't know why this is
I don't know why this is happening either, but I was able to fix it (in Firebug anyway) by removing overflow: hidden from #content and .limiter. Changing this doesn't seem to break anything.
It does seem unlikely that both Fx and Safari would suffer from an identical bug (particularly given that they use different layout engines), but I guess it's possible. It works fine in Opera. Any further insight appreciated by me too.
cool design
Hey I love the design especially the turned up corner on the header. (sorry can't help you with the code) The one thing I am confused about is how are these two companies related?
Late reply
Sorry for the late reply, I actually forgot I'd posted for help here, and just remembered now.
Thanks for fixing it! If anyone knows why it does that I'd love to know.
As far as the companies, it's a little weird. Olds Products is a company that makes products under the Olds Products brand, as well as the Fiztpatrick Bros. brand. Like I said, it's weird.
Much thanks to everyone who took a stab at the problem, I really appreciate it.
Solution?
What was the solution to this issue? I am having the same problem myself now.
Thanks,
The solution was to remove
The solution was to remove overflow: hidden from the list's containing elements.
Big caveat: Inspecting in Firebug post error showed the title had moved up and was partially obscured by the containing div. This was why I removed overflow: hidden originally (so I could see what was happening more clearly) and it fixed the problem. But I don't know why this worked, and it may not work for you. This also assumes (of course) that you have overflow: hidden applied to containing elements and that you don't actually need this rule.
If you do find out any more about the cause of this behaviour, please let me know.
jump links (anchor) firefox bug, confirmation
I have the problem too. FF jumps to the right place on the page but only scrolls the element inside the container div that has overflow:hidden. Sadly my current layout relies on the overflow to keep the design right ... I'm using 3.0.12 on kubuntu (9.04, jaunty) but seems to be the same in other FF too. Op and Konq do it the way I was expecting, they scroll the whole page.
I see the same behaviour (scrolling the contained element and not the page) in Saf 3 (under WINE), Chrome 2.0.172.37 (vbox WinXP) and IE8 (vbox WinXP). Hmm.
This would be a problem in the other direction if you were using a non-scrolling div with overflow to hide other "pages" that you bring in to view ... pants, I'm going to have to recode my page now!