I recently updated Ajax.InPlaceSelect to include support for multi choice selects. By default the inputed separator is a BR and the selected value posted will be separated by a comma (,). This might not be the best solution but for now this is the only solution I’ve made.

Head on over to the project place to download and try out the new version

Inspired by Andy Budd’s Layout Grid Bookmarklet I decided to make my own version of it. Instead of a grid that can bloat the screen unreadable I wanted the same nifty rulers that Adobe Photoshop gives me by pressing Ctrl+R.
This bookmarklet will add some padding to the design when activated and then restore the original padding when deactivated. You can try out the Layout Rulers (Note that you have to refresh the page in order to remove the ruler set since you cannot click the link on the page to deactivate it) or download the ruler image and javascript source below.

Note that this only works in Firefox

Download

http://www.subzane.com;/wp-content/uploads/2007/06/layoutrulers.js;Layout Rulers Script;

http://www.subzane.com;/wp-content/uploads/2007/06/layoutgrid-ps.gif;Layout Rulers Image;

New version of ImageRedirection.class.php available.

Changes

• Now uses CURL instead of file_get_contents thanks to Patrick Havens.
• Improved and restructured alot of functions.

A few days ago I stumbled upon what I thought was a css bug in Firefox, but after testing the case with Opera and still getting the same "bugged" result I started to wonder if it was the browser that was bugged or just my way of looking at it. Could it be that for once IE6 and IE7 was correctly rendering my page whilst Firefox and Opera was being bad? Also, the "bug" seemed to fix itself if I used borders on the affected divs, weird uh?

The case

My layout consisted of basicly 3 divs. One at the top and a container div holding another div positioned 10px from the top of the container div. Just like below.

Here in the example source I only use simple divs without anything else than different background colors.

The problem

When lookin at the page in IE6 or IE7 everything looks just fine, however in Opera and Firefox you'll get this result:

It seems that the inner div adds top-margin to it's parent instead of applying it to itself, why this happens I have no idea.

The first solution

One solution I found was that if I apply borders on the affected divs I get Opera and Firefox to render the page correctly. Why borders would change how margins are interpreted I have no idea. Anyway this isn't a solution to stick with since we don't want any borders, if used with background images it will ruin the design.

The final solution

After playing around some more I realized that if I instead of using margin on the div I wished to position I could ofcourse use padding on it's parent for the same result. And ta-da it works in all four browsers! However since I'm a Windows user I have no idea how any of this behaves in Safari, but I will update the post after I check using some online screenshot provider.

If you have any opinions/facts about this being a bug or not and solutions feel free to post comments. You can view my test page with source and all 3 examples here

This is the form of validation I like the most: Prevent the user from inputting the wrong information. In this case I have a field for a phone number, and I only want the user to be able to input numbers (0-9) and country code prefix (+).

One might argue that I should instead remove unwanted characters on the server side instead, but I rather prevent that from happening at all. It's bloody annoying with users that write stuff like "none" or "-" instead of leaving the box empty when they don't have/want to give out their phone number on a web form.

Updated to support keys like backspace and del

The Source

Compability

• IE 6+
• Firefox
• Opera