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!
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.
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">
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.
In your particular case, you may try changing this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
by this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
UPDATE : I have created some simple html pages to reproduce the issue with IE.
The first one uses the same DOCTYPE as in your page as well as the same fancybox code. IE works in quirks mode so fancybox behaves oddly as in your page:
http://picssel.com/playground/jquery/ieWrongDoctype_09feb12.html
The second one uses the proposed DOCTYPE as solution. IE works in standards mode and fancybox works properly:
http://picssel.com/playground/jquery/ieGoodDoctype_09feb12.html
My conclusion: use the correct DOCTYPE
Related
I am confused... all the pages start with
<!DOCTYPE html>
<html lang="en">
<head>
<title>...
When I view the source in Firefox, the first line is in italic. Is it commented by FF (last mac version 98.0.1)?
In the web tools console, FF sometimes (not for all the pages) displays a warning saying that the page is in quirk mode and may affect the rendering.
I have read a lot on the subject but I don't seem to understand what I can do to fix this.
Help would be appreciated.
Is it possible for you to inject an iframe without the doctype or for some third party tracking pixel to do it?
If that's the case, I'm afraid your problem is caused by that, you have an answer to the reason here:
Dynamic iframe inserted into document that is standards mode defaults to quirks mode
when using Perl CGI, it always print out the: <"DOCTYPE html ".... > header before printing out the rest of the html body, which messes up the proper display of the web page. I guess the cause is the DOCTYPE still references a very old version of HTML. This first line get generated regardless when I use $query->start_html(...);. So the question is, how to prevent that <!DOCTYPE...> line from being generated? When I delete that DOCTYPE line, my web page runs properly after that. Any insight is greatly appreciated. Thanks!
Browsers will use the DOCTYPE definition to decide whether or not to interpret an HTML (or XHTML) document in Quirks mode. I assume that's what you mean by "messes up the proper display of the web page" - you're carefully creating valid HTML5 but the browser goes into Quirks mode and the page doesn't look right.
What you want is the standard HTML DOCTYPE definition.
<!DOCTYPE html>
Unfortunately for you, the HTML generation functions in CGI.pm are unmaintained and don't have support for HTML5. So you can't get the module to generate this DOCTYPE.
Honestly, your best approach is to stop using all of the HTML generation functions and switch to a template-based approach instead. But I can see how that would be a big job so, in the short term, perhaps you can just stop using start_html(). It shouldn't be too hard to replace the call with a heredoc that contains the text that you want.
Update: The comment from Quentin below got me thinking. When I said:
you're carefully creating valid HTML5 but the browser goes into Quirks mode and the page doesn't look right
I was completely wrong. If you get the browser behaviour you want without a DOCTYPE, then you want to put the browser into Quirks mode. And that's far easier. Using the information from the Wikipedia article I linked to above, you can see that HTML 4.01 Transitional is the most recent DOCTYPE that will put all modern browsers into Quirks mode. So you can use that DOCTYPE.
$ perl -MCGI=:html -E'say start_html(-dtd => "-//W3C//DTD HTML 4.01 Transitional//EN")'
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Untitled Document</title>
</head>
<body>
And that should get the browsers working as you want them.
But relying on Quirks mode is fragile. I recommend that you consider fixing your HTML and CSS so that they work as you want when browsers are in Standards mode.
I am so close to getting the TinyMCE editor to work at our site. The necessary scripts when adding a discussion are loading.I can see them in the HTML source. And my domain is properly registered for the API key I'm using. And the id/name of the textarea is correct. But the editor itself doesn't load for the textarea.
There is just one JavaScript console error:
Failed to initialize the editor as the document is not in standards mode. TinyMCE requires standards mode.
Does anybody know what "standards mode" is and how I can make sure the page served is in standards mode?
A big never mind. I found the solution. The document was in so-called "quirks" mode because there was no DOCTYPE. I added this on top and the editor worked just fine!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Even later I discovered something that might help.
Check if the first tag is of the <!doctype html>.
In my case a tag was taking the first place.
I am new to Eclipse and my eclipse supports html5 by default and whenever i use tag which are outdated in html5, i get an error so please help me out how to use html4 or lower version instead of html5.
To tell the broswer you are using HTML4 documents you need to set the doctype like this in your index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
You have different DOCTYPE declarations here.
I am a new user to fancybox 2.0 and have to been able to get it to work. After a couple of days trying, I eventually stripped down test page do the bare bones. It works with Firefox but not with IE8.
Please, can someone look at this code and see where I am going wrong.
http://www.bytebrothers.com/bb_tester/Video_lightbox_test.htm
Your document has not DOCTYPE so IE switches to quirks mode.
Fancybox needs standards mode to run properly so set a valid DOCTYPE. You can check http://www.alistapart.com/articles/doctype/ or simply set <!DOCTYPE html>