homepage Welcome to WebmasterWorld Guest from 54.204.64.152
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
What's Your Doctype?
is it IE6/7 CSS friendly?
SuzyUK




msg:3258951
 3:58 pm on Feb 21, 2007 (gmt 0)

Doctypes and CSS Support

A "Doctype" or to give its full name "Document Type Declaration" (DTD) should be the first line of your HTML document, right before the opening <html> tag. No white space no comments no nothing else should appear before it.

Should I use One?
Absolutely, if you don't the page will go into into "Quirks Rendering" mode also called "compatibility mode" - that's BACKWARDS compatibility - which is probably the biggest source of "Why does my site look different in [insert non-ie browser name here]? queries on many forums.

recommended reading: FAQ: Choosing the best doctype for your site [webmasterworld.com]
Highlighted point from above post

Important note: the doctype should always be placed on the very first line of the document, with no comments, white space or XML prolog preceding it. This is so that Internet Explorer 6 can select the correct rendering mode.

The
xml prolog triggers Quirks Mode even when used with a Standards Compliant Doctype - this is bug in IE6 - please be aware when choosing your Doctype

You'll see from that great post that you can choose to use a 'quirky' Doctype - but at the very least you should know that you are and why you are, and be aware of it's limitations if CSS Support is important for your pages - Be Informed! ;)

What is "Quirks Mode"?
Quirks Mode vs. Standards Mode - overview [webmasterworld.com]

Why is this post in the CSS Forum?
because I'm constantly surprised with the amount of CSS rendering questions that start out differently but all lead to the same answer? :o

Seriously as far as CSS is concerned the biggest reason to
a: have one
and
b: choose a Standards Compliant Rendering one

is IE's CSS support!
IE's CSS support has a notoriously bad reputation but actually it has been improving since IE6 and with IE7 out now it's becoming more apparent, likely because IE still has the largest market share and CSS has become more mainstream.

Standards Compliant Mode

Standards Compliant Mode is sometimes called "Strict rendering Mode" but that should not be confused with the actual word 'strict' in some of the Doctypes.

The word 'strict' in the actual Doctypes relates to the different benchmarks of W3C (X)HTML validation.

All you might be concerned about as far your CSS is concerned is whether your page is in [backwards] Compatibility mode or Standards Compliant mode, you can choose either and still have a "transitional" or "strict" Doctype

The Doctype Switch choice

IE introduced the Doctype Switch [msdn2.microsoft.com] when IE6 came out, this meant that not only did it help to bring a standard (actually getting authors to use a Doctype in the first place!) into the mainstream, they gave IE developers a way to choose whether they wanted their applications to be backwards compatible or not.

What the Doctype Switch means for CSS

What it meant and still means for CSS is that any improvements or enhancements are only available in pages that are in Standards Compliant mode CSS support wasn't necessary for backwards compatibility - the "switch" simply gave Microsoft a junction where they could keep backwards compatibility for applications for a while and then move on.

in short Authors had a choice.

That choice has lead to three apparent camps imo.
1. Those who don't care about other browsers as long as it works in IE - they will be in quirks mode (unwittingly or otherwise) - they might ask "why does [insert CSS Property] not work when it should?"

2. Those who do care about other browsers now but don't use a doctype or use a 'quirky' one because their editor produces it or because the pages where orginally built to be backwards compatible - their pages will possibly have lots of different IE workarounds in order to keep the "good" as well the "bad" IE's under control - They may ask about hacks to fix for other browsers

3. Those who are using a Strict Doctype and are aware that the need for backwards compatibility has been diminishing over the past 5 years or so. - Their CSS workarounds will be minimal, if any at all! and could be possibly even be in a separate file, already forgotten about - their pages are in the right place to enjoy the benefits of IE's improved CSS support :)

Have the Goalposts moved for you?

Group 2 are the ones on the cusp and the ones who possibly don't even realise that not only can a change in Doctype bring added benefits in CSS support, in all likely hood they will reduce the amount of workarounds they are using at present!

