I’ve recently started to use iCab a lot to test my websites due to its built in error checking.  It told me I need to stick !DOCTYPE tags at the top of each page.  So I have.  However, whilst the first part (!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”) works fine, the second part, with the http:// reference, seems to make some of my pages not work.  Specifically with CSS layers and table alignment.  So I have two questions:

1 - Is it because I’m testing my websites offline that they’re not working with the new !DOCTYPE tag?  Does it *need* to load the .DTD file?

2 - Do I have to include the http reference?  iCab smiles at me even if I don’t include it.

All of this tryig to please iCab is slightly pointless, in that it doesn’t do CSS layers…  But I’m hoping for more accurate HTML overall.

Also:

3 - Why is the attribute ‘HEIGHT’ not allowed for the tag TABLE?

and

4 - If using “margin: 0px;” doesn’t work in iCab, why does it say that leftmargin and topmargin are not valid, even though they DO work, and are therefore my only option?

All help welcome,
Simon

1 - Is it because I’m testing my websites offline that they’re not working with the new !DOCTYPE tag?  Does it *need* to load the .DTD file?

If you’re trying to do standards-compliant Web pages (and it sounds like you are), then yes, it’s a good idea to include the DTD. Leaving out the DTD triggers “quirks” mode in IE, and it will render your page differently. Quirks mode is more forgiving of poorly formed HTML, but can make display a little dicey.

2 - Do I have to include the http reference?  iCab smiles at me even if I don’t include it.

Yes, if you want your code to validate.

All of this tryig to please iCab is slightly pointless, in that it doesn’t do CSS layers…  But I’m hoping for more accurate HTML overall.

Good for you! A very wise move. Web standards are the key to forward compatibility and accessibility for non-browsers like cell phones and screen readers for the visually impaired.

3 - Why is the attribute ‘HEIGHT’ not allowed for the tag TABLE?

It’s probably been deprecated in HTML 4. (I’m guessing. You’re not using tables for layout, are you? If so, Bad Little Coder! Bad!)

4 - If using “margin: 0px;” doesn’t work in iCab, why does it say that leftmargin and topmargin are not valid, even though they DO work, and are therefore my only option?

Because, as you already know, iCab doesn’t do CSS yet, and “margin: 0px;” is CSS. Leftmargin and topmargin were deprecated in HTML 4, but if you trigger quirks mode, yes, they work (I think they were in HTML 3.2).

I would suggest using a different browser to preview your pages. iCab is nice, but it doesn’t support too much of CSS, so things will look funny whether they’re coded properly or not, and you’ll wind up beating your head against the wall. Use IE, Netscape or Opera, all of which do a great job on CSS (though they each have their quirks and weak spots). Even better, use all three.

The World Wide Web Consortium has excellent validators for HTML and CSS .

If you want to learn more (and you should start learning CSS positioning), Zeldman has some great links to tutorials and sites where you download sample style sheets to steal…and learn from (scroll down to the CSS subsection). Also, A List Apart publishes every Friday and is always interesting.

Hope this helps.

Leaving out the DTD triggers “quirks” mode in IE, and it will render your page differently. Quirks mode is more forgiving of poorly formed HTML, but can make display a little dicey.

