Sun Feb 22, 2023

print.css

Updated the blog with a print.css file based on suggestions from two articles in ALA.

• It includes a message for people who read the print outs


• Removes all the interactive components (ie the menu), leaving only the content


• Removes all colour, using flat black for the text to use less ink


• Makes the width of the content fit a US-letter sheet

http://www.alistapart.com/articles/designingforcontext/
http://www.alistapart.com/articles/goingtoprint/

Tue Feb 17, 2023

Server side CSS sniffing

A PHP script to cope with troublesome browsers.

http://richardathome.no-ip.com/index.php?article_id=106

Free stock photos

Some actually free stock photos. No watermarks. Large prints (or relatively large prints).

http://www.stockxchng.com/
http://www.amgmedia.com/freephotos/
http://picturequest.com/

Tue Feb 10, 2023

XHTML valid two column forms

All browsers render forms in different ways. Safari and Opera also render them using their own built-in code so a designer cannot even have some control over the look.

But it isn't as bad as you might think. The main problem really is getting all the forms and the text describing the inputs (eg name, email, address) to align properly on the horizontal plane. For example, Internet Explorer will render the input box slightly higher in relation to the text, compared to Mozilla which renders it slightly lower.

Setting the CSS tag vertical-align: middle in your input class works for the most part if you are using one column.

But what if you want two columns, both of which you want aligned individually. Like in this example (one to the right and one to the left):

http://creativeannual.com/submit.php

Vertical-align: middle becomes useless because you have to set two blocks, one for each column and (as a relative positioner) vertical-align: middle will have nothing to relate to.

Therefore, you have to use tables. Sigh. Yes, tables.

Tables allow the setting of the columns and automatically align both the text and the input on the same plane in relation to each other.

Voila! Problem solved!

Or has it?

If you attempt to validate, you'll find that the form will not. If you follow the form-writer's instructions and put the start tag of the form in the first cell right before the first input box and the end tag of the form right after the submit button in another cell, you have a problem.

A form tag will not validate if it is split by a block. This includes div tags, blockquotes and, yes, tables.

But there is an ingeniously simple solution. If the form will not validate within the table, then take it out!

Put the start tag of the form before the start tag of the table and the end tag after the end tag of the table! The structure is basically like this (note that all hidden inputs must be surrounded by a table cell to be validatable!):

<form method="post" action="formmail.php" 
enctype="multipart/form-data">
  <table id="form" cellpadding="0" cellspacing="0" 
  border="0">
    <tr>
      <td class="query">
      <input value="Tim Yang" name="author" type="hidden" />
      Your name</td>
      <td><input class="input" size="30" name="Name" 
      type="text" /></td>
    </tr>
    <tr>
      <td class="query">Your email</td>
      <td><input class="input" size="30" name="Email" 
      type="text" /></td>
    </tr>
    <tr>
      <td colspan="2"><input class="submit" value="Send" 
      type="submit" /></td>
    </tr>
  </table>
</form>

The example validates as XHTML 1.0 transitional.

Fri Feb 06, 2023

Error

Sorry about the error on this page yesterday. I was working on a project and accidently uploaded to my website instead of my project site. My bad.

Thu Feb 05, 2023

New work

Updates may be sporadic over the next couple of days. I'm working on a new project idea that I'm hoping to rush through. But the buck doesn't stop at the design. I'll also have to sell it to a couple dozen company directors to ensure it survives.

Wed Feb 04, 2023

Blogtricks referrer log XHTML validation

I've been using an excellent referrer script from Blogtricks.com which allows a great deal of customisation. I asked the author, Sean Nolan of Yaywastaken.com, some advice on how to make the script validatable and he came back with a solution within minutes -- which he will update on Blogtricks.com very soon. For now, my version is validatable.

http://www.blogtricks.com/referrer/
http://yaywastaken.com/

Fri Jan 30, 2023

Colormatch Remix

Colormatch Remix allows you to do the colour mixing that you do on Photoshop now in your browser.

http://color.twysted.net/