Way back when, there may have been compelling reasons for choosing "Quirks Mode" as backwards compatibility was a larger issue. Nowadays with the WEB moving forward at its rapid pace - Is better, more consistent CSS support helping to tip the balance in the Doctype choice?

If CSS Support is important for your documents - they need a Standards Compliant Doctype!

Go on pamper them ;)

the following are all examples of Standards Compliant Doctypes - see encyclo's post [webmasterworld.com] again for help with your choice and how to make them into Compatible (quirky) ones!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Suzy

 

PaulPA




msg:3259422
 9:48 pm on Feb 21, 2007 (gmt 0)

A "Doctype" or to give its full name "Document Type Declaration" (DTD) should be the first line of your HTML document, right before the opening <html> tag. No white space no comments no nothing else should appear before it.

My CMS writes the beginning of the document like this:

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Is there a problem with this?

Setek




msg:3259606
 12:45 am on Feb 22, 2007 (gmt 0)

My CMS writes the beginning of the document like this:

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Is there a problem with this?

(my big)

If you want IE 6 to render in standards-compliance mode, yes there is :)

You have an xml prolog (as described in the OP):

Important note: the doctype should always be placed on the very first line of the document, with no comments, white space or XML prolog preceding it. This is so that Internet Explorer 6 can select the correct rendering mode.

The xml prolog triggers Quirks Mode even when used with a Standards Compliant Doctype - this is bug in IE6 - please be aware when choosing your Doctype

[edited by: Setek at 12:45 am (utc) on Feb. 22, 2007]

encyclo




msg:3259611
 12:51 am on Feb 22, 2007 (gmt 0)

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Is there a problem with this?

Yes, as Setek says there's a big problem: different browsers will handle the page in different rendering modes, making your job much harder, especially when dealing with widths defined in CSS.

When you have an XML prolog, IE6 is in quirks mode and IE7, Firefox, Opera and Safari are in standards-compliance mode. This is one of the major reasons when seeing differences between IE6 and IE7.

The doctype itself is just fine, but you should remove the <?xml version="1.0" encoding="iso-8859-1" ?> completely. Make sure you are defining the charset (in your case ISO-8859-1) elsewhere, for example by including a meta charset element before the title element:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Your title here</title>
</head>


The wrong doctype is the number one cause of CSS bugs in layouts when reviewing all the posts made in this forum. If you get the doctype right, then it is much easier to get code and layouts working across many different browsers without having to resort to tortuous and unmaintainable CSS hacks to hold your page together.

greennature




msg:3259669
 1:54 am on Feb 22, 2007 (gmt 0)

I'm in the final process of creating an html template, for a site with roughly 500 pages.

The template validates. I'm considering putting the DocType statement in an SSI so that, over time as the standards change, I will be able to change the DocType on every page without having to edit all 500 pages separately.

i.e.,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> is the current tag I'm using.

When standards change to HTML 4.02 and upward, I want these pages to still be compliant.

Does that sound reasonable, or is it unnecessary.

PaulPA




msg:3259683
 2:11 am on Feb 22, 2007 (gmt 0)

Thanks! Not sure why one of the leading open source CMS products is doing it this way. Must be a reason. Anyone have any ideas?

encyclo




msg:3259695
 2:41 am on Feb 22, 2007 (gmt 0)

> I'm considering putting the DocType statement in an SSI

It's generally a good idea, but bear in mind HTML 4.01 has been around since 1999, and it's good for a few more years yet. :)

> Not sure why one of the leading open source CMS products is doing it this way. Must be a reason. Anyone have any ideas?

They're simply getting it wrong. The idea that there's a requirement for an XML prolog for XHTML is a common misconception, and CMS developers are not necessarily CSS experts.

greennature




msg:3259736
 3:41 am on Feb 22, 2007 (gmt 0)

"It's generally a good idea, but bear in mind HTML 4.01 has been around since 1999, and it's good for a few more years yet."

Thanks very much for the response. I'm only now getting up to speed on the specifics of HTML compliance.

carguy84




msg:3259824
 5:14 am on Feb 22, 2007 (gmt 0)

What I find most ironic is that ASP.NET adds in a blank line to the top of your code when using Master Pages...

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved