Web design...

TESTING CSS XHTML (June 2003)

Update July 26th 2003

Another month latter and I'm getting there. Ye gods but this is time consuming. Only a few more weeks!
*SOB*
I'm going to sue myself for RSI I think!

Update June 28th 2003

*Sighs really heavily and curses under his breath*
*Sighs again for good measure*

I know in my heart it's all for a good reason but darn, the idea of rewriting 500 pages is giving me goose bumps on my goosebumps. Albeit some of it is the learning curve and distractions but it's taken nearly a month to get just the home page to validate to AAA guidelines and it's still not perfect. All the uglies are out and it passes on three or four separate validation engines but there's still manual tinkering to do.

Truth is there are so many rules and variables they can't test for them all. For instance, classes of animated gif's are out in case the flickering motion affects people with epilepsy and such, so all gif's crop up for "manual validation" just in case. Colours crop up for monochrome screens (people still have those???) and more reasonably for the colour-blind like my cousin.

And tables, don't get me started on tables! There are so many rules I'm reading the small print in case is says:

Checkpoint 43.1: "When you cross your eyes and dot your tea's as you cross your t's and dot your I's, to show your level of concentration to managers/ supervisor / clients who may or may not be in the vicinity your tongue must stick precisely 2mm out of your mouth, to the left and at an angle of no greater than 45° - unless it's a leap year, then on Mondays only you may be allowed to stick it out to the right. See clause 58.3c for clarification.

The hardest thing is that opening new windows in a no-no in case it scares people (!) so you ideally have to take them out, which I'm loathe to do as I happen to prefer external links in a new window, or put a warning into all the links. Of course, as I've mentioned elsewhere, this is only true until browsers support toggling spawning on and off in which case you can put them back, until it breaks a new future guideline about backwards compatibility. So, as long as we are clear on that, hmmm? Gah! It's no false modestly to say I'm good with computers but if I get my head round all the rules, checkpoints and recommendations for all this I'm going to set my fees to £2,000 a day (+expenses) for Guru status.

*Sighs and mutters about what he's let himself in for*
*Roll's up his sleeves, metaphorically*

Righto, I'll finish some PHP for college then back to the grindstone. I just need to get the last kinks out, look at replacing all the tables with clever CSS that will work without twinky CSS (sobs), validate it with Lynx and with Unix/Linux browsers like Konquerer and with maybe a Mac browser or two and look at supporting text to speech in browsers. Then add in a little more CGI, PHP and a simple "Hello you" cookie - and fix it again. The rules prefer no cookies, but specifically expects them and when you don't have them it send things pear shaped as there's all sorts of privacy rules to contend with. About 3am last night, the time when your mind tries to hide in dark corners, my twitching peaked as I read a recommendation about using separate pages depending on the aptitude / level of the viewer. I'm just not biting. Go fish elsewhere!

Finally I just have to work on the other 499 pages - over 8,000 links and thousands of tables and well over 100,000 lines of text and code and most of them need work for full validation...   Going to have to be a two or three stage affair I guess, but I'll make the home page sing pure notes first.

And THEN I'm done - until they move the borders again...

Early June

The rest at the bottom of this page is from the "about" page and I've left it in for test purposes.

Apart from needing a new set of images for the sub menu I'm fairly happy with the design of the XHTML Home page. I took me ages to work out the codes with CSS but I've got the fonts, indents and centering down pat for Opera, Netscape and Microsoft IE. I did have a problem with the menu too but that was my daft fault. I was using a coloured background with the link hover and it was messing up the transparent gifs. All done now, though I am going so make a new set of buttons soon awayway.

Having spend a solid week or so beggering about with XML and standards and backwards compatibility I have come to the following conclusion:

Sod that for a game of soldiers!

I will do what I can so make this site perfect and viewable with near any browser but the sad fact is the only way you can please all the people all the time is to forget graphics, forget virtually anything but three of four elemental effects - like line breaks.

D'oh, that breaks the rules too! In dumbing right down and not using the latest technology you are being condescending and that is discrimination, mate, I can get you done for that...

Hey don't blame me, blame the browsers wars of yore, and the fools running the show now. It will get a whole lot worse when XHTML 1.1 is fully implimented, but if you do then out goes the backwards compatibility.

Take almost and indeed virtually every tag you can thing of and you can find fault with it. The HUGE probablem I have at the minute is a right begger. Centering. It's "deprecated". That's posh for obsolete, don't use it any more. The only way I've found to center a table without generating HTML errors is use [position: relative; and left:50%; ] as part of the CSS.

Good solid workaround is that...

There's the thing, it's a botch job to fix something that wasn't broken. Ah. Ah. Darn. I knew there was something, if your browser only supports CSS1 then these are not supported - and that done horrible things to your layout. In fact it destroys it to the point of being unreadable seeing at it falls off the edge of the page.

Oh yes. I knew they was yet more, as part of the rules for accessibility, some of which will become law, you have to allow that cookies can be turned off, and javascript (etc. etc. etc.), they are out, make provisions in case they browsers doesn't support CSS2 too. Don't even go there!

