Question

Heeey so I have a problem (of course). I have a basic php site (php part not important) that uses Jquery FancyBox2. I’m just about to demo the alpha version of site to the contractor, but I have one snag. When a FancyBox2 Jquery is executed, in Firefox 13 (and only Firefox, not the most recent versions of IE, Opera, or Chrome) the box pops up fine, but the corresponding entire parent document y-scroll bar pops up, and shifts the whole site off by like left:-10 px, and when you close the FancyBox2 instance it shifts back to normal. No other browser seems to shift the sites content when the blank y-scroll bar comes up with a FancyBox2 instance. I’d like to not have this happen? Here’s some basic code:

CSS: yes, it’s a bit overloaded, ignore the faults and focus on the issue at hand, alpha stage of both backend and design.

body
{
font-family:            'Goudy Bookletter 1911', serif;
overflow-x:             hidden;
text-align:             center;
horizontal-align:       baseline;
color:                  #4D60A4;
}
#site_container
{
-moz-user-select:       -moz-none;          /* disable div selection */
-khtml-user-select:     none;
-webkit-user-select:    none;
-o-user-select:         none:
user-select:            none;
zoom:                   1;                  /* for ie6 */
background-image:       url('http://192.168.254.134:8080/images/main_back6.jpg');
background-repeat:      no-repeat;
background-size:        cover;
width:                  980px;
min-height:             780px;
text-align:             left;
height:                 100%;
left:                   50%;
padding:                0px;
border:                 0px solid #0000FF;
overflow:               hidden;
margin:                 0px auto;
margin-top:             -50px;
}

php: example of how FancyBox2 is called in this site.

echo "<a class='fancybox' href='" . $row['image1'] . "'>";
echo "<img src='" . $row['image1'] . "' width=200 height=200 /></a>";

js: how i call FancyBox2

$(document).ready(function(){
    ...
    $(".fancybox").fancybox();
    ...
});

Answer 1

OOOkay, got it. I’m more of a backend guy, not a design guy. Just had to add this to the css:

body
{
...
overflow-x: hidden;
overflow: scroll;
...
}

and that fixed it. Wonder why only firefox needed that hierarchical fix? Is overflow: scroll css3? anyways, nevermind.