lucy24 - 6:48 pm on Jun 2, 2011 (gmt 0)

In your System Preferences in the Hardware row there's one called Displays. It gives an option of showing an icon in your menu bar; it will look like a wee little black monitor in the cluster of icons along the top right. It's a good idea to enable this so you can easily test your pages in different sizes. On my OS the menu shows the most recent three resolutions I've used (yes, I sidetracked to experiment!), along with a link to the Prefs which gives you the whole list.

Wow, you've been working away at the page. All those validator errors I found last night have disappeared by magic. But yes, w3c really seems to have it in for your header ;) At one point it spurted something incomprehensible, so I pasted in my own xhtml boilerplate (note how the validator smugly says "In most cases, it is safer not to type or edit the DOCTYPE declaration at all, and preferable to let a tool include it, or copy and paste it from a trusted list of DTDs."). It is IDENTICAL to yours, but the validator shut up.

I thought I was just babbling but looking closer I'm guessing the doc really was in html originally, since so much of the validator fuss was about unclosed this and that.

The page looks identical on all five of my browsers omitting Lynx with one interesting exception that I can't pinpoint in the code. In Opera and Camino (! are you listening, ƒ?) the 10px-border around the main image displays as "outset". In all others (Firefox and the Apple Web Kit-based browsers Safari and Chrome, as well as the text editor's html preview) it's transparent.

A lot of stuff can and should be moved from the html to css-- not because it will solve your problem but just because. I added this block:

img {border: none; text-decoration: none;}

div.center {text-align: center;}

table {font-family: inherit; font-size: inherit; width: 100%;
border-collapse: collapse; border: 1px solid white;}
table.main { width: 1250; border-width: 10; border-color: transparent;
text-align: center; margin-left: auto; margin-right: auto;
background-image: url("images/fade.png"); }
table.border {border: 2px solid white;}

td {padding: 0; border: 1px solid white; text-align: left;
vertical-align: center;}
table.seethrough td, td.seethrough {border-color: transparent;}
td.top {vertical-align: top;}
td.center {text-align: center;}
table.inner td {padding: 2px;}

It will take some fiddling to make the :: er, er, ahem, cough-cough :: three-deep-nested tables come out with the intended borders. The img stuff may seem redundant but it's the only way I've found to make it behave itself in all browsers when a picture is acting as a link. Which reminds me: be sure to get rid of any spaces within image names! (Different thread.)

I normally loathe inline CSS but I recommend using <style = "width: 350px"> etc on table cells if needed, because this method seems to be more, um, assertive than the straight html method. If the width of a cell is identical to the width of its content, you don't need to say anything about alignment.

Incidentally, I loved seeing the ".h4" and similar, because I've only recently had it beaten into my head not to use header levels for presentation. So I do a lot of (in my version) <h2 class = "six"> kinds of things :)