DOCTYPE and CSS

[susie123]

Hi. I have a whole site written with just CSS and now when I add the Doctype to the top of the page, it throws out all my styling/page-layout. Why does it do this? How can I correct this problem? Please don´t tell me I have to go through the whole site again with the Doctype placed and redo the whole lot...???

Many thanks - hope to hear some news soon.

S

[Twey]

This means your site design is wrong. You designed it without the DOCTYPE, and the browser was rendering it in "quirks" mode, where it deliberately exhibits old browser bugs in order to maintain compatibility with old or badly-designed pages. When the browser sees the DOCTYPE it assumes that the page is well-written, and tries to render it without bugs; thus, your page, that depended on the bugs to work, breaks. It will probably also break in browsers other than the one(s) you used to test when creating your design, since quirks mode differs between them.

Please don´t tell me I have to go through the whole site again with the Doctype placed and redo the whole lot...???

I'm afraid so. The W3's markup validator and CSS validator will help you. For maximum compatibility, your site should validate as HTML 4.01 Strict and CSS2, the latest well-supported versions of the respective standards.

[jscheuer1]

What a mess. Yes the DOCTYPE alters the way that css is interpreted. When designing a page(s), you should always start with the DOCTYPE, not add it later, as an afterthought.

You don't absolutely need a DOCTYPE though, if you've already designed the pages and they work cross browser, I'd just wait until the next project or makeover of this one, and start with the desired DOCTYPE then.

[Twey]

if you've already designed the pages and they work cross browser

This is highly unlikely. Even if they work in all the browsers you've tried, if they're broken then other browsers will probably fail to guess exactly what you meant when writing the broken HTML/CSS. If you're very lucky, work very hard, and/or add in tons of additional markup/CSS to work around differences in browsers' quirks modes, there's a chance you can do it -- but I wouldn't risk a project on it.

[jscheuer1]

There are projects, and there are projects. The degree of cross browser compatibility required is generally dictated by the project. Depending upon the complexity of the styles and markup, it can be quite easy to design cross browser with no DOCTYPE.

I did however say:

What a mess.

Again though, if the pages work as expected in the target browsers, I say just move on to the next thing, and start with a DOCTYPE, don't add it in as 'finishing touch'.

[Twey]

The degree of cross browser compatibility required is generally dictated by the project.

Only in rare cases, such as intranets.

[jscheuer1]

Only in rare cases, such as intranets.

What with your personal penchant for perfection as pertains to this proposition (say that ten times fast ), I'd venture that it is a lot less rare than you think.

While it is true that anything worth doing is worth doing right, the converse is also many times.

[Twey]

Can you think of a sensible number of other situations where the designer knows with certainty that no other browser will ever be used to access his/her site?

Impressive alliteration

[jscheuer1]

Thanks. Um, the point isn't which browsers will access, but which browsers it is acceptable to ignore, or that must be supported. If you are doing a site for a Fortune 500 company and the terms of your contract stipulate the browsers that must be supported, there you go. If you are doing some hobby site for a friend, it is entirely up to you what you will support. In either case, full cross browser compatibility (although it sure would be nice) isn't required.

[Twey]

If one supports the standards properly then there's no extra effort involved in supporting all standards-compliant browsers.