Fancybox not displaying correctly

Question

Hi,

I have a page, with a form, and I'd like to display a fancybox when a link is clicked on this page.

I have another working page with a fancybox on, which is fine, but on this page, the fancybox iframe seems to display using the incorrect height/width, and below the form on the page.

Although this is an ASP.Net site, I am using html only on this page, pretty much, as I need a fair amount of quick client side functions.

Here is my code:

<a href="../TravelManagement.aspx?period=monthly" class="iframe">Add Mileage Claim</a>

$(document).ready(function() {
    $('a.iframe').fancybox({
        'frameWidth': 530,
        'overlayOpacity': 0.8,
        'overlayColor': "#000",
        'hideOnOverlayClick': false,
        'zoomSpeedIn': 1250
    });
});

There is also a jCarousel on this page, and the link itself is within a form. Does anyone have any ideas, as i am stuck? I've googled a lot and found nothing.

Answer 1

I've got this working. It was due to the fact that the tag was set with rel="text/css" when it needed "stylesheet".

You learn something new every day.