Why does my whole site scroll even if I have set overflow to be hidden in the css stylesheet?

badwolfff
badwolfff used Ask the Experts™
on
Please visit this page using Firefox
http://www.absolutproject.com/gruppoovermarine/overmarine
If you have a look at the css stylesheet the body, html and the div #overmarine (which contains all the site's elements) you will see that they are all set to
overflow: hidden !important;

However not only on Firefox but also on iOS devices (ipad, iphone etc) I see the site not behaving properly (the div overmarine is not 100%) and for some reason I also see elements that are outside the screen. Also when I use the arrow buttons when using firefox the whole site shifts left/right

Could someone please point out where I might be going wrong and how I might go about fixing it?

thanks so much in advance
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
LZ1
Top Expert 2011

Commented:
I don't have any iOS devices, however on FF 6 and Windows 7 and did not see any scroll bars. Checked in IE 9 with and without compatibility.  Still no scroll bars.
badwolfff

Author

Commented:
Not scrollbars.
If you click on the background or any other element in firefox then use the arrows on the keyboard the whole site moves left/right.

On iOS devices the sites container div "overmarine" is not 100% in width and height and elements beyond this div (hidden outside the screen) are visible.
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial