Fancybox wrapper not auto-sizing correctly to image dimensions - jquery-plugins

Question

I'm having an issue with FancyBox. It's supposed to auto-resize the wrapper in accordance to the dimensions of the image. It's not doing that. Specifically it's too small.
Here's the FancyBox jQuery code I've used:
$("a[rel=photo_gallery]").fancybox({
'type' : 'image',
'padding' : 10,
'autoScale' : true,
'cyclic' : true,
'overlayOpacity' : 0.7,
'overlayColor' : '#000000',
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'titlePosition' : 'over',
'titleShow' : false,
'resize' : 'Auto'
});
Has anyone else ever run into this issue?
Thanks in advance for any help.

Answer 1

Figured it out ...
It was my CSS reset that was being tripped-up by the FancyBox CSS. I reset the box-sizing style of DIV's to 'border-box'.
The fix was to go into the FancyBox CSS and declare the wrap, outer, and inner DIV's box-sizing to be 'content-box'.
Like so:
#fancybox-wrap {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 20px;
z-index: 1101;
display: none;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-safari-box-sizing: content-box;
box-sizing: content-box;
}
#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #FFF;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-safari-box-sizing: content-box;
box-sizing: content-box;
}
#fancybox-inner {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
padding: 0;
margin: 0;
outline: none;
overflow: hidden;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-safari-box-sizing: content-box;
box-sizing: content-box;
}
Hopefully that will help somebody else that runs into this.

Answer 2

Above did not work for me (FB 3beta).
This is my solution:
.fancybox-wrap, .fancybox-wrap *{
-moz-box-sizing: content-box !important;
-webkit-box-sizing: content-box !important;
-safari-box-sizing: content-box !important;
box-sizing: content-box !important;
}

Answer 3

I had the same problem with arbitrary HTML showing in the popup. I found this was all that was necessary to fix it (when using Eric Meyer's reset.css) is this:
.fancybox-overlay
{
line-height: normal;
}
The offending code in the reset.css file was this
body
{
line-height: 1;
}
Disclaimer: Tested only in IE9 and Chrome - but it appears to work.
This is for whatever the latest version of fancybox is at time of writing.

Answer 4

I also found that getting rid of the global reset for box-sizing helped :
/*
*,
input[type="search"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*/
The annoying part is finding all the items that were relying on border-box and then enabling it for JUST those items. Luckily for me there were only 3... that I've found so far. Firebug / Developer Tools helped a lot to figure it out though.