So what is the deal with Doctype? (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

rdouglass -> So what is the deal with Doctype? (4/26/2006 23:36:58)

Maybe someone could paraphrase an answer for me. [;)]

Why would I need to use a "strict" doctype anyways? I have this page:

http://www.rogerdouglass.com/rhino/default1.asp

that works great with a Transitional Doctype but works fine with IE using a strict doctype and *not* with FF. I'm sure if I played around with it enough I could make it look the same but why would I? What is the advantage of having it 'strict' (or is there)?

I do have one or two little IE tweaks that don't seem to be effected by it.

If I use strict, can I do without the IE tweaks if I develop for FF? I prefer to develop for FF and fix for IE but something about this one seems backwards.

So do I develop for "strict" and fix for "transitional"? [&:]



Tailslide -> RE: So what is the deal with Doctype? (4/27/2006 2:52:12)

The general advice from the standards Gurus is that you should be designing for Strict - whether it's HTML 4.01 or XHTML 1.0 it doesn't matter. They reckon that it's better, for instance to design to HTML 4.01 strict than XHTML 1.0 transitional.

This is from Tommy Olsson:

quote:

In my opinion, using a Strict DTD, either HTML 4.01 Strict or XHTML 1.0 Strict, is far more important for the quality of the future web than whether or not there is an X in front of the name. The Strict DTD promotes a separation of structure and presentation, which makes a site so much easier to maintain.


Transitional DOCTYPES are for designing sites that are using lots of legacy code - it basically allows some mixture of content and presentation that is not allowed in strict DOCTYPES. Apparently, browsers behave themselves better in Strict mode and are using their most standards compliant behaviour. With Transitional DTDs they go into "almost standards" mode. I don't have any example that I could give you to prove that apart from various articles that state it.

My understanding of the differences of IE and Gecko/Opera/safari browsers on this matter is slightly shaky. My understanding is that as long as you have a complete DOCTYPE, IE will work in Standards mode. The other browsers will only be in full standards mode with a strict DOCTYPE.

Far as your particular page goes - you've got a lot of inline CSS there which may be conflicting with the embedded or external CSS and might produce unexpected behaviour with FF in strict mode - that's just a guess though without going through the whole thing.

My personal opinion is that we should be using a strict DOCTYPE at all times. If you've got a bit of code that you just cannot get to validate as Stict then you must weigh up whether you'd prefer to do without it or drop that particular page to transitional. I tend to do the former but then I know I'm a bit of a nut when it comes to these things.



rdouglass -> RE: So what is the deal with Doctype? (4/27/2006 9:04:02)

quote:

you've got a lot of inline CSS


Thanks. That explaination helps a lot.

So what is a lot? Is there a magic number of inline CSS? I tend to think not since there rarely ever is. I tend to generalize about half of my div's and customize each individual div using inline CSS (normally positioning or font tweaking).

Most of my inline stuff there has to do with the rounded corners but I can 'class' all of those.

And I thought that inline was allowed and encouraged hence the word "Cascading" in CSS.



Tailslide -> RE: So what is the deal with Doctype? (4/27/2006 9:14:27)

The ideal amount of inline CSS I'd say is none. The reason for that is just that it removes all the advantages of having an external stylesheet - i.e. changing things in one place rather than throughout the site - if that makes any sense. It also complicates things when you have to work out the cascade precedence of something - much easier to just have it all external.

I have found one occasion when having a rule in either externally or embedded just didn't work and it had to be inline - I didn't have time to chase it down so I left it inline. (it was to force an element to have "layout" for IE so I knew it wasn't something that I'd be changing).

It's just a case of trying to make life easier!



rdouglass -> RE: So what is the deal with Doctype? (4/27/2006 9:28:11)

quote:

It's just a case of trying to make life easier!


Aha! I knew that had to be in there somewhere.[:D]

Actually, that is one reason why I have inline stuff: since this particular page is DB driven, it is many times easier for me to 'write' the stuff to the browser inline instead of determining some specifics in the external.