The only differences I’ve noticed so far are that it doesn’t want to align my tables to the right (which I think I can fix if I use some extra CSS, as the alignment is in the TD tags at the moment (very old website)) and also that a scroller I’ve used on a couple of pages (to be found here; http://www.ghtml.com/showoff/scrollbar/index.html ) won’t work if I include the DTD tag, at least not on a Mac.

(I’m guessing. You’re not using tables for layout, are you? If so, Bad Little Coder! Bad!)

I use tables for layout extensively, throughout nearly all my sites.  What else is there to use?  Precise positioning of layers using CSS is very bad for older browsers.  Frames do not allow for direct linking to pages.  Currently using JavaScript to insert HTML as HomePage won’t let me use SSI, and the HTML that is inserted is basically the table structure.  So if you have JS disabled you get the plain content, but not the navigation, header of footer bars.

I would suggest using a different browser to preview your pages. iCab is nice, but it doesn’t support too much of CSS, so things will look funny whether they’re coded properly or not, and you’ll wind up beating your head against the wall. Use IE, Netscape or Opera, all of which do a great job on CSS (though they each have their quirks and weak spots). Even better, use all three.

Or even six.  I have IE5, OmniWeb, iCab, Opera, Mozilla and Netscape on my iBook so that I can make my sites work as well as possible in all of them.  iCab and Opera seem to be the ones with the most problems but now I’ve solved most of the lazy coding I had all is well.

The World Wide Web Consortium has excellent validators for HTML and CSS .

Can’t use as my iBook is offline semi-permanently, but when I go home for the holidays I’ll give them a go.

(and you should start learning CSS positioning)

Is that like indenting tables etc. in regular HTML?

Thanky,
Simon

_________________
 

<font size=-1>[ This Message was edited by: megasad on 2002-03-22 14:47 ]</font>

a scroller I’ve used on a couple of pages (to be found here; http://www.ghtml.com/showoff/scrollbar/index.html ) won’t work if I include the DTD tag, at least not on a Mac.

If the DTD screws it up, you might have some little blip in your code, like improperly nested tags. When you get a chance, run it through the W3C validator and see what it says. If you check all the boxes, it’ll spew more than you want to know about any errors.

Precise positioning of layers using CSS is very bad for older browsers.

Not if you use @import. The New York Public Library has a great style guide for accommodating older browsers. Yes, they use tables, but on a limited basis. I don’t use them at all, because I’m too lazy to go through and pull out the CSS that works/doesn’t work with NN4. So I bypass them entirely, but the content is still there, just not as purty.

Currently using JavaScript to insert HTML as HomePage won’t let me use SSI, and the HTML that is inserted is basically the table structure.  So if you have JS disabled you get the plain content, but not the navigation, header of footer bars.

Eek! That sounds like a nightmare to me! My techniques , though simplistic, result in tidy little pages. And they’re easy to maintain.

Is that like indenting tables etc. in regular HTML?

No it is not. When you use CSS, you separate presentation from content, which is A Good Thing. HTML is meant as a structural language, not presentational markup.

Didacticism aside, it’s also more convenient, once you get the hang of it. The pages are easier to read when you have to open them up again in Pagespinner, and you can re-design whole sections of your site quick as a wink by changing one little style sheet.

If the DTD screws it up, you might have some little blip in your code, like improperly nested tags. When you get a chance, run it through the W3C validator and see what it says. If you check all the boxes, it’ll spew more than you want to know about any errors.

Amazingly, the page that is currently online is near-perfect; all that’s missing is that the required attribute “TYPE” was not specified for a piece of JavaScript (what value should I insert here?) and a whole load of ALT tags were missing for the images.  And, of course, the !DOCTYPE thing.  So I’m thinking it’s because I’m not testing the new one online that I’m having trouble.

Some questions:
1 -
and <img> tags need </br> and </img> to close them now?
2 - Images MUST have the ALT tag?
3 - The attribute BORDER is no longer valid for images?  But if you don’t include that, IE defaults linked images as having a stinking blue border.  Curses.
4 - And I don’t have to say that a script is of the language JavaScript?

Currently using JavaScript to insert HTML as HomePage won’t let me use SSI, and the HTML that is inserted is basically the table structure…

Eek! That sounds like a nightmare to me!

Quite the opposite.  By changing a handful of JS files (9 at present, but could easily be taken down to 6 if I could be bothered) and 1 CSS file, I can change the entire look of over 700 pages.  The only problem is if someone has JaveScript turned off, but I have a thing telling people to switch it on if they do.  And in the last week only 1 person hasn’t had it on (out of 50).

When you use CSS, you separate presentation from content, which is A Good Thing. HTML is meant as a structural language, not presentational markup.

I like the sound of this and shall learn it.  But I really like tables too, so as long as they’re considered part of HTML by the W3C I’ll probably stick with them.  Which browsers support this fully?

And do you know how I can centre an image vertically, without using height=“100%” in a table around said image?

Thanks,
Simon

Amazingly, the page that is currently online is near-perfect; all that’s missing is that the required attribute “TYPE” was not specified for a piece of JavaScript (what value should I insert here?)

I think this is what you’re looking for:
[removed][removed]

So I’m thinking it’s because I’m not testing the new one online that I’m having trouble.

Hmmm…but Javascript runs in the browser, so online/offline shouldn’t matter, right? We’re running into the wall of my ignorance here, since I don’t get that elaborate. But ya know who does? Oops! I was gonna say k10k, but they’re down for renovations. Take a look at this script library . They’re scrollers of various types. You might find something similar you can tweak for your use, or at least pick apart and learn from.

1 -
and <img> tags need </br> and </img> to close them now?

Only if you’re using XHTML. And it’s
and <img >. The space before the slash keeps it from freaking out older browsers.

2 - Images MUST have the ALT tag?

Yes. Provides accessibility for visually impaired users, and it’s a courtesy for people on dial-up in case they have images turned off. Imperative for nav images/buttons.

3 - The attribute BORDER is no longer valid for images?

“img {border: none;}” in your style sheet will clear that right up.

4 - And I don’t have to say that a script is of the language JavaScript?

Yeah ya do; see above.

Quite the opposite.

Hey, man, more power to ya! If it works for you, knock yer socks off.

I like the sound of this and shall learn it.

Good to know my evangelism didn’t turn you off too much! But it’s not a bad thing to know. Here in the US, government agencies are starting to require accessibility on their Web sites, and table placement wreaks havoc with screen readers.

And I dunno, I started reading Zeldman a couple of years ago when I was first learning HTML, and I kinda followed him through the whole transition, and they underlying theory, the simplicity, the accessibility—it all appeals to me on some Platonic-ideal kinda level.

But I really like tables too, so as long as they’re considered part of HTML by the W3C I’ll probably stick with them.

Oh, tables will always be with us; they’re necessary for, uh, tables (e.g. Average Monthly Rainfall By City). But the W3C is trying to nudge people away from using them for layout.

Which browsers support this fully?

Well, nobody’s got CSS2 in its entirety, but Netscape, Opera and IE5 are all close, in roughly that order. Western Civilization is an Australian company that makes a couple of CSS tools, and they’ve got tons of info on which browser supports what, plus lots of tutorials and links and stuff.

Another fun site is Eric Meyer’s CSS Edge . He wrote O’Reilly’s CSS book, so he obviously knows his sh*t, and this is his little playground of stupid CSS tricks. Not many things there yet, but I’ve already nicked a couple for my stuff.

And do you know how I can centre an image vertically, without using height=“100%” in a table around said image?

I saw that! I’m pretty sure I can, but I can’t tell you off the top of my head; I’d have to play around with it. I’d planned to look at it tonight or tomorrow. Will let you know.

2 - Images MUST have the ALT tag?
Yes. Provides accessibility for visually impaired users, and it’s a courtesy for people on dial-up in case they have images turned off. Imperative for nav images/buttons.

But not for 1x1 transparent GIFs, used to space stuff out, right?

After looking in vain for PDFs of the HTML and CSS specifications, I finally went to the W3C page and there they were, in kind-of-plain sight.  So I shall be downloading those and using them to make shiny new versions of my sites and then people fifty years from now will be able to read in their brain-browsers about how Bob Lappan was the man who lettered a book called Brooklyn Dreams.

Thanks for all the help,
Simon