16 replies [Last post]
woodblock100
Offline
newbie
Last seen: 14 years 47 weeks ago
Joined: 2006-06-18
Posts: 6
Points: 0

May I ask assistance with a Doctype problem?

There are many very old pages on my site, some dating from as far back as 1997. These have horrible markup, lots of font tags, no css, no doctype, etc. etc., and I am gradually working through to clean them up and modernize the site.

But on some of the pages, after I clean it all up, add css, and then add a Doctype, the page won't display with correct style information. If I remove the Doctype, it displays fine (Mac: Firefox/Safari). I have tried using every possible Doctype I can think of, but nothing seems to work.

The html and the css both validate with the W3C tools.

I have made a stripped-down version of one of these pages, with css shifted to 'inline' for easy checking, and hope somebody can give me some advice on this.

Page that displays correctly (has no Doctype so presumably in 'quirks' mode):
http://woodblock.com/test_section/index.html

Page that won't display correctly (identical coding except for the Doctype):
http://woodblock.com/test_section/index_test.html

I've struggled with this for just too many hours now ... I hope somebody can point me to what I'm doing wrong. Thanks!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 11 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Works without Doctype - won't work with Doctype - what's up?

It seems to me you are confusing "displays properly" with "displays the way I like it".

If you are using a compliant browser the page with the correct doctype will display "properly", that is according to the CSS specification, and presuming your xhtml and CSS are correct.

The fact that the "correct" display is not what you want is an artifact of your design process. If you design to invalid html without a doctype you have no assurance of how it will look in other browsers. If you design to a correct doctype and use valid code you are assured that any browser that is CSS compliant will display it pretty much the same way.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

woodblock100
Offline
newbie
Last seen: 14 years 47 weeks ago
Joined: 2006-06-18
Posts: 6
Points: 0

Works without Doctype - won't work with Doctype - what's up?

Quote:
confusing "displays properly" with "displays the way I like it".

Thanks for the reply ... I don't think it's just my 'preference' - much (not all) of the css is being ignored in the 'with Doctype' version. For example, the paragraph-tagged text in the lower section of the page should be 'italic' according to the css, but this is not happening. In the 'quirks' mode, it is.

What I can't understand here is why the 'correct' (is it?) css/html combination isn't producing the 'correct' display.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 11 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Works without Doctype - won't work with Doctype - what's up?

Well, your html is so complicated and strange to me that I can't draw any conclusions about what's wrong. You are using images where you should be using headers, tables for layout, and tables for lists of links.

Your xhtml is valid, but it is not semantically marked up and the tags you use have little relationship to the meaning of your content.

Overall your page is badly over-complicated and could be done much more simply. You have a fairly bad case of divitis on top of tables for layout!

It's no wonder you're losing control of it, in my opinion. It's certainly too complicated for me to understand enough about it to be able to tell you how to correct it.

BUT I do know this. The page you say is "incorrect" is actually being displayed correctly, that is according to the xhtml and CSS you are giving to browsers.

Since you have no xhtml errors and your CSS also validates, it follows that this page is displaying exactly the way you have told browsers to display it. The fact that it may not look like you want it to is beside the point. A browser can only display a page in the way you tell it to.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

drhowarddrfine
Offline
Leader
Last seen: 11 years 23 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Works without Doctype - won't work with Doctype - what's up?

You cannot try and make the doctype fit the code. You must make the code for the doctype. Using no doctype means you are following quirks rules from 1998 and before. With the proper doctype you are following the modern rules for browsers. This is why your page changes with different doctypes.

If you cut/paste some of this code, that could be part of the problem. That's like taking clothes from a 1960s Barbie doll and putting them on a 2006 version. It just doesn't look right. (Where oh where did I come up with that?)

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

stonewall
stonewall's picture
Offline
Enthusiast
between a rock and a hard place
Last seen: 15 years 5 weeks ago
between a rock and a hard place
Timezone: GMT-5
Joined: 2006-04-06
Posts: 93
Points: 0

Works without Doctype - won't work with Doctype - what's up?

