I have created a webpage (http://www.snow4life.yum.pl) that was rendered properly in firefox, chrome etc. Of course dumb IE complicated things, because it enters quirk mode automatically, even though doctype is properly set and site goes through w3 validation (there is one error of missing some char, but file was cleared in hex editor). How can I stop ie from entering quirks mode ? Is there any way ?
Try killing all the whitespace before the DOCTYPE.
EDIT: There is an <feff> character which is a Unicode BOM signature at the start of the file. Since you may not have a text editor that can actually see that, try deleting the entire first line and paste over it with
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
And do NOT save the file with a BOM unicode signature. If this doesn't work, try a different text editor altogether.
Paste the below code within the head tag
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Quirks mode in any version of IE will also be triggered if anything precedes the DOCTYPE.
For example, if a hypertext document contains a comment, space or any tag before the DOCTYPE declaration, IE will use quirks mode:
<!-- This comment will put IE 6, 7, 8, and 9 in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
I added both the doctype from the first comment and then the meta tag and it worked thanks guys .... and no thanks to IE :(
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
and
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
I have just changed the doctype to html5 and it still works great
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Related
The raw XHTML is just displaying in internet explorer. No CSS is shown at all. I can't seem to pinpoint the issue of this problem. I ran both my XHTML and CSS through the W3C validators and had zero errors checked with XHTML 1.0 Strict and CSS 2.1.
I suspect the something to do with my DOCTYPE or the <link> in my XHTML. Any help is appreciated!
XHTML (DOCTYPE and HEAD):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- DOCTYPE is set to STRICT-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Flags</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="Flags.css" type="text/css" />
</head>
</html>
Page in:
Internet Explorer: http://i.imgur.com/l2jcUkv.png
Chrome: http://i.imgur.com/tucKXzg.png
Notes: The CSS is called Flags.css and is located in the same directory as the XHTML.
Check the developer tools in Internet Explorer. Are you using the correct mime for your CSS? What about headers you've set?
Remove the meta element, it is not only invalid it's completely out of context for XHTML; you are setting the mime to application/xhtml+xml right?
Never use capitol letters for files unless they are intended as an explicit download-only resource; all web resources must be lower case as part of your good practices (and use dashes for public facing URLs, never underscores; research correct context of characters on Wikipedia).
Finally you're lacking the media attribute with the screen value...
<?php
if (isset($_SERVER['HTTP_ACCEPT']) && stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
header('Content-Type: application/xhtml+xml; charset=utf-8');
}
echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Flags</title>
<link href="flags.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
My entire site is proper XHTML (1.1 currently, converting to XHTML5 for the next version release) so feel free to look at it linked from my user profile.
I've read several posts on this subject and I've tried many of them but I cannot get my website to be centered in IE - specifically IE 8 (my current browser). It does work in FF, Safari and Chrome. www.hscassociates.net is the site.
In my css I'm doing this:
div#section {
width:960px;
margin:0 auto 0 auto;
border: 2px solid #b31b1b;
border-top:none;
}
Also, I have a background image I need in my #section div, but it will not show when I place it in my css file in the div#section block. In order to get it to show, I put it inside the in my includes file where I am displaying the #section div tag:
<div id="section" style="background-image:url('graphics/section-bg.gif');
background-repeat:repeat-y;">
One post I read said the html doctype needed to be using strict. I've never read that before. Any truth to that? I'm using transitional.
Your DOCTYPE should be the first tag on your page. Because it is not IE is rendering your page in what is known as quirks mode. The DOCTYPE itself doesn't need to be strict but what will happen is with a correct DOCTYPE the page will be rendered in strict mode instead.
What is quirks mode?
Because certain old browsers didn't meet W3C standards developers had to write non-standards compliant code to ensure their pages looked correct in these browsers. As browsers came closer to the standard the problem was that pages developed in the old style would no longer render correctly. So they implemented two modes of rendering, quirks and strict.
If the website supplies a DOCTYPE as the first argument this tells the browser that the page is written in standards compliant code and what specification to render against. So the browser can use strict mode to render the page.
However if the page omits a DOCTYPE then the browser does not know what specification to render against and therefore assumes the page is non-standards compliant (Which it automatically is for omitting the DOCTYPE) and renders it in quirks mode which can have unexpected results.
Here's what you need to do:
Change
<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> triggers quirks mode.
If you want to use HTML 4 Transitional then use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
If you are not bound to HTML 4 then use <!DOCTYPE html>
Your page displays fine with both.
For one reason or the other IE8 is not displaying my webpage properly. It works on every other major browser but everything is helter-skelter when I try to open the page on IE8 and since majority of the users of this page primarily use IE8, I cannot ignore it. Here's the link to it: http://www.gradschool.purdue.edu/gradexpo/mailinglist/
You haven't set a doctype. Put this at the very top of your page:
<!DOCTYPE html>
IE put itself into 'quirks' or Compatibility mode when it doesn't see a doctype, which will mess up your layout. Specifying a doctype will kick it into Standards mode which will remedy most problems. IE is still pretty useless at rendering CSS properly, so you might still have some issues.
Note you could also use the HTML 4.01 Strict doctype, but this will give the same result:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
get a doctype at the top of your html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
then run it through http://validator.w3.org
and fix other errors
In addition to the critical error of a missing doctype as others have pointed out, you have a few serious HTML errors.
W3C Validation
You have repeated your closing tags for </body> and </html>. You also have a couple unused closing div tags, </div>. All of the meta tags in your <body> need to be moved to within the <head> section. Browsers will handle these kinds of errors with unpredictable rendering.
My webpage code is this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
</head>
<body style="background-color: Black;" >
</body>
</html>
When I run the page on my development Pc (Visual Studio 2010), I get this result:
Notice that the page is rendered in compability mode.
When I run the exact same page from IIS7, I get this result:
Now the compability view is gone, but I now have a vertical scrollbar and a white frame (1-2 pixels) around the entire page (see the yellow arrows - it might be hard to see here).
Here's my questions:
Why is compability view different when running in development than on my IIS7 production server?
With the HTML code above, why is there a vertical scrollbar and a small frame around the page? ... and how do I get rid of it? I want an entire black page.
Thank you in advance!
Mojo
The use of <!DOCTYPE html> normally prevents compatibility mode, but for local files (localhost:...), IE tends to use compatibility mode despite it. To override this, use
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
(which may have various other effects too), or test your pages on a server.
put this linebefore the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I am working on a site that is based on CSS and DIVs
Unfortunately I can not manipulate the HTML.
I have the site looking great on Chrome and Firefox
For some reason IE9 will not render it right.
Please help.
The URL is http://2012.v8apps.com
You will have to manipulate html and add a DOCTYPE as the first line of your code.
<!DOCTYPE html>
Seems IE9 is rendering in quirks mode. Try specifying a doctype at the top of the page.
The first line of your page should one of the following:
HTML 4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 5
<!DOCTYPE html>
IE9 is also reporting that "CSS was ignored due to mime type mismatch". Could you move your styles into a .css file rather than in an .aspx file?
I had to add Response.ContentType and force text/css for Firefox to render.
The final DOCTYPE that did the trick is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="w3.org/1999/xhtml">