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 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    problem with firefox 4 trackpad scrolling on macbook pro.

    I am having lots of trouble with the layout of my site. Before you all jump on top of me for building an amateurish site, I have done it to the best of my knowledge. It is a centered layout with a fixed left column and the right column is an image section that has to scroll vertically, hiding under the header. The image area is defined by the following:

    Code:
    #imageswrap {
    	width: 589px;
    	padding-top:110px;
    	padding-left:401px;
    	height:100%;
    	z-index:-10;
    }
    within a container

    Code:
    #container {
    	position:relative;
    	width: 989px;
    	padding: 0px 20px 20px 20px;
    	margin: 0 auto;
    }
    The problem comes when I resize the browser to less than the width of the site. The image area starts to dance around below the fixed elements when controlled with the trackpad but this seems to happen only in firefox 4 and and when double finger scrolling on the trackpad. In the body I have declared

    Code:
    body {
    overflow-x:hidden;
    	}
    and this seems to do the trick on most browsers (haven't tried explorer) and it gets rid of the horizontal scrolling bars but it for anyone on firefox 4 on a mac laptop (which will be a lot of the audience of this site) it ruins the layout. Is there any way around this? Why is this happening to me??

    You can find a working example here

    http://test.venndiagram.eu/backbuttontest.html

    and the stylesheet (ignore the stuff that doesn't apply here)

    http://test.venndiagram.eu/murraycss-test.css

  • #2
    Regular Coder jdswebservice's Avatar
    Join Date
    Aug 2010
    Location
    Moon Township, PA
    Posts
    107
    Thanks
    0
    Thanked 5 Times in 5 Posts
    The reason you're encountering this problem is because you have fixed widths that are in my opinion too big. I'm assuming you're creating the site on a 1024x768px resolution screen. You should be making the WHOLE site centered and NEVER bigger then 800px wide. This will get rid of your problem right away.

    Novice mistake, not a huge deal. Some code you might be interested in:

    Way to make div box at the very TOP of the page and not have a padding or margin:
    Code:
    body {
    margin: 0;
    padding: 0;
    }
    Center a "MAIN" div box on all browsers:
    Code:
    #main {
    margin: 0 auto;
    }
    Hopefully this will help.

    Thanks,
    J-

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi jdswebservice, my website is already centred in a container. I am now also encountering this issue in another one of my sites too which isn't centred.

    I have spent hours trying to google this issue and very few people seem to have talked about it mainly though this guy who describes a very similiar problem but with a horizontal overflow and he seems to have solved it.

    http://stackoverflow.com/questions/5...ior-inside-div

    Can someone help me apply his solution to my situation?


  •  

    Posting Permissions

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