SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fancybox Pushes Content of Website to the Right

    I have been going a little crazy trying to correct a very strange behavior with FancyBox. I am using it on a handful of pages in a website. It is being used with a combination of images and type. When I go to the page where I have FancyBox, everything on the page get pushed over about 20 px. I have tried everything to correct it and just can't find the problem. I have Googled the problem but can't seem to find a solution. Here is the url for the page that has Fancybox on it: http://www.northernlightsmusic.org/s..._practice.html. If you click on Program Details you will see how the page shifts over. Any help would be appreciated. This is the first time I've used Fancybox. I've used Lightbox in the past with no problems when I've just been using images. Thanks in advance.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi Sharon_F. Welcome to the forums.

    You have quite a few HTML errors that are breaking your page, so make sure to clean them up first. E.g.

    http://validator.w3.org/check?uri=ht...Inline&group=0

  3. #3
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. HTML has now been validated on http://www.northernlightsmusic.org/s..._practice.html and the Costs link page. But if you click between the two the page with fancybox still pushes to the right.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,354
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The problem is that you are setting the body to max-width:700px; in the fancybox page.

    Code:
    body {
        font-family: Arial,Helvetica,sans-serif;
        font-size: 12px;
        margin: 0 auto;
        max-width: 700px;
    }
    Therefore anything over 700px is ignored which is why the page looks off centred because the content flows out by 100px on one side.

    Remove the max-width:700px and the page should straighten out.

  5. #5
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, Paul. It works perfectly now! Also, thank you, ralph, for taking me to task about my html. Sometimes when I am in a hurry I do so much cutting and pasting that I end up with really bad code.


Bookmarks

Posting Permissions

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