Yesterday, Andy pointed out – rightly – that my CSS wasn’t validating.

I checked the XHTML, and when it didn’t validate, for reasons other than invalid characters in the newsfeed, I decided to work on it first. One of the invalid characters was in one of the items under Listen/Read/Watch. When I logged in to fix it, I found that the link to the cg-amazon plugin was missing. So I deactivated and then reactivated the plugin. And therein hangs a tale.

I don’t know what I did, but somewhere in there all of the post text (what you’re reading here) got lost. No post displayed, either on the main page or the archives. Comments were OK. But there was no way to read what somebody had commented on.

I spent all morning trying to figure out why, with little luck. A post to the WordPress support forum yielded no clues either.

After lunch, I uploaded a brand new copy of WordPress to a new directory. Post showed up. I spent a couple of hours trying to figure out why. I tried overlaying my “real” WP install with part of the test one to see if I could get the text to display. No luck.

Finally this evening I did what I should probably have done to begin with: I deleted the “real” WP install (after making a backup of course) and copied in the test one. Then I spent hours uploading and reactivating plugins and reapplying various customizations and hacks.

If you’re reading this, I was successful. But it wasn’t fun.

I’m glad it’s over.

And, yes, it validates, except for one CSS item in there to trick IE into floating the columns correctly.

For those of you who find a combination of navy, violet, purple, gold, orange and seafoam green too… garish… I’ve created three new skins. No moons, cows, lizards or sand.

I’ve Got The Blues and I’ve Got The Greens are basically the same skin with a slightly different color scheme. The sideblogs have been both moved to the right, and the main content is on the left.

Good Corporate Citizen is a teal-based color scheme with the far-right-hand sideblog removed entirely. No more news, reviews, weather, mood. In order to accomodate this, the style switcher has been moved back right under the calendar. In order to keep its length smaller, I’ve changed to a drop-down box.

So… if you hate my colors or my layout… pick a new one and come back!

Now that the election is over, I’ve made a few changes to PI.

The Wayback Machine is courtesy of Scriptygoddess’ “Today in weeks/months/years past” WordPress plugin. I fixed a few bugs in it and added the post title display under the link to the date archive.

I’ve also installed plugins and hacks that put “next | home | previous” links on the page and date archives. I’m looking for a clue on how to do a “next/previous category” link on the category archives, but so far no go.

Gone is the “election” section of the news. Weather, Mood and Skin Me have been moved over to the right. This makes the right-hand blog carry all of the miscellaneous, non-PI-related stuff, while the left-hand blog has all of the more blog related items. It also makes the columns fairly even. 🙂

OK. So this is pretty cool. A fully functional WinXP machine… in the palm of your hand. The OQO Model 01 has arrived.

I have to admit this is a snazzy looking little doodad that warms the geeky cockles of my heart. It’s just 4.9″ x 3.4″ x .9″ and weighs just 14 oz., yet it runs standard WinXP. That means it runs standard XP software, although with a 1 GHz processor, a 20 GB hard drive and 256K of RAM it’s not going to set the town on fire. This is a word-processing, email-reading, contact-keeping, calendar-watching sort of device. It has a thumb keyboard and a trackstik with mouse buttons as well as a digital pen and a thumb wheel. It looks easy to use. It can be hooked to a docking station for full-size use if desired.

WiFi is integrated, as are Firewire and USB ports. But it has no CD drive, so an external USB drive is required in order to load software. There are reports that it runs hot, so be careful sticking it in your pocket!

As cool as this little goody looks, retail is a not-so-cool $1899. For that price one can pick up a small, slim full-function notebook. There are early adapters that will go for the OQO Model 01, but I don’t think I’ll be among them.

For my money, I’ll stick to my syncing my Palm Tungsten T3 with my laptop at work and my computer at home, since I need both of those computers anyway. And the inconvenience is worth around $1500 to me.

After being hit with comment spam over the last couple of days, I’ve gone looking for solutions. I’ve made some changes that hopefully will help.

