Home/ Questions/Q 9166641
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T15:11:52+00:00

My test site: rockitmembers.us Site is WordPress.org, not using a plugin. Code inside header.php

  • 0

My test site: rockitmembers.us

Site is WordPress.org, not using a plugin.

Code inside header.php is:

<link rel="stylesheet" href="http://www.rockitmembers.us/wp-content/themes/acosmin-v3/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />

This code in footer.php:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.rockitmembers.us/wp-content/themes/acosmin-v3/fancybox/source/jquery.fancybox.pack.js"></script>
    <script>
    $(document).ready(function() {
    $(".iframe").fancybox({
       fitToView : false,
       autoSize : false,
       scrolling : 'no',
    maxWidth        : 820,
    maxHeight       : 600,
    width           : 800,
    height          : 600,
    type            : 'iframe'
        });
    });
    </script>

And this code in my wordpress post for the BUY A LICENSE button:

<a href="http://www.rockitmembers.us/fancyboxtest.html" class="iframe rollover"><span class="displace">Buy A Beat</span></a>

Click the BUY A LICENSE button on the first post (My Reflection). Fancybox functions fine except it adds a 17px margin-right to fancybox-lock which messes up the look of the background, I think it’s pushing the scroll bar out? I’m not sure. When you inspect it in Chrome it adds <body class="fancybox-lock" style="margin-right: 17px;"> when the buy a license button is clicked.

I tried the suggestion in this post Jquery Fancybox 2 adds a margin-right? by editing jquery.fancybox.css and taking out overflow-y: scroll; but that still didn’t fix the problem.

Any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It looks like it really has nothing to do with Fancybox. Looking at your implementation, it looks like your hard-coded widths on the “detail” sections in each <ul> are pushing the edge of the Fancybox over. You should be able to eliminate most of the floats in cartstyles.css, and then you don’t need to specify widths on those elements.

    EDIT: I don’t recommend doing this as a habit, but if the only complaint is the extra margin, try adding this rule to your stylesheet:

    .fancybox-lock{
    margin-right:0 !important;
}

    !important overrides the normal cascade, and would allow you to override the inline style applied by Fancybox. It would just be masking whatever the real issue is, though.

    • 0