Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fancybox shifts to the right and down a few pixels after loading

Tags:

fancybox

I'm using Fancybox to open an iframe and it works fine in all browsers except for ie.

When ie opens the iframe it seems to stagger for a split second and then it shifts the modal box to the right and down a few pixels.

I came across a few people's posts but their answers didn't help.

I also played around with the CSS with no success.

Anyone came across anything like this before?

Cheers!

like image 444
Juular Avatar asked Dec 07 '22 16:12

Juular


2 Answers

Hope my solution will help to anyone who still face the same issue... I use fancybox 1.x and my DOCTYPE is "html".

I've found that actually the issue was in using box-sizing: border-box; in styles reset. So I switched it back to content-box for #fancybox-content and #fancybox-wrap and fancybox started to work properly.

like image 158
Sergey Avatar answered Jan 06 '23 20:01

Sergey


Fancybox needs a proper DOCTYPE to work correctly, specially with IE. Your site is currently running in quirks mode.

You can find a working DOCTYPE reference here.

by this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

In your particular case, you may try changing this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
like image 30
JFK Avatar answered Jan 06 '23 20:01

JFK