Fancybox - Image is overflowing off right side of lightbox

Question

Looks like this question has been asked before, here, but the asker solved his own question by switching to prettyPhoto. I\'d prefer to figure out why this is happening, jus

Answer 1

In your style.css file you have the famous box-sizing css rule

* {
    -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
      -o-box-sizing: border-box;
     -ms-box-sizing: border-box;
         box-sizing: border-box;
}

which seems to be messing the (old version of) fancybox layout : DEMO

The workaround is to revert box-sizing to content-box for fancybox elements only so apply this css rule after your general box-sizing declaration :

#fancybox-wrap, #fancybox-wrap *{
    -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box;
      -o-box-sizing: content-box;
     -ms-box-sizing: content-box;
         box-sizing: content-box;
}

DEMO fixed

NOTE : This only apply to fancybox v1.3.x and lower. Fancybox v2.x doesn't have this issue.