It goes along the lines, maybe the client has a text browser, maybe it's an internet ready WAP phone, maybe it's a blind person, maybe it's a university library with older machines running older browsers like (SHUDDER) Netscape 4.

The daft thing is that while the supported devices under CSS include computer screens, printers, televisions, handhelds, speech synthesizers, and Braille tactile feedback devices at present (June 2003) the major browsers support only a small number of the available media types. Internet Explorer 4.5+ and Netscape 4.7+ support screen and print, while Opera 3.67+ supports screen, print, and projector.

Here's my final answer:

• If you are running an old browser, it's got more security holes than a torn fishnet, update now!
• If it's a text browser like Lynx, wait till you get home and use a real browser, it's not like they aren't affordable, or even bob into the locally library or cybercafe and use theirs.
• If you are disabled, I'll do what I can but to my knowledge of script readers and such is non-existant. When I get a spare week I'll look into it fully

Here's the crunch, there's about a trillion web pages out there and page counter is rising by the nanosecond - and I guarantee that for every page that fully passes (X)HTML and accessibility rules there's a million more that don't. Added to that, the ruddy rules keep changing. At my best estimate it will take at least a month to update and validate my pages and I'll be damned if I'm going to annote thousands of tables. Ooops. Darns. Tables are out too!!!

This page is fairly solid but still throws up advice. I did a perfect copy, green light across the board almost - and all the current browsers took one look and ripped it to pieces. Blah! Here's how this page look in different browsers - and the some of the advice generated by the "must have" software I use and unequivically recommend - CSE HTML Validator.

I like the last one best. You must put this line in, but if you do your page will look wrong, don't put this line in. Right. As long as we are clear on the standards, eh!

(Documents must be organized so they are readable without requiring an associated style sheet [Section 1194.22 (d)]. This means that when a document is rendered without its associated style sheet(s) that it is still possible to read it.

Row and column headers shall be identified for data tables [Section 1194.22 (g)]. This table contains no "th" elements. If it is a data table, then "th" elements must be used to specify and identify row and/or column header cells. Use "td" elements to identify data cells. If this is a layout table, then use the word "layout" in the table's "summary" attribute and this message will not be displayed.

All scripts must have a text equivalent. Consider using the "noscript" element to provide the text equivalent. The content of the "noscript" element will be rendered if scripts are turned off or not supported (the Lynx text-only browser does not support scripts).

When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology [Section 1194.22 (l)]. Ensure that all the programmatic objects and elements on this page conform to this requirement (for example, consider using the "noscript" element to provide functional HTML/text for "script" elements). This requirement helps ensure that user agents that don't support these objects or that have them turned off will still be able to provide the user with usable content.

Avoid using tables for layout unless the table makes sense when linearized (if it doesn't make sense, then provide an alternative equivalent, which may be a linearized version) [P2, 5.3]. Also, if a table is used for layout, do not use any structural markup for the purpose of visual formatting [P2, 5.4]. CSS is recommended for visual formatting. A linearized table is one that makes sense when its cells are read in row order.

[9] The "center" element is deprecated in HTML 4.01 and XHTML in favor of using style sheets (use the CSS "text-align: center" instead or align="center" where "align" is not deprecated). Another option is to use <div style="text-align: center">...</div> instead of <center>...</center>. The "center" element may become obsolete and unsupported in the future.

How stupid is that, eh? Paul

[88] Using an XML declaration, although strongly encouraged by the XHTML recommendation, may cause problems by causing browsers, such as Internet Explorer 6.0, to trigger "quirks" mode rendering. This mode causes non-standards complaint rendering. Because of this, you may want to consider removing the XML declaration.

Here's the mug shots:
I've put the window options back in for convenience, mine especially. The rule goes like this. Don't use link windows. Naturally frames are a complete and utter no-no (as they should be, IMO). That is until they make devices with the option to toggle windows in which cases after editing ten's of thousands of links to remove <tabindex="0"> some git with nothing better to do with their time says, "Oh, it's OK, we're on v1.2 now, you can put them all back now..."
Ain't gonna 'appen matey, live with it!!!
Anyway, biting down on my sarcastic side, here's the screenshots. Click to enlarge in a new window...

Notes:
If you (had looked) at the source code you (would have seen) I had used spans and such to replace the tables I had for the logos and CSS code to center it. For the main body I've used the CSS center text to align the table.
[Addenda, don't bother, I took the spans out when I moved the code from 5.0, 5.2 to 5.3]

Apart from needing rather more work and maybe tweaking on the margins, the Internet Explorer renders it bang on. The others however take a look at the ( text-align: center; ) class and ignor it completely. Opera manages to make a mess of the spacing for the spanned menu too. Opera 7.11 either applies CSS at an obscenely strict level or it's tossed the rule book out the window. Either way I'll never use it myself.

Strip away the invalid CSS1 properties and look at the mess. You can't scroll to get it back, it's just gone. Imagine if I'd used that for the main body...

Happily, strip away all the support for images and style sheets and while it's plain vanilla it's still good to use.