Automatic’s free email Enkoder: This little goody translates an email address into numeric equivalent gobbledy-gook and wraps it in javascript. The result is a displayable email address that can’t be parsed by most spam bots. And that means I can once again have an actual, clickable email link in the side blog.

Installation is straightforward, although you have to know enough HTML to recognize where to put it: Simply type your email address and a few other fields into the online form, then paste the results into your HTML page where you want the address to appear. Voila!

I’ve also tightened up the rules that determine if a comment is spam or not, I’ve increased the time required between comment posts, and I’ve installed a plugin that uses semi-fuzzy logic to decide if a comment is spam and deletes it if it is. That will keep me from needing to delete every single spam comments. Which sucked.

I thought about installing a captcha system, but there doesn’t appear to be an easily-installed plugin for WordPress yet, and I’m not sure how much hacking I want to do. Besides, captchas can limit accessibility and aren’t 100% guaranteed. If the other measure I’ve taken don’t do the trick, then I’ll look at doing that. But not yet.

I also installed 2 new skins: Fabric Of Our Lives and Seafood Basket. Check ’em out!.

I like flexible, semi-liquid layouts. But Microsoft makes it tough because IE5+ does not conform to CSS standards.

I’ve managed to handle the problems so far by having two and three column layouts with a header but no footer. Then I decided that having a footer would be oh, so cool. And that’s where I ran into problems.

This doesn’t seem so tough, really. A header, then three columns, then a footer. The three columns together should be the same width as the header and footer. The footer should be at the bottom of the longest column, whichever that is. The presentation should be source ordered — that is, the first section in the source should be in the middle column. No tables — all CSS. Looks good in all modern browsers. OK…

This is not rocket science, if one wants a fixed-width layout. Something like 50% of web surfers use a resolution of 800×600, and something approaching 50% use a resolution greater than that. Only a very tiny percentage use anything smaller. I like 1024×768, myself. But if I design a fixed-width page for 1024×768, then people using 800×600 can’t see the whole page without scrolling horizontally. On the other hand, if I design for 800×600, then anyone using higher than that ends up with a bunch of white space. That isn’t all that bad with a two-column layout, but with three columns it makes the middle column mighty narrow.

Lizard, Mirage and Moon are examples of fixed-width layouts. They look best at 1024×768. Below that, the horizontal scroll bar is necessary to see the right-hand column. Above that, there’s white space to either side.

Black and White and Mommymonster dot com are completely liquid. B&W does better at liquidity than MM. Below 1024×768, some parts of MM – notably the calendar and the drop-down box – break because the side columns become too narrow for their contents.

The most common solution to this last problem is to have the side columns fixed-width and the middle column liquid.

No problem, right? Well… I want my layout to become smaller than the header and footer if the resolution is narrower than the header width. But, if the user has a resolution larger than the header, I want the columns to stay under the header and above the footer, and have white space added to the sides. Again no problem. I simply use the max-width property on the main wrapper div that encloses all of the columns and the min-width property on the side columns, while having the middle column width property a percentage.

That works great. In every browser except IE5+. Along with various other quirks and bugs, IE does not support max- or min-width, or max- or min-height.

There are various ways to “fix” this. After trying several of them out, and after much thought, I decided to go with a hack that uses IE’s ability to parse a javascript expression imbedded in a CSS property, like so:

#maindiv {
width: expression(document.body.clientWidth > 1000? “1000px”: “100%” );
}

What this says is that, if the width of the browser window is greater than 1000px, set the width of maindiv (that’s the wrapper) to 1000px. Otherwise, set it to 100% of the browser window.

The problem with this hack is that it means that the CSS no longer validates. I believe in writing valid code, so this bothers me. But I’m consoling myself with the fact that at least it is a browser-specific hack to fix a browser-specific problem. Hopefully with the next release of IE, Microsoft will get around to fixing their box model problems and support all of CSS2.