We are trying to add a cookie policy to an old website, made a long time ago. The cookie policy (javascript) works fine in chrome, ff etc, but IE kicks into quirks.
I inspected the generated html and.. oh my.
It looks something like:
html
head
/head
html
body
head
/head
/html
/body
html
You get the picture, its ugly. When it was built they included separate .shtml files, all which come inclusive with their own html, head etc.
There is nothing above the doctype so I have erased that as the problem. The doctype is:
<!doctype HTML PUBLIC "-//w3c//DTD HTML 4.01 Transitional//EN">
jsfiddle with html from the index page, not there for presentation, its there if you want to look at the demons that be (code).
So, the question I am asking, is what could be causing quirks mode to kick in? Is there a 'hack' to prevent it?
When I display it explicitly as ie7+ its fine, so as a cheat can we just set it to not go to quirks?
Thanks.
Generally, quirks mode is turned on when there is no correct DOCTYPE declaration, and turned off when there is a DOCTYPE definition. However, invalid HTML - with respect to the chosen DOCTYPE - can also cause the browser to switch to quirks mode.
Related
I inherited some pages that uses Java Script to do calculations and draw on graphs on canvas tag.
Their JS pages do not have <!DOCTYPE html>; they only just start with the <html> tag.
My site has <!DOCTYPE html> and now that I added that code to my site it doesn't work.
Any idea how to go about this?
That's because your browser is operating in "quirks mode" if there is no DOCTYPE statement right before the <html> tag.
That means whoever wrote the javascript was relying on quirks mode to execute it. Therefore, now that you have a DOCTYPE tag, your browser is operating under a different set of behaviors, as defined by whichever version is specified in the DOCTYPE.
The difference between the two is subtle until your code breaks. I used to never put a DOCTYPE tag until this exact issue came to bite me in the butt.
I was trying to integrate Slimbox into my web page, but couldn't get it to work properly. For some reason, the popup is centered on the whole page, not just its visible part. Here's an example of the situation: here.
I tested it in Firefox and Chrome on Linux and Slimboxes on other web pages look fine. Any idea how to get it working?
Also remember about <!DOCTYPE html> in HTML5 documents.
In my case, this turned out to be important in Slimbox 2.05!
So I change the doctype from HTML 4.0 Transitional to XHTML 1.0 Transitional and it works like magic. Does anybody know why? There's something about having a XHTML doctype in Slimbox 1 readme, but they don't mention it in the readme to version 2.
Working on tarting up a very old site as a new site is being built elsewhere and wanting to incorperate a super simple lightbox type display but not sure how to make it work.
Here is the page as it stands:
http://www.onboardtraining.co.uk/johnboyce
When clicking on the 3 rows of cars on the right it calls a javascript function built around code from this page :
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
Only thing is the dark background layer doesnt fully expand out to 100% even though it says this inside the CSS code and both the background layer and container layer dont stay fixed on screen, if the visitor has scrolled down a bit then clicked the thumbnail the layers appear further up the page and only partially cover the screen, same if the user tries to scroll.
Lastly although the demo code works ok (bar the above) in IE, FF and Chrome, on the iPhone the lightbox appears shoved over to the left.
Sorry for the massive question with many branches, just learning my way around things CSS at the moment and coming out of the dark ages :)
Thanks,
Rik
Edit - I dont want to use any external jquery plug ins thanks :)
This is the easiest method:
.black_overlay {
position: fixed;
_position: absolute;
}
position: fixed is supported in every browser except IE6 - support for which is no longer relevant to most websites. _position: absolute is applied in only IE6, and stops the page breaking in that browser.
You should leave the white box as it is (don't make it position: fixed), because it does not size itself intelligently to the dimensions of the window.
No idea about the iPhone part of your question.
Firstly, you should update your doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
That is no good, because it causes Quirks Mode. In Internet Explorer especially, many things simply do not work or are otherwise entirely broken in Quirks Mode. Update your doctype to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Use this jquery lightbox plugin:
http://leandrovieira.com/projects/jquery/lightbox/
I have a very strange issue going on here. It's only occurring on Internet Explorer (what a surprise).
Basically I'm trying to fix a site that was given to me after some third-rate developers finished it and obviously did not test on IE.
They've setup a javascript slideshow, now on the pages with the slideshow active, the whole enclosing "body_section" div is being pushed all the way to the left. Have a look for yourselves:
http://sapaconstruction.com.au/sapa/
That's the homepage which floats everything to the left. Now on this page:
http://sapaconstruction.com.au/sapa/?page_id=4
Everything looks normal, so it must have something to do with the javascript slideshow. Here's what the javascript they've written looks like (it's embed on the page).
<script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/compressed.js"></script>
<script type="text/javascript">
$('homeslideshow').style.display='none';
$('wrapper').style.display='block';
var homeslideshow=new TINY.slideshow("homeslideshow");
window.onload=function(){
homeslideshow.auto=true;
homeslideshow.speed=5;
homeslideshow.init("homeslideshow","image","imgprev","imgnext","imglink");
}
</script>
Any help with this issue would be amazing, I've wracked my brain for hours trying hacks and margin fixes and things like that.
Well, I can tell you this. This site has way more problems than just that. In looking at the source, there is a div that comes before the html node. I would first of all fix that, as even in firefox, this is causing some strange things to happen. As a matter of fact, I think this "ieonly" div is what is causing the issue, as in IE this div becomes the wrapper in the body. Whoever built this site was not very familiar with cross browser design, and tried to bake in way too many IE hacks.
EDIT:
The problem was IE was in quirks mode due to the lack of a doctype. The following doctype should work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I have a main frameset page, which uses the FRAMESET doctype..Now this has 3 frames inside it..
Now for the 2nd frame, I want to use some HTML5 code ()...So guess I'll have to use the doctype
Now my question is; can both these doctypes co-exist, which means can I declare FRAMESET doctype for the main frameset page and HTML5 Doctype for one of the frame page..
Can it cause any cross-browser issues?
Also before you say, I know this is a strange question as I am using old/outdated frameset with the latest HTML5...But I have limited options (In fact, can't edit the main frameset page to use iframes)...So want to know how can I combine the 2?
Doctypes are specific to documents and each document has its own independent doctype. Having a different doctype in each frame is perfectly valid, and having the doctype of the frameset be different from the doctype of the frames is not only valid, it's impossible for it to be otherwise. Whether it's HTML 5 doesn't really enter into it.
Now my question is; can both these doctypes co-exist, which means can I declare FRAMESET doctype for the main frameset page and HTML5 Doctype for one of the frame page..
They are separate, independent documents, so: yes.
Apparently the answer is no because as usual, Internet Explorer. This link: http://css-tricks.com/ie-iframe-quirksmode/ is validating my findings that my html5 document loaded inside of a frame loaded inside of a much older parent document with frameset doctype is rendering in quirksmode because "In IE, iFrames on Pages in Quirks Mode Also in Quirks Mode". It sounds like this is the case with Frames as well as IFrames even in IE11.