W3 validator...

Andi, what's the url of the page in question? I'll help translate the validator's comments. You must remember that an error in one location can cause cascading errors in things that are otherwise correct.

Suzanne

oh, it's:

http://www.andilinks.com/index.htm

Which is also the "www" button on the post, sorry.

Andi

It's okay, I just don't like to assume with urls -- people don't always want the site in their profile gone over with a fine toothed comb...

Okay, first off, you cannot have hard returns within an attribute value, nor within a meta tag at all. That's causing a number of cascading errors (errors in things that would otherwise be fine).

Secondly, your DOCTYPE isn't correct.

Some general tips that will help you always have valid code:

1. Enclose attribute values in double quotation marks: attribute="value"
2. Don't have hard returns within elements.
3. If you're using CSS, don't use -- it's deprecated, and a waste of time and code. It also makes things far too complicated for troubleshooting.

Specific Errors:

1. style type="text/css" (needs quotes)
2. name="Custom" is invalid for (remove)
3. <script language=JavaScript type=""> should be <script type="text/javascript"> (without the spaces this board puts in)
4. Same line, the is nested wrong ( instead of correctly but if you didn't use font tags, you would need any of that in the first place)
5. You have a fair number of nesting errors, all tags.
6. bgproperties is for only, not
7. You should really type &amp; instead of &
8. last line of code before you close the body tag: you have two open center tags instead of an open and a close. (typo)

Once you get those cleaned up, if you run it through the validator you'll have a better chance of seeing where other problems are.

I use htmlvalidator.com because the error reports are very helpful and explain things in easy to understand ways. Plus it colour codes errors and you can click on an error and go there in the code.

Suzanne

Suzanne--

Thank you for the effort you've put into pointing out many of my errors. I was already aware of a few, but the key thing for me now is the deprecation of the element. I had read this before, but couldn't believe it was so, because my site as it is currently constructed does not (cannot, will not) work without this element because I must change font sizes within the line.

So the conclusion that I draw is the one I had suspected all along--my design must be reworked to eliminate tables entirely. This will be a big job of course, so I'll simply have to continue to use the current, flawed design until I can come up with the entirely new concept. No point really in trying to repair something that is on its way to the junk heap. There remain so many contradictions that I despair even in pointing them all out.

My content is an MS Access database and I'll just to add to it for now. Thanks again, I'll no doubt have more questions when I find a new site design that I like.

Andi

Andi, if I showed you any of my sites, you'd find a handful of errors. Errors are subjective -- in a different time, none of the font or nesting errors would have been errors at all.

You don't need to go to table-less to fix font tag issues. Just use instead of and make special classes in your CSS for the looks you need. Not only will this be less code, you can change the look at a later time without having to touch your content at all.

This text will be small
This text will be huge

Then declare the classes in your CSS file:

.smalltext { font-size: 11px;}
.hugetext { font-size: 20px;}

Moving to CSS doesn't mean you have to leave tables behind at all. Nor does moving to xhtml from html 3.2 (your code is more 3.2 than 4.01 transitional).

hth,

Suzanne

Thanks again for the help Suzanne.

It is time for me to narrow the focus and redefine the goals of my website and revamping the design at this same time seems to be a good idea.

I do believe I've heard that tables will eventually be deprecated entirely in favor of style sheets, so I might as well get ahead of that change with this transition.

I understand the increased versatility of the element over , but I fail to see how this:

This text will be small

is less code than this:

This text will be small

Effecting a global change from "font" to "span" will be easy in any event with find/replace, and I have found a text replacement utility that will work with multiple files, though I haven't tried it yet.

BK ReplaceEm

I don't know how fast this site remodeling will go, but I'll keep you posted on progress or lack of it.

Do you have any recommendations on books or tutorials for CSS? I'm thinking of getting the O'Reilly book on CSS from Amazon. Every time I go to Borders I buy something I don't need.

Andi

Quote: Originally posted by andilinks
Do you have any recommendations on books or tutorials for CSS? I'm thinking of getting the O'Reilly book on CSS from Amazon. Every time I go to Borders I buy something I don't need.

You really don't need a book on CSS. The syntax is simple enough to pick up in a matter of minutes, after which it is just learning which properties do what, how certain selectors work, and a few extra @rules to know about. Read the docs at w3.org, and the tutorials at w3schools.com and you should be fine.

Quote: Originally posted by andilinks
I understand the increased versatility of the element over , but I fail to see how this:

This text will be small

is less code than this:

This text will be small

It's a different way of thinking. It doesn't look like less right now, but what say you wanted to make all the small text (or other class) a different font? Using font tags, you'll have to go into your content and edit all those font tags (or nest more), to get your result.

With CSS, using a span tag, you just have to edit the one CSS file, adding declarations to it.

This text will be small

.smalltext {font-size: 11px; font-family: courier, monospace; color: blue;}

This text will be small

Now multiply all those instances of small text.

Additionally, you won't need most of your font tags at all, for standard items like headings and paragraphs and hyperlinks.

So while if you look at one instance and one instance only, the comparison seems equal, if you look at the broader aspect there is a clear advantage to moving toward standard code and dropping the use of the font tag.

***

Tables are not deprecated. It's a rumour, and a bad one. You can, of course, move to CSS positioning, but tables continue to be supported, even into XHTML 2.0.

***

Good online CSS resources:

http://thenoodleincident.com/tutorials/css/
http://www.o2b.net/css-demo/

S

Edited to add: The advantage of CSS is it takes presentation out of the content. This frees your content to be displayed in different ways to different people. It's not just a matter of colours and font-families, but also of types of display (print, screen, pda, mobile), design (layout) and function. Throw away the idea of the font tag and of controling the content at the markup level and you will revolutionize the way you think about the web.

Quote: Originally posted by Suzanne

Tables are not deprecated. It's a rumour, and a bad one. You can, of course, move to CSS positioning, but tables continue to be supported, even into XHTML 2.0.

Table still serve their original purpose and will continue to do so - it wouldn't surprise me if tables remained in all future versions of XHTML.

But they were never intended to do anything other than display tabular data. It seems lately that this notion of W3C's has become more popular, and maybe someone misinterpretted it as deprecating tables. All it really means is you shouldn't use tables for layout, but instead should resort to CSS positioning for complex layouts, while at the same time ensuring your source still makes sense to screenreaders, etc (which if you use tables, it probably doesn't anyway). This involves more than just and tags, but appropriately using tags, , etc. A screenreader doesn't know what special meaning has, but does know what means. Though this is slightly veering off my original point.

It is quite possible to design complex table-less layouts in IE5+/NS6+/Opera 6 (though IE5+ will give you a very hard time), which should allow you to put tables back in their place - not as presentational tools, but a method of displaying data.

Suzanne--

I have taken your advice on the tags using a CSS file, and there is only one instance where I cannot eliminate the tag. I space my links with underscores of the same font color as the background and I alternate table row background colors so there seems to be no way to use css here without adding hundreds of extra tags. There may be some way to space the text with CSS, but I haven't found that, just "&nb sp;" which is six characters to the "__" two characters.

The W3 validator though continues to give contradictory and inscrutible instructions that when followed render the page unreadable--which is why I'm still thinking that total destruction and rebuild may be the answer, or maybe just ignoring the "problem." That has worked for me for several months now. Mean time, it does reasonably well in all the browsers that I've tried (IE6, Netsc 4.5 - 6., Mozilla and Opera), which is more than would happen if I followed the W3 instructions.

But the span thing is great! Thanks.

Andi

You can add padding to any inline or block level element.

span.class { padding-left: 3px; padding-right: 3px; }

That would remove the need for special spaces of any kind in the content itself, and allow you to remove those spaces if a future design doesn't require them without having to edit the content directly.

Edited to add that if you mean you S P A C E your links as opposed to __SPACE__ your links, then you would use this:

span.class { font-stretch: ultra-expanded; }

Or, well, there are a whole bunch you can use. Support isn't known (by me), but you can look it up online at webreview.com (search for CSS guide). But anyway, where there is a will, there is a way for this sort of thing.

hmmm... I almost never get anything right the first time, usually I must redo everything 17 times before it works, but...

This:

span.data { padding-left: 3px; padding-right: 3px; }

AND

about.com
Beaucoup dmoz.org Yahoo!

does nothing...

Andi

According to TopStyle, what you want is "word-spacing : 6px;".

But it's IE6-only.

Also, padding only happens where the tag begins or ends. So what you get is space to the left of and space to the right of . Try applying the class to the 's as well. I'm not entirely certain of that, though.

I guess another way to do it would be to something like this:

span.data { letter-spacing : 3px; }

about.com
& nbsp;
Beaucoup
& nbsp;
dmoz.org
& nbsp;
Yahoo!

"word-spacing : 6px;".
works well, unfortunately only 43% of my visitors currently use IE6 (which is greater than I expected, but still too low considering other browsers would see no space at all between links).

I don't understand the second suggestion, I do have the entire HTML links enclosed within .

The third suggestion may work, but the tags take up more characters than just 3 non-breaking spaces "& n b s p ;" would...

Thanks for your effort.

Andi

What I mean in the second suggestion is that wrapped around each individual link is a span.

Beaucoup
dmoz.org
Yahoo!

Try using the padding-left/right code with that.

I know the third idea just defeats the purpose... it was just a thought.

ahhh...

Configured this way, works. But it uses 25 characters to effect what 2 characters do using underscores of the same color as the background. Considering that I have several hundred links on each page, using the deprecated tag seems the better solution. Again, thanks for your effort.

Andi

Filesize may increase, but you'd at least be separating content from presentation.

Then again, you say you will redo the whole thing... maybe by then word-spacing will be better supported.

Good luck.

Look, it's not as hard as you want to make it.

span.whatever a { padding-left; 3px; padding-right: 3px;}

This says all tags that are children of this particular span tag (all tags in the tag) will have that applied, no others will.

You should also consider how you're putting the site together (I know you are) because a big line of uninterupted links (except by spaces) is not very easy to figure out. I find your site too complicated to even look at, with all the links and how they are presented.

But even if you change the presentation, you may find that using CSS will make your life easier.

In the future, you can set that rule to word-spacing instead of a child selector and padding.

It's really a good idea if you look over the resources and try to get a good understanding of how CSS works, then you can apply that knowledge to your current design while working on a new one if you wish.

Suzanne

Quote: I find your site too complicated to even look at...

Obviously you didn't. I don't have "a big line of uninterupted links" (except in just a few categories), which is why what you are saying won't work for me.

It doesn't take a high level of sophistication to understand my site but it is true that some people don't "get it." Fortunately I don't have to cater to a mass market. I can tell that I've worn your patience thin so I won't bother you any longer, thank you for the time and help that you did provide.

Andi

Andi, you misunderstood me. Really.

But I do think that it would be advantageous to you to reconsider how you are presenting your information. I was speaking specifically of the areas where you *do* have a big paragraph of uninterrupted links.

That aside, let me introduce you to

is a blocklevel element, similar to paragraph or table. It contains things. Using child selectors, you can do a similiar thing with div as I suggested above with span. To do that, you wouldn't use classes (or not alone) but id.

This is why I really suggest you take some time to learn what CSS is about -- you keep approaching it as if CSS cannot help you, but it can, and very much so. You just can't see it because it requires a different perspective on coding. I say that because that is true for EVERYONE -- at first, it doesn't make any sense, it seems counter-productive when you can simply add font tags and other work-arounds.

I'm sorry you took offense, it wasn't meant to sound frustrated, so much as to cut through the speculation and show you that there are underlying issues -- the structure and layout of your page -- that are affecting your ability to implement and understand the advantages of CSS.

I hope this information is helpful, I really do,

Suzanne

Suzanne, I do appreciate your help.

As I mentioned at the beginning, I am reassessing the goals and the focus of my website.  Most of my Google visitors only view one page and never return.  But it does not bother me that the majority of the visitors that arrive from Google take one look, throw up their hands and say "Oh this is too complex for me."  In fact I like it that there is a self-selection process and that only a very few actually understand how to extract value from my site.

Sites like mine do not make money, so I don't want to be a bandwidth subsidy for a lot of lost searchers.  I do want to provide a service for a select few who understand what I am doing. There is a small but growing group of regular visitors to my site.  I want to serve that group better and build a community of like minded persons.  I don't ever want to run ads or sell-out my inclusion process as Yahoo! and others have.  And since there is no workable revenue model for a site like mine I want to self-screen my visitors as I mentioned above and I want to refine that selection process.  This is helped by the added control offered by CSS.  I did in fact say early in this thread that I wanted to use CSS entirely and stop using tables.

So to sum up, I want to make my site easier to use, but not **too** easy.  I want to narrow the scope to better serve just a few enlightened regular visitors, not the mobs of searchers that arrive from Google--though it is from this group that I most often find my new regulars.

I also realize that my site needs a lot more work in order to meet that goal and other less well formed goals.

Andrea