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 (http://validator.w3.org/) and CSS validator (http://jigsaw.w3.org/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 browserThis 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.

[jscheuer1]

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

True, but there aren't all that many 100% compliant browsers. However, there are so many that are and/or are very close and/or pretty close, that this is a good working premise. I'm not arguing with that fact. That wasn't the original question. At least, as I understood it, it was about what might be done if one neglected to start out with a DOCTYPE and already had many pages completed.

[molendijk]

Here's a little interruption by a third (fourth, in fact) party.
Twey is right by principle, but sometimes you have to choose a practical solution. I had a site that was a total mess, then I learned things, but by the time I was able to do 'it' better, the site had grown rapidly. So I made a quirks choice. The site is still a mess, but rather browser's compliant, and it DOES work (www.molendijk.tk).

If I could do it all over again, I'd do it better. (But that holds for everything: if only I could be born again!).

Arie Molendijk.

[Twey]

Uhh... have you tested this site? The text is all over itself, and half of the navigation bar is cut off unless I make the window big enough (Fx2). In order to see the "hosted by" message, I had to resize my window to around 3600px height:1447It's even better in Konq:1448... but it would be easier to describe what does work.

[jscheuer1]

Must be one of those high end sites. I've had similar experiences though. Updating a site periodically is almost always desirable, often necessary. So, each time I update, I try to get things more compliant.

What started out IE only (for the most part) is now very accessible, not perfect though. Some sections are still completely quirks I think, not much more than a page or two, if that, is strict:

http://statestreetblues.com/

Look back through some of the earlier previous years to see the real 'horror stories'.

[molendijk]

Tested and works with (using Windows XP):
-IE5.5 upto IE7
-Firefox 2.0.0.11 and earlier versions
-Mozilla 1.7.5
-Netscape 7.0 and higher
-Opera 9.23 and earlier versions.

So I guess my site is accessible to the major part of my visitors.

Arie Molendijk.

[jscheuer1]

Tested and works with (using Windows XP):
-IE5.5 upto IE7
-Firefox 2.0.0.11 and earlier versions
-Mozilla 1.7.5
-Netscape 7.0 and higher
-Opera 9.23 and earlier versions.

So I guess my site is accessible to the major part of my visitors.

Arie Molendijk.

If their window is wide enough. I found about 1200px width required to prevent the menu from wrapping undesirably.

[molendijk]

That's strange. I normally use 800x600 or 1024x768 without problems for my site. Also works (with some minor problems) with 1152x864.

Arie Molendijk.

[molendijk]

Hello Twey and John,

Do you also have problems on this site (http://www.twinhelix.com/dhtml/fsmenu/demo/)?

Thanks,
Arie Molendijk.

[Twey]

Tested and works with (using Windows XP):
-IE5.5 upto IE7
-Firefox 2.0.0.11 and earlier versions
-Mozilla 1.7.5
-Netscape 7.0 and higher
-Opera 9.23 and earlier versions.I don't know what we did differently, but Gecko's rendering doesn't change over platforms.

John's seems to be a fair example of a site that "just about works, somehow." This is to be expected because he has the necessary expertise in the different behaviours of major browsers today. I'm willing to bet there are several browsers today and in the future with which it's no good, though.

[Twey]

Do you also have problems on this site?No, no issues.

[molendijk]

Well then, that leaves me with the problem-to-be-solved why www.molendijk.tk functions well on my machine (for the browsers that I mentioned), AND on the machine I use at my office, AND on the machines I tried at the homes of several friends, but NOT on yours NOR on John's. This is crazy, but so is life in general. (If computers had minds and could talk, they could explain their unexpected behavior. But they just are what we put into them. Obviously, I put something wrong into them).

Thanks anyhow,
Arie Molendijk.

[Twey]

Disadvantage of not following standards: browsers may exhibit willful behaviour.

[jscheuer1]

Disadvantage of not following standards: browsers may exhibit willful behaviour.

That's a disadvantage of using browsers, whether you follow standards or not.

As I'm sure you know though, the idea isn't to get things identical in all browsers, merely OK in all browsers.

[Twey]

Personally I'd say "perfect in all browsers." Differences are not necessarily negative.

[jscheuer1]

Perfection is in the eye of the beholder.

[molendijk]

Hello Twey and John,
Sorry to bother you again, but are at least the menu to the left and the 'hosted-by link' (left bottom) visible now on www.molendijk.tk?

Thanks,

Arie Molendijk.

[jscheuer1]

Much better now.

[molendijk]

Thanks John.
It was a scalable font-size problem. I took away the scalability.

Arie Molendijk.

[jscheuer1]

Oh, Oh, I didn't think about that. In FF you can always scale fonts. I did at 800 x 600 and the problems returned. But, at 800 x 600, true resolution, it is more likely that the user will scale the font size down, rather than up, so I wouldn't worry about it too much.

[Twey]

It was a scalable font-size problem. I took away the scalability.Fixing an accessibility problem by lowering the accessibility. I like it. You could also take the site down entirely, nobody would have problems with it then :p

Still broken:
1449

[jscheuer1]

Still broken:

Yes, at any resolution, if the window is short enough, the left hand menu will be cut off. One should be able to scroll it into view. If it is in a frame or an iframe, make the frame's scrolling auto and the page the menu's on's overflow auto. If it is in a division, make its overflow auto. If neither, put it in a div with overflow auto. Once any of those things are done, getting it to fit within the dimensions allowed will be more crucial than it is now, so some other adjustments may be required to eliminate the scrollbar on windows that are tall enough for it.

Ah, I see the trouble:


<html style="overflow:hidden">

on the top page. Make that auto.

[molendijk]

Yes, I think the 'overflow:hidden' is a problem here. I put it there for a reason that won't interest you, but changing the overflow should do it.

Arie M.

[molendijk]

Hello Twey

I have taken a closer look at the pictures you posted to show that www.molendijk.tk has poor accessibility. Here is what strikes me now (I didn't notice it before). There are 3 pictures. One of them must not be taken into account, since it is 'frameset.html', which cannot be reached via the menu and isn't a 'real' page (but I should do something about that). The other two pictures show that you used Flock with res. 545x280, and Konqueror with res. 556x280. I didn't test my site on these browsers. Anyhow, http://www.w3schools.com/browsers/browsers_stats.asp indicates that Flock and Konqueror count for less then 0.5%. As for the screen resolution you used to test my site on Flock/Konqueror, 0-5% of the users use it, as shown by http://www.w3schools.com/browsers/browsers_display.asp. So I should think that a statement about the poor accessibility of my site should not be based on what you used for testing. I don't say you are wrong. I'm only curious to know whether the standardly used browsers and browser displays also point towards your statement.

Arie Molendijk

[Twey]

The other two pictures show that you used Flock with res. 545x280, and Konqueror with res. 556x280.I'm not sure how accurate that is, since this board resizes images. My actual screen resolution is 1600×1200, and I usually have my browser window at something like 1024×768.
Anyhow, http://www.w3schools.com/browsers/browsers_stats.asp indicates that Flock and Konqueror count for less then 0.5%.Flock uses Mozilla's Gecko engine with a different user interface, much like Avant! vs. IE. They render identically. Konqueror is very similar to Safari, and has very good standards support, so it's probably fairly representative of other very standard browsers, such as Opera.

Web trends are also notoriously unreliable, as are W3Schools. I would suspect that Konq's actual usage is something like 2%, slightly under half of Linux' ~5% user base.

[molendijk]

Your answer reassures me: most of my visitors will be able to view my site as intended.


Flock uses Mozilla's Gecko engine with a different user interface, much like Avant! vs. IE. They render identically. Konqueror is very similar to Safari, and has very good standards support, so it's probably fairly representative of other very standard browsers, such as Opera.
As I said, I tested my site on FF (all modern versions), Mozilla 1.7.5 and Opera (all modern versions) with good results.

Thanks for your answer,

Arie Molendijk.

[Twey]

Your answer reassures me: most of my visitors will be able to view my site as intended.Except the little half using Fx :p
As I said, I tested my site on FF (all modern versions), Mozilla 1.7.5 and Opera (all modern versions) with good results.I wonder what is different, then.

[jscheuer1]

Did you clear your cache, Twey? In FF here, it is fine even at 800 x 600 'full screen.' When the innerHeight gets below 395 then there are problems (with normal text size - Ctrl+0). But usually someone with that size window due to monitor resolution has there text size set at -1 or -2. Someone with that small of a window on a larger screen can always enlarge it if they want to boost the text size for legibility reasons.

[molendijk]

Did you clear your cache, Twey? In FF here, it is fine even at 800 x 600 'full screen.'
I noticed more than once that FF does not always do its cache-clearing job as it should. You sometimes has to force it.

Arie.

[Twey]

Yes, I did.

[RachVG]

I have a doctype problem.

I started designing with the doctype in place, but was having problems getting anything to sit right in my layout. I took a look at another site's source code, who had a similar layout to the one I was looking for. Their code was very close to mine, and it wasn't until I removed the doctype entirely that things started to show up the way I'd been intending all along.

(I'm sure I'm going to be told it's my own fault for designing using tables and absolute positioning but it's the only way I know to get the site to fall the way I wanted. I can use CSS for the obvious things [and my CSS is valid, so that at least makes me happy!] but designing with it is beyond me.)

I'm not too far into this particular layout - wanted to make sure it was valid before I added the image map or started redoing all of the other pages - so if the only solution is redesigning from scratch, I will, if I can get some tips as to how to get the layout to look the way it does currently when I take the doctype out!

This (http://www.richard-kahan.com/temp/test2.html) is how I want it to look, and it looks this way when I use no doctype. When I do use a doctype, however, this (http://www.richard-kahan.com/temp/test.html) is how much it breaks.

Any ideas as to where my code is incompatible with any doctype I've tried?

[Twey]

Because you haven't specified units for your values, any browser in standards mode will ignore those declarations completely. And yes, you shouldn't (and needn't) be using absolute positioning there, especially in pixels. First you need to have your image at the top. Then you want to float the other sections.

[RachVG]

Okay... how?

I mean, I tried what I thought was the obvious ways of doing it and none of them would line up anywhere near close. Which is why I fell back to doing it this way.

The current layout (http://www.richard-kahan.com) is designed in a similar way and is totally valid, the only real difference being the way the sidebar looks, with the css giving the header of each section a background colour rather than it just being two plain columns.

eta: I replied before you altered your post. I'm looking at the new parts now.

[RachVG]

Okay. I've opened up my source code while reading what you've said and I'm lost already. I'm pretty much self taught when it comes to HTML so I learn as I go - units for what values where?

I wasn't using absolute positioning to begin with and would happily remove it if I could get everything centred without it.

[Twey]

Here, for example:
<div style="position: absolute; top: 0; left: 100; width: 800; padding: 0px;">100 what? 800 what? The only value you've given units is the one that doesn't need them: zero :) "My house is 3 from the butchers'. If I walk at 5, how long does it take me to get there?"
I wasn't using absolute positioning to begin with and would happily remove it if I could get everything centred without it.What makes you think it's centred? Maybe on your display, but on mine it's quite some way off to the left.
I'm pretty much self taught when it comes to HTMLMe too. No excuse! :)

[RachVG]

What makes you think it's centred? Maybe on your display, but on mine it's quite some way off to the left.

Nothing, as it happens - I couldn't get it centered so I made do with a little way out from the edge!

And I didn't mean it to be an excuse for bad design - just for not quite understanding what you were getting at! I won't learn if I don't ask questions :)

Thanks for clarifying - it works now, which despite it probably not being perfect in terms of what it should be like, it's valid, so I'm happy!

[Twey]

You should understand that validation isn't an end in itself (unless you're just a show-off and like having big yellow "valid!" buttons :)). The validator is just a tool to help you achieve well-built pages.

[susie123]

Well well...having just logged back in to see if had any replies to my original question (don't know why I didn't get any email notifications re replies received), I'm amazed I caused such a stir with my problem.

Thank you all so much for your comments. At least now I can see that it's not totally 100% necessary to have the doctype although I would love it in there, I have designed almost 15 pages and can't face going through it all again to re-do the layout of each one. I have looked at the webpage links some of you provided and can see that they too are without so if they can do it, I will! HOWEVER, I HAVE LEARNED MY LESSON WELL... will not in future start a new project without the doctype firstly in place.

Thank you again and I wish you all a very Merry Christmas.

:)