you're second link (the one with a doctype) has two #pagefooter ids being used, which is illegal. Also, you haven't used the same case between the CSS and the html. (#pageFooter vs. #pagefooter)

woodblock100
Offline
newbie
Last seen: 14 years 47 weeks ago
Joined: 2006-06-18
Posts: 6
Points: 0

Works without Doctype - won't work with Doctype - what's up?

Quote:
you're second link (the one with a doctype) has two #pagefooter ids being used, which is illegal. Also, you haven't used the same case between the CSS and the html. (#pageFooter vs. #pagefooter)

Sorry ... these were both temporary glitches ... I was working on it 'as we speak', trying to take in some of the comments, and adjusting the page accordingly.

After some adjustments, the two versions have become much closer - so my earlier comments ('no italic') no longer apply ... sorry.

I've removed a couple of the tables, as per Ed's suggestions, but am left with one that I just don't see how can be removed. You know the kind of table with 9 cells ... with background images in the outer 8 cells, and the content in the center? I really don't see how that sort of layout can be done with css - at least not in as neat and clean a way as with a table. (The example on my page is the 'image_well' div ...)

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 11 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Works without Doctype - won't work with Doctype - what's up?

woodblock100 wrote:

I've removed a couple of the tables, as per Ed's suggestions, but am left with one that I just don't see how can be removed. You know the kind of table with 9 cells ... with background images in the outer 8 cells, and the content in the center? I really don't see how that sort of layout can be done with css - at least not in as neat and clean a way as with a table. (The example on my page is the 'image_well' div ...)

I see nothing in that table that couldn't be done much more easily and semantically with a simple <ul> and a well placed float:left on the <li> elements.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

woodblock100
Offline
newbie
Last seen: 14 years 47 weeks ago
Joined: 2006-06-18
Posts: 6
Points: 0

Works without Doctype - won't work with Doctype - what's up?

Quote:
I see nothing in that table that couldn't be done much more easily and semantically with a simple <ul> and a well placed float:left on the <li> elements.

Hmmm ... turning a 3 x 3 grid of nine elements into a 1-dimensional 'list' isn't perhaps obvious to some of us ...

I use the ul - li construct in many places on the site for creating navigation menus, where the items line up in a row (http://www.asahi-net.or.jp/~xs3d-bull/main_page.html), but am not sure that I can see how it could create a 'box' of the type on the page we are looking at.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 11 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Works without Doctype - won't work with Doctype - what's up?

woodblock100 wrote:

Hmmm ... turning a 3 x 3 grid of nine elements into a 1-dimensional 'list' isn't perhaps obvious to some of us ...

Really the first question you should (in my opinion, of course) be asking is "what serves the user"? What makes the content most useable?

I don't see any structural reason for insisting on a 9x9 grid in the first place. What you have there structuraly is a list of links. By putting a list in a table like that you are just making it harder for browsers, and less accessible to people with handicaps.

But, if you insist on a 9x9 grid you can still do it with a properly styled list and have the best of both worlds in that it will look they way you want it and the markup will also reflect the meaning of the content.

I think you are still under the spell of layout. Layout is important, but it is not the most important. By and large people won't come to your site because they like the layout, they will come for content they want to get access to.

That's why we should write semantic html first, and then use CSS to make a creative, helpful layout. A bad layout can still work if the content is something people want. Lack of content will drive people away from the best layout on the planet. The best of both worlds is useful content that's laid out to make the content easily useable for as many people as possible.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 7 weeks 1 day ago
Joined: 2004-06-30
Posts: 9674
Points: 810

Works without Doctype - won't work with Doctype - what's up?

"Let's see, I've got a list of links . . . I know, I want a nice background for it so instead of using a semanitc <ul> list tag, I'm just gonna whack it in a table."

Verschwindende wrote:
  • CSS doesn't make pies

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 9 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Works without Doctype - won't work with Doctype - what's up?

You guys! Don't be so harsh. He's using the table to create the decorative border. Doing that with pure css is not intuitive and is easy to mess up, even for the more experienced. Put switching that over on the back burner for now. The table is not at issue for html validity.

@woodblock100: The list of links is a list, and would best be marked up as one. Style the list items as inline, and you should see little difference. The structure and meaning would be enhanced, though. That's the kind of thing that will be second nature soon.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

woodblock100
Offline
newbie
Last seen: 14 years 47 weeks ago
Joined: 2006-06-18
Posts: 6
Points: 0

Works without Doctype - won't work with Doctype - what's up?

Quote:
The list of links is a list, and would best be marked up as one. Style the list items as inline, and you should see little difference. The structure and meaning would be enhanced, though. That's the kind of thing that will be second nature soon.

OK, that's done ('Listamatic' provided plenty of interesting advice ...)
http://woodblock.com/test_section/index_test.html
(But honestly speaking, I wonder if such a change actually brings any benefit worth the increased complexity?)

Anyway, if I might bring this back to my original problem - the question of why the addition of a Doctype declaration causes an (apparent) loss of functionality. I guess my original example at the beginning of the thread was not concise enough, so may I try another example?

I prepared some stripped-down pages to show what I mean: the first page allows visitors to the website to set their font preferences (which otherwise default to their own browser settings). This is linked to two identical pages that test the functionality (by checking the cookie set by the previous page, and then re-writing the style sheet on the fly). All pages (and their css) validate. The test page with no Doctype declaration works fine (in my own testing - Firefox/Safari on Mac); the one with the declaration refuses to work.

http://woodblock.com/test_section/preferences.php5en

If any of you have any ideas why this is so, it would be a great help ... thanks ...

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 9 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Works without Doctype - won't work with Doctype - what's up?

Not tested.

This is the page as received.

/*xxxx*/ body { font-family: "default" ; font-size: 10px; } 

This is the server response header.
Response Headers - http://woodblock.com/style/font.php5en

Date: Mon, 19 Jun 2006 12:14:30 GMT
Server: Apache/1.3.29
X-Powered-By: PHP/5.0.4
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html; charset=utf-8

200 OK

CSS content type should be text/css. See if applying the proper header makes a difference.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

woodblock100
Offline
newbie
Last seen: 14 years 47 weeks ago
Joined: 2006-06-18
Posts: 6
Points: 0

Works without Doctype - won't work with Doctype - what's up?

Quote:
See if applying the proper header makes a difference

Bingo! Fantastic ... thank you very much - I wouldn't have caught that in a hundred years!

May I ask ... what tool did you use to inspect those headers?

Dave

drhowarddrfine
Offline
Leader
Last seen: 11 years 23 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Works without Doctype - won't work with Doctype - what's up?

Firefox has two extensions for doing that. One is Tamper Data and the other, I forgot the name. HTTPView? HTTP something.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 9 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Works without Doctype - won't work with Doctype - what's up?

I used the Firefox web developer extension, under information select view response headers.

Also, in Firefox, click on tools, or right click, and select page info.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.