I do that on occasion by using an external css like style.asp (instead of .css) but not very often. And when it's DB driven, I can still take advantage of making the change in fewer places, not one (more like two) but still fewer.



Tailslide -> RE: So what is the deal with Doctype? (4/27/2006 9:32:44)

I can see why you'd use inline CSS with a db - but you could use classes though instead couldn't you? Or am I just being difficult! [:D]



rdouglass -> RE: So what is the deal with Doctype? (4/27/2006 9:35:14)

quote:

but you could use classes though instead couldn't you? Or am I just being difficult!


Nope, you're not being difficult, you're being proper. I'm just being lazy. [:D]

I *should* go back and do it the right way. [&o] [;)]



Tailslide -> RE: So what is the deal with Doctype? (4/27/2006 9:58:32)

quote:

ORIGINAL: rdouglass

quote:

but you could use classes though instead couldn't you? Or am I just being difficult!


Nope, you're not being difficult, you're being proper. I'm just being lazy. [:D]

I *should* go back and do it the right way. [&o] [;)]


You know I've bookmarked the site and I'll check back in a few weeks!! [:D][:D]



jaybee -> RE: So what is the deal with Doctype? (4/27/2006 11:49:19)

She will you know. [:D]



c1sissy -> RE: So what is the deal with Doctype? (4/28/2006 17:22:30)

quote:

I *should* go back and do it the right way.

I uhmm, have to agree with this statement ;)



rdouglass -> RE: So what is the deal with Doctype? (4/28/2006 20:55:04)

Hey, it hasn't been a week yet! [:D] It's almost ready.



c1sissy -> RE: So what is the deal with Doctype? (4/28/2006 21:02:08)


quote:

ORIGINAL: rdouglass

Hey, it hasn't been a week yet! [:D] It's almost ready.

Ok, but know what? I think you did a heck of a job, seriously.!



rdouglass -> RE: So what is the deal with Doctype? (4/28/2006 21:22:26)

Thanks.

OK. Been working on it some more and now it validates XHTML 1.0 Strict. (It really wasn't that difficult to do BTW.)

So my next Q is "Is it accesible?" (or should I move this to the appropriate forum?)



c1sissy -> RE: So what is the deal with Doctype? (4/28/2006 21:24:47)

If you have the IE developers toolbar it should be on there for validation, if you don't have it download it.

Also there is the one for firefox, I actually use both.

I use them for xhtml validation and css validation, for every page that I do. when I do a page i make sure it validates, then I go for the other things to see if I have made them, most of the time so far, I have.

You can take it to the other forum as well, but I think that it fits into this topic as well, so it is up to you [;)]



rubyaim -> RE: So what is the deal with Doctype? (4/29/2006 0:02:55)

quote:

So my next Q is "Is it accesible?"


Roger, I think this is a great page. It is especially good for those who rely on images and short sentences. The users I have who are like this would be very impressed.
It's also fine with the styles disabled [:)]

I'd probably change the alt text on the images to be empty (alt=""), as the actual page text covers the image content.

Maybe play with titles on the links (eg "Our range of kitchen appliances")

You could also play around with setting Tabindex just for fun, though I probably would not use it on a page like this. If you do use it, this is worth a read.

On the automated checks with Cynthia it is failing P3 on 4.3 "Identify the primary natural language of a document."

TAW is highlighting P2 3.4
quote:

3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values.

* This element uses absolute units of measure rather than relative units of measure (4)
*
o Line 26: <div class="bl" style="width:630px;height:430px;">
o Line 26: <div class="bl" style="width:630px;height:430px;">
o Line 26: <div class="tr" style="width:630px;height:430px;">
o Line 26: <div class="tr" style="width:630px;height:430px;">


When I linearised the page the images appeared over the text - that was solved by turning off the images - someone else may be able to suggest what to do about this, if anything, as I've never tried a design like this with css.

I played around once with something like this in css but got so frustrated I gave it away [&:]



