I have finished the layout and completed the webpage (www.blisshair.com.au) but i have run into what I think is a major issue.
When building the webpage, I only used firefox to check the layout, and now I am kicking myself.
When loading the page in developer tools, IE 8 standards, browser IE 8, it loads pretty much perfect, except the header logo is twice as big as it should be.
When trying in I.E 7 standards, browser IE 7 it looks ok, however, IE browser 7, quirks mode, the page breaks down :
Have a clearfix issue just above the bottom footer, and the navigation (side) menu paddings are way off, the container div isn't centered (at least not on the index page, all other pages are..? )
I honestly have no idea whats going on, if someone could point me in the right direction I would really appreciate it,
Also, one last issue I was trying to correct and has left me scratching my head, I was trying to validate from W3C and got this error:
Warning DOCTYPE Override in effect!
The detected DOCTYPE Declaration
""
has been suppressed and the DOCTYPE
for "XHTML 1.0 Transitional" inserted
instead, but even if no errors are
shown below the document will not be
Valid until you update it to reflect
this new DOCTYPE.
I thought "DTD XHTML 1.0 Transitional" was correct?
If it helps, I have made a header and a footer html and attached them via include with php.
thanks again,
Nik.
EDIT : Problems resolved, thanks again to this site :)
There's not much actually wrong with your site, so don't worry.
When loading the page in developer
tools, IE 8 standards, browser IE 8,
it loads pretty much perfect, except
the header logo is twice as big as it
should be.
I don't see this in IE8 with IE8 Standards Mode, it looks the same as Firefox.
When trying in I.E 7 standards,
browser IE 7 it looks ok
This is the same as using your site with Internet Explorer 7. It's good that your website works properly here, because it still has some market share.
however, IE browser 7, quirks mode,
the page breaks down
Quirks Mode is basically emulating IE5. You do not have to worry about your website working in IE5. A visitor would only see your site in Quirks Mode if you had an invalid doctype that would not trigger Standards Mode.
Your doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
That's fine, and will most definitely trigger Standards Mode.
Your site does have some validation errors, but none of them are of the fatal variety.
however, IE browser 7, quirks mode, the page breaks down
Shrug, who cares? Quirks Mode is an emulator for IE 5.5, which no-one has used in years. You might today still worry about about what it looks like in IE6 Standards Mode, depending on who your audience are, but certainly nothing earlier than that. As long as your <!DOCTYPE> declaration is in place as it is now, no-one will ever see your page rendered in Quirks Mode.
I thought "DTD XHTML 1.0 Transitional" was correct?
Yeah, it is. The validator is just warning you that you've chosen to ignore the doctype on the page, in favour of explicitly using XHTML 1.0 Transitional (which is the same doctype as on the page anyway, but the warning doesn't notice that). Just leave the “document type” dropdown on the validator form on ‘(detect automatically)’ and the warning will go away.
Related
I've created a form that is dynamically created with JavaScript and is added in another website using the <script> tag.
The doctype used by this other website is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> which uses the quirks mode.
I've built my form by taking this in consideration and everything is working as expected in Chrome, Firefox and IE 10. However, when I test it in IE 9 and earlier, the form is not displayed at all. When I open the developper tools, I can see that IE 10 uses the new quirks mode but IE 9 and earlier uses the IE5 Quirks mode.
I was wondering if the new quirks mode can be used to display this page when using IE 9 and earlier. If this is not possible, I would like to force standard mode but only when using IE 9 or earlier and keep using quirks for every other browser.
I can't use the html5 doctype since their website is built with quirks mode instead of standards and their design is all broken when I use this doctype.
You cannot change the mode once the page is loaded. And you cannot change it programmatically. The only way to force a page into quirks mode is to load it without a valid doctype or with serious bugs in the HTML.
If you have a doctype, but your page is still loading in quirks mode, then it means that you have serious bugs in your HTML. This will give you bigger problems than just being in quirks mode. You should definitely fix those bugs. If you really want to be in quirks mode, drop the doctype, but you should really try not to have HTML code that is so bad it triggers quirks mode even with a doctype!
You can validate your HTML to find those bugs by using the W3C validator.
In terms of switching your page at runtime between IE10's two different quirks modes, the simple answer is that you can't do that.
Sorry about that.
However, to be honest, it's probably for the best. Using quirks mode is be a complete disaster anyway. It doesn't just change the layout mode; it also switches off most of the browser's features (ie pretty much everything invented since 1998).
But now for the good news:
Luckily, switching away from Quirks mode is a lot easier than you think.
The main layout issue (the different box model) can be fixed by adding the following to the top of your CSS:
*{box-sizing:border-box;}
This is the standards-compliant way to set the box model to the quirks-mode style layout. Most of the broken layout problems cause by switching from quirks mode to standards mode can be resolved with this simple CSS style.
There are other quirks, but they're relatively minor and shouldn't be too hard to deal with once you've fixed the main issue. A lot of them are actually not quirks mode issues, but bugs in older IE versions that the original coder may have had to hack his way around. There's no guarantee that these will continue working the same in future versions anyway, even if you do stick to quirks mode, so you would be best off fixing them now anyway.
So, to summarise:
Fix your page so it loads in standards mode. Valid doctype and valid HTML.
Use box-sizing to mitigate the main layout gremlins caused by the switch.
Fix the remaining layout issues manually.
It's really a lot less work than it sounds. Honest.
I have a website with that header in the pages :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
When testing pages on a computer which is internet connected, everything is fine.
When testing the same page without internet connection, the page design is rendered awfully !!!
How may I set the doctype to let the browser know what kind of doctype my pages are made for, and be able to see the pages well on a non-connected computer ?
The URL has no in the Doctype has no effect regarding rendering of pages in browsers.
Whatever is causing you problems with your off-line rendering, it has nothing to do with the Doctype.
Most likely, you are depending on images or stylesheets with URIs on the Internet and the browser cannot retrieve them without the connection.
The doctype you use is one of the doctypes that causes “standards mode” (as opposite to “quirks mode”) in browsers—google for "quirks mode" to find some basic info on this phenomenon, which can affect rendering in many ways, even dramatically.
Assuming you want “standards mode;” such a doctype is what you can do. Browsers may still display the page in “quirks mode” if instructed to. I suspect that you might be testing on IE with settings that make it display all local documents (“all intranet pages”) in “quirks mode” (“compatibility view”). In that case, it’s not a problem with the page but with browser settings.
Believe it or not, it was because of the following HTML comment style that was put in different places in the HTML file :
<!-- ------------------ Some comment to organize HTML code ---------------- -->
I'm using the dropdown menu from http://www.wappler.eu/swdropdownmenu/ and it works fine in all browsers except IE.. the demo on the website works in IE, and the only thing i've changed is the styling.. mine is at http://www.futureworkinstitute.com/2010/ - at first i thought it might have been a conflict between scriptaculous/prototype/jquery, but even after removing other JS, it still doesnt work.
The problem is that you have not included a doctype on your website.
With few exceptions, the first line of every new page you create should be this, the HTML5 doctype:
<!DOCTYPE html>
Because you haven't included a doctype, your page is rendering in Quirks mode in IE8:
Quirks mode is a rendering mode used
by some web browsers for the sake of
maintaining backward compatibility
with web pages designed for older
browsers or coded without standards
conformance.
If you add in that magical doctype line, your drop down works in IE8 and IE7.
I did not notice any significant unpleasant side effects by adding in the doctype, but after adding it, you should test your entire site in every browser you care about to make sure your site still works properly.
I am developing for SharePoint 2007 and my pretty code is being broken, presumably by code SharePoint generates around my Content Editor web-part. My understanding is, because there is no "top level" doctype declaration made before SharePoint sends the code to the browser, Internet Explorer is forced to render the page in quirks mode. Thus, the entire page is rendered without respecting certain CSS declarations and my page looks wrong.
I have hopes of convincing the powers that be that this issue is worth fixing, but I figure I need to be able to tell them what I want...
So, what doctype would work best when I'm writing in XHTML (strict) with CSS2 but the stuff surrounding my code is not strict?
<!DOCTYPE html>
This declares your document as HTML5, and HTML5 clearly defines how browsers should handle broken code so your result should look the same on all browsers.
Does IE8 run in quirks mode like IE6/7?
I have a webpage that has some truly bizarre code. The content is centered with padding and negative margins.
It works correctly in IE6/7 and other browsers but in IE8 the content area is half as wide and not centered (flag for quirks mode).
The source code has three blank lines before the DOCTYPE. I know that will throw IE6 into quirks mode. Will it also affect IE8?
I don't have access to the source so I cannot remove those lines to test it.
Changing the doctype to HTML 5 should fix some problems. I had an issue with min-width in IE8 using Strict doctype.
So changed this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
To this: <!DOCTYPE html>
See here: http://davidnaylor.org/blog/2008/09/ie8-and-max-width.html
Running a few quick tests that can be found here seem to indicate that blank lines shouldn't throw IE8 into Quirks Mode (which is different to Compatability Mode that everyone seems to be confusing it with).
I wrote a breakdown on how incredibly confusing the different modes of IE8/7 here and I didn't even include Quirks Mode in the breakdown. A detailed description of Quirks mode can be found here (not for the original question, but others might find it interesting.)
Today, I changed our DOCTYPE from XHTML v1.0 (Strict) to HTML5. I read somewhere that even though the IE's don't recognize the DOCTYPE yet, they will render the page in standards-compliant mode.
When I checked in IE8, the whole page looked whack (we have quite a bit of CSS and other styling). It took a while before I realized that there wasn't anything "wrong" with the CSS, or even IE8 for that matter. However, it WAS rendering in quirks mode.
Inadvertently, I found the answer in the question posted here, specifically this comment: "The source code has three blank lines before the DOCTYPE. I know that will throw IE6 into quirks mode. Will it also affect IE8?"
I don't know about blank lines, but when I made the change, I had used a javascript comment to "hang on to" my old DOCTYPE statement (which was ABOVE the new HTML5 DOCTYPE). Once I removed those lines (which may have included a blank line or two), my sweating stopped and IE8 rendered in standards-compliant mode.
Yes it does. Internet Explorer's quirks mode is IE5.5. IE6/7/8 switch back to 5.5 when quirks mode is present. So since it was working fine in IE6/7 it's not the quirks mode. There's a "Compatibility View" button in IE8 to address this issue. It's not a good solution to me though. You'll have to check your CSS code.
IE8 has a compatibility mode which should treat the page the way IE7 would. Have you tried viewing the page in compatibility mode?
Can you post a link to the page or some of the HTML itself? You could try adding the meta tag to force compatibility mode?
http://www.ditii.com/2008/08/28/ie8-standards-mode-and-ie7-compatibility-mode/
or for more info:
http://blogs.msdn.com/ie/archive/2008/08/27/introducing-compatibility-view.aspx