Question

I’m facing a problem that’s really strange. It’s in every browser.

Everything is working correctly, until you try to go to a section using the hash ( like #contactUs in my page)… try this url : http://mahersalam.co.cc/projects/2011/#contactUs

You will see that the page SHIFTS 10px to the top. if you take off the hash, it works again.

I have a wrapper on the page (#container) that has overflow:hidden, I did it to make sure no scroll bars appear if the resolution change. If you remove the overflow property it works too.

I guess the shifting happens through the place of the scroll bar, but because it’s hidden it’s place only stays.

So does anyone knows how to fix this problem ?

Edit :

I found the solution and I wrote it down in the anwsers.

Answer 1

The solution was to remove the height:100% from the .rightCol and .leftCol .

I guess that these sections were overflowing because of the height property.