dpf -> RE: So what is the deal with Doctype? (4/29/2006 0:11:47)

quote:

When I linearised the page
please explain what you mean by that



rubyaim -> RE: So what is the deal with Doctype? (4/29/2006 0:23:49)

FireFox dev toolbar >Miscellaneous > Linearize Page.



dpf -> RE: So what is the deal with Doctype? (4/29/2006 0:25:42)

what happens when you do that - what does it mean?



rubyaim -> RE: So what is the deal with Doctype? (4/29/2006 0:41:58)

A good example is a page using tables for layout (and I still have several thousand).

Example Here

see also

http://www.w3.org/TR/WCAG10-HTML-TECHS/#wrapped-text

I check my 'css for layout' pages as well and actually can't see much difference between them and the 'tables for layout' as the 'tables for layout' were built to linearise...

IMO screen readers fall down on reading tables if they are only displaying the first line in a cell.

I have data tables where the text will wrap in cell showing something like a comment field, yet using a table is the logical way to display the data as it's tabular. I've changed most of my data tables to be 'accessible' and they linearise okay, but I've never tested them with a screen reader.



Tailslide -> RE: So what is the deal with Doctype? (4/29/2006 3:40:08)

Far as accessibility goes - it passes Cynthia priorities 1 and 2 which is pretty good. Thing is with these automated checks is that they're more of a "gross error check" than a final score if you see what I mean.

I'd add in a focus rule like this: 

#productDiv1 a:focus, #productDiv1 a:hover , #productDiv1 a:active {color: red;}


NB far as I know, you need the full div name to get the link to apply just to that div - if you leave it off it won't work as you want.

You'd also need to dump the px font-sizing and switch to a % or ems.

You've done an excellent job with what you've produced though - especially since I understand that it's db driven.

My only criticisms would be that because of the type of design you've gone for, which is very tight and precise it doesn't allow for any flexibility with text size increases etc. You'd ideally want a design that will take a minimum of 2 font-size increases in FF and to the largest text size in IE.

Also - you've got a ton of extra divs in there to support the rounded corners etc.

Far as those two criticisms go - please don't take them to heart - they're meant as something that you can take forward to your next design. I think (apart possibly from a few geniuses) ALL of us who use CSS layouts have gone through this stage - of using too many divs and of trying to "fix" the design/layout.

It will take a while to get the hang of making it more flexible and of using as few divs as possible or as necessary - have a look at this site: http://jasonspage.net/blog/nodiv/ There are absolutely no divs in that design. He's used the elements of the page themselves as the "hooks" to apply the styles to. I'm not suggesting that you try to do this - but I know from personal experience that it took me a while to realise that I didn't need <divs> around everything on the page.

These are just things to bear in mind for the future.



yb2 -> RE: So what is the deal with Doctype? (4/29/2006 6:08:06)

quote:

have a look at this site: http://jasonspage.net/blog/nodiv/


that is a very interesting link - less code = better code, IMO. It has been bookmarked!



rdouglass -> RE: So what is the deal with Doctype? (4/30/2006 22:20:57)

quote:

have a look at this site: http://jasonspage.net/blog/nodiv/ There are absolutely no divs in that design.


OK no divs but not very exciting either. [;)]

quote:

It will take a while to get the hang of making it more flexible and of using as few divs as possible or as necessary


And that's where it comes down to the issue. There is a line where you get that "law of diminishing returns' that'll kick in. I could spend eons tweaking a page, rewriting it, and refining it down to the absolut eleast number of divs, possible, the tightest code imaginable, accesable to the wazoo, etc. but will it really make that much difference?

quote:

Also - you've got a ton of extra divs in there to support the rounded corners etc.


Where is that line? So it takes me 4 divs to round my corners each time. I've been hearing how "too many inlines" and now "too many divs" will cause issues. And now I get shown a page with no divs and it looks very plain IMO. [8|] [:o] [:'(]

Do I really believe someones gonna' pay me to make a page like that one with no divs? I really doubt it no matter how technically cool it is.

And besides, if it's a truly "compliant" language in the strictest sense of the word, it shouldn't matter whether it's 1 div or 1000 divs. If they all use the same rules, it should not matter. (I know in most other "languages" a rule by definition can be relied on to work a certain way every time.)

And if this CSS styling works one way sometimes and another way sometimes - but don't use this too often kinda' thing - well it sounds pretty wishy-washy to me. I know that if I use 200 variables in a VBScript, I know I can count on those variables being predictable.

But thanks for the other advice - really does help. [;)]



rdouglass -> RE: So what is the deal with Doctype? (4/30/2006 22:26:52)

quote:

A good example is a page using tables for layout


I thought we were supposed to get away from tables? [&:] [&:] [&:]

I know there are times when to use them, but I've been trying to use them only when absolutely necessary. Maybe I'm just taking all that stuff too literal but using the box concept with divs does work in place of tables if you start thinking along those lines regularly.

Just as a side note, I don't think I could have done the rounded corners as quickly with tables as I did with the divs.



rubyaim -> RE: So what is the deal with Doctype? (4/30/2006 22:39:49)

quote:

I thought we were supposed to get away from tables?


I probably should have said if you are using tables for layout you might want to check that they lineraise [&:]

I check that my css pages linearise as my first attempt looked shocking, far worse than any table layout page I'd done. Thankfully I have progressed.

Personally, I don't care what anyone uses for layout as long as it works [;)]

The main reason I've been switching to CSS is due to sheer laziness on my part.



Tailslide -> RE: So what is the deal with Doctype? (5/1/2006 2:57:24)

As far as how many divs are too many - Really it's just a case of trial and error. The example given of a page with no divs isn't terribly exciting - it's making a point rather than trying to be exciting (and I did say that it wasn't something I'd suggest you do!).

The idea is that there's no point in doing this for example: 

<div id="list">
  <ul>
   <li>one</li>
   <li>two</li>
  </ul>
</div>


When you can position and style the list without the div around it. Do you see what I mean? In that case the <div> is superfluous and should be done away with.

I'm not suggesting you should take 3 days to tweak your design to remove a couple of extra divs - I'm suggesting that as you move on to other sites you should bear that in mind - it's as easy to style and position a list (in this example) as to add more markup around it and style that. Why bother? Well because it takes more time and effort to add an unecessary div in - why bother with extra effort if you don't need it?

It probably took me the best part of two years to figure that one out and make my sites much leaner with less markup - I'm trying to save you the trouble!! [:D]






c1sissy -> RE: So what is the deal with Doctype? (5/1/2006 6:36:38)

quote:

You'd also need to dump the px font-sizing and switch to a % or ems.



best way to do this, and i know you have seen my style sheets, in your body, html put your font size as you see it in my css sheets.

IMO, I think divs are fine and there is no problem with them, it depends on your layout. I used a fixed width then floats within, The last pages I did whne I passed them off for the next level of work passed both cynthia tests, so as long as I vailidate and pass cynthia, I am fine with how my pages are done.



Tailslide -> RE: So what is the deal with Doctype? (5/1/2006 6:55:23)

quote:

ORIGINAL: c1sissy

IMO, I think divs are fine and there is no problem with them,



You're right they are - it's a question of not having unecessary ones to make your life easier [:D]



c1sissy -> RE: So what is the deal with Doctype? (5/1/2006 6:58:33)


quote:

ORIGINAL: Tailslide

quote:

ORIGINAL: c1sissy

IMO, I think divs are fine and there is no problem with them,



You're right they are - it's a question of not having unecessary ones to make your life easier [:D]

So far no problem on my end, I comment begining and ending of each one, which I stress, to people on different forums when the post code that you have to wade through, COMMENT, I can't stress it enough, even if you have to put in a hack or soemthing different from your normal code,
If something is really complicated create a second style sheet for that item, I comment begining and ending of the navs on my style sheets, It is crucial to comment your stuff both xhtml and css



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.125