homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

Problem with local anchors (#), page does not scroll anymore

 9:26 pm on Dec 4, 2009 (gmt 0)

I dont know why but if a link with #something or only # is clicked on my page, the page moves to the appropriate destinations and fixes there. No scroling. and no possible movement of the page at all in any direction.. I have never been thru anything like this before but i assume there must be something very common that i am missing... any ideas... i cannot post the code because it is a full-fledge php page with about 500 lines.. and would look quite horrible here...



 2:08 am on Dec 5, 2009 (gmt 0)

First, does it do this only on the page in question? What I am asking if it happens on any other web site. Likely not, but to eliminate a problem with your browser.

Second, happens in multiple browsers?

Only on ID'ed anchors? Other links OK, or is it just when you go to this page?

Strange . . . sounds like the entire page has overflow:hidden? Is that possible somehow? OR maybe some Javascript messing up the works?

First stop is always to validate the page [validator.w3.org].


 5:53 pm on Dec 5, 2009 (gmt 0)

okkk my mistake i should have told this before with the question onle.. sorry.
Well it does not happen on any other website and is common for every browser (atleast ff ie chrome).

well yes could i do use JS as it shows a popup window plus a # to take user to top of page.. so that the div is visible...

and only happens on the specific page... but i really dont think JS would be a reason because it is very simple function. see below and i use very same thing on other pages and it works without any problem.

function showInsertSms() {
document.getElementById('insertSms').style.display = "block";

and i not really follow w3 validation... i know many people who follow validation but i check i have 57 errors and 28 warnings.. so i suppose this is going to take a while....

and yes my outer most container has a overflow hidden because ie 6 and 7 show some awful grayed-out scroll bars around my page but again it is in an include and other pages don't have any such problem so overflow hidden shouldn't be a prob...


are the w3 people wrong to say 'Attribute "HREF" is not a valid attribute. Did you mean "href"'
like both are one and the same thing... deamweaver made most of my links and it has, dont know why, made all the href's uppercase.. i really cant change every instance of href on my page...
same is for meta it says META is wrong... does that matter anyways?


 8:03 pm on Dec 5, 2009 (gmt 0)

Well, a few things that **might** help . . .

well yes could i do use JS

I wasn't suggesting to "fix" it with Javascript, only that it might be some Javascript interfering with your page.
i really dont think JS would be a reason

Agreed, I think it might be the overflow:hidden, but in combination with setting the div to display:block, it may expand beyond the container, and since it's hiding any overflow, no scrollbars and possible hiding vital content.

As a test, try removing overflow:hidden, see if it "works." If it does, find some other way to do it than overflow:hidden, maybe?

One way to avoid overflow:hidden is to create an outer container that you would set width on and margin:auto to center. Then inside that container create a left-floated inner container. Float all the inner container's children also, this causes the inner floated container to "shrink wrap" the children, and may allow you to avoid overflow:hidden.

i check i have 57 errors and 28 warnings.. so i suppose this is going to take a while....

Not as long as you think. What usually happens is one error cascades down to the next . . . or it's a series of the same problem, such as . . .

are the w3 people wrong to say 'Attribute "HREF" is not a valid attribute. Did you mean "href"'

What this tells me is you are most likely using an XHTML doctype, and all attributes should be in lower case. That's all it's saying! You should be able to fix this with a quick search and replace in DW. DW should have a setting somewhere to modify how it creates the attributes, UC or LC.

does that matter anyways?

There are two really good reasons why validating is important. The instances you've mentioned - no, I doubt it's a "problem." But overall, what validation does is move you from Quirks Mode into Standards Compliance mode. Many CSS selectors will fail in Quirks mode, and you will have more cross-browser issues. By bringing it into Standards Compliance Mode, you move one step closer to cross browser compatibility - you will find you'll have to do fewer "hacks" to get it to look the same in all browsers.

The second reason it's important - and probably relevant here - is it reveals any possible coding errors and eliminates them as possible causes for the problems. For example, if you have broken (X)HTML, such as a missing closing tag or something, this can cause Javascript to fail (which is not likely the case, but broken coding can cause weird effects like you're seeing.)

True, you have to get past a lot of trivial stuff to get a green light on validation, but it's a good first step to get at the true root of the problem and has many other positive benefits . . . it's worth the trouble. :-)


 9:02 pm on Dec 5, 2009 (gmt 0)

hmm you were right i already got fixed some 26 of those... yepeee!

coming to the question.
What surprises me now is that overflow was really not the problem... it was my popup-div's styles have a look

#content-popup {
position: absolute;
margin:0 auto;
z-index: 2001;
border: 1px solid #000;

the problem exists when the float none is not there or when a width is given to the div... or if the position is fixed... earlier i had definate width to the div and it stuck the scrollbars...now it is ok (in multiple browsers) but i really need the width coz it looks bad this way...
The overflow was not really the prob. was it? i am still not sure as it is also possible that float none and auto width somehow cancel the overflow effect and make it behave 'normal'. I learnt html css and php all by myself and no traning or coatching. so i may know many things but only which i'v needed to learn not what i'm suppose to learn like this very case a very basic overflow prob but i had no idea about it.


 9:29 pm on Dec 5, 2009 (gmt 0)

I can't tell by what's there, and there are far better CSS experts here. I know you can't post the whole page, but maybe you can do this:

Get the page on screen, view source.

Eliminate all the identifying text, set all links to example.com

Reduce the page code to just the bare minimum that demonstrates the problem. Post the relevant html and CSS code here.

Someone will surely be able to help with that.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved