doctypes, quirks, and browser misbehaviour

[robhar]

Wow - I read Tommy's June piece about HTML/ XHTML - excellent, and yet a bit too much for me as a newcomer. My head hurts but here goes!

Dreamweaver seems to be automatically creating new pages for me in XHTML 1.0 Transitional. It puts the <?xml...> gubbins at the top which I think throws IE6 into quirks mode. I found this out over a day tryig to work to why IE6 seems no longer to understand the box model. Or why Moz will not render font: shorthand declarations any more. And generally why my css font sizing was not working or was different between browsers!!

Plus, dreamweaver templates put template comments at the top of the page, which again, if I understand right, will throw IE 6 into quirks mode, and implement the IE5 box model whilst ignoring the famous hack!

I never thought I'd be spending the day tying to understand DOCTYPES but any suggestions would be extremely welcome. Thanks guys

[AutisticCuckoo]

When you create a new page in Dreamweaver, there's a checkbox that controls whether it uses XHTML 1.0 Transitional or HTML 4.01 Transitional. Make sure that it's unchecked if you want to avoid the 'XHTML' problems.

IIRC, Dreamweaver will use an incomplete doctype declaration for HTML 4.01 Transitional, so you may still have problems with quirks mode unless you add the system identifier (URI). There's probably some file you can edit to fix it permanently, but I've never investigated it.

[robhar]

Thanks Tommy, I think I'll try going back to 4.01 Transitional. Probably have to revert a few days to an earlier design. And work out why pages that use templates don't always have a comment at the top that triggers IE6 quirks mode. Appreciate the suggestion

[robhar]

Thanks, will try that - am having trouble reverting to an earlier status at the moment (I want to go back because of the risk that I corrupted the page fiddling with doctypes and xhtml markup and stuff I don't fully understand)

[AutisticCuckoo]

Why not use a strict DTD

It takes some tweaking to persuade Dreamweaver to add a Strict doctype declaration, and even if you do, it will not hesitate to pollute your markup with presentational elements and attributes that won't validate outside Transitional. (If you work in design mode, that is.)

[robhar]

OK - have got back to 4.01 Transitional, and I don't have that stuff at the top of the page or quirks mode box problem any more. You were right about the checkbox - i'd not spotted that; thanks Tommy. Don't seem to have to be Strict, thanks all4

NOW I'm trying to work out why IE6 won't show the first bullet image in a ul. Moz is fine. Life is full of nice surprises

[robhar]

And Moz still does not understand shrthand. Weird

[zcorpan]

More specifically, transitional doctypes at best trigger Almost Standards mode in Mozilla, Opera and Safari, while strict doctypes trigger Full Standards mode. The main difference has to do with vertical sizing of table cells ("Almost" follows the traditional way of shrink-wrapping images and "Full" follows the CSS way of honoring the height of the line box).

[AutisticCuckoo]

Can you show us the font shorthand that you're having problems with?

[robhar]

Thanks guys. Have not been online much today - still trying to get everything working. hey-ho, I guess I'm learning, but slowly. There are still some funnies, and for some reason moz still won't read this shorthand but goes to a large default? h1 style. I found that by accident, and that's why I put in the longhand (I have tried various sizes and units - this is how it ended up with the shorthand commented out).
It's a sunny day here and I'm going out for beer now - back on the case tomorrow :-)
You know it makes sense

h1, .strap {
font-weight: bold;
font-style: italic;
font-size: 0.8em;
line-height: 1.1;
/*font: italic bold .9em/1.1em; moz does not read shorthand !!*/
color: #f90;
margin: 0px;
padding: 0px;

[robhar]

I did remember the closing bracket by the way!!

[zcorpan]

The 'font' shorthand requires <'font-family'> to be specified, so Mozilla is correct to drop the declaration.

[AutisticCuckoo]

Yes, font must contain font-size and font-family. The other properties are optional.

[robhar]

Thanks Simon and Tommy. I have wasted a lot of time on this.... I'll go back and straighten it out

So what's the learning? I went back to my Sam's CSS guide which says explicitly 'all of these values do not need to be included in a shorthand declaration'! the fonts guide at w3c validator offers the following examples:

P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
P { font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed }

No too many font-families there either. So how do you find out about these things? How do you avoid the pain? Any suggestions gratefull accepted, but in the meantime, thank you and I will do what you suggest

[AutisticCuckoo]

There's at least one font family specified in each of those rules (sans-serif, serif, fantasy, "new century schoolbook", Palatino, "Helvetica Nue").

For the font shorthand property:

• font-size is required
• font-family is required (one or more, comma-separated)
• font-style is optional
• font-variant is optional
• font-weight is optional
• line-height is optional

Actually, the CSS2.1 specification allows you to use certain keywords (caption, icon, menu, message-box, small-caption, status-bar) or inherit instead. Those cannot be combined with any of the other properties.

[robhar]

Thanks Tommy. I guess I'm going blind and I was scanning for a longer family string

Anyway, you are right and the css validates when the family is specified

Best wishes

Rob