CSS: Using an image as a form submit button

I’ve found an even better way of doing this. See HTML/CSS: Buttons are more styleable than inputs.

Most of the sites I develop involve a form of some sort, and usually the designers style the forms with custom buttons.

A simple way to deal with this is to use <input type="image" ... /> which gives the desired appearance and functionality with no fuss.

This is fine for method="post" forms where the information sent to the server isn’t visible to the user. When using a method="get" form, though, there’s an unsightly side effect of using the image input type. The URL will turn into something like this:

http://www.example.com/form.php?foo=bar&x=36&y=18

The X and Y coordinates of where the user clicked on the image are being added to the querystring. Presumably this information was once useful back in the days when people did arcane things like server-side image maps.

I neither need nor want this information and it could even confuse the user. So I go back to my input element, change it back to a type="submit" and get to work on manipulating its appearance with CSS.

First, I take off the border, add a background-image, set the width and height and make the text invisible using color : transparent. This works fine in all of the browsers I want to support except Internet Explorer (6 and 7), which ignores the transparent colour value and displays text on the button in black.

I can still hide this text, though, by adding overflow : hidden and then making padding-top equal to the height of my button. Now it works, in Safari, Firefox and IE!

The full code:

input.customSubmit {
 width : 76px;
 height : 36px;
 overflow : hidden;
 padding : 36px 0 0 0;
 background : url('/images/custom_submit.png') no-repeat;
 border : 0;
}

Colossal squid to be thawed & dissected, streamed on the ‘net

I think this is awesome. Starting tomorrow (Sunday 27th April - later today if you’re a New Zealander), the Museum of New Zealand Te Papa Tongarewa is going to be thawing and then dissecting a Collossal Squid. According to the BBC article on which I found this, the process will take days, and all of it will be streamed live.

The video streams are live now and I can see an empty thawing bath, a dissection table and some people walking around. I hope to catch them getting started tomorrow.

It would be great to see more engaging stuff like this from other museums and universities over the world. Science and nature encompass us; they’re not just things to be respectfully studied within the walls of a museum. In particular, the great but fairly static institutions in London would do a lot of good for themselves if they could offer something as fascinating as this.

Twitter

I’ve started using Twitter.

Each bite-sized update which goes through the service is known as a tweet. How cutesy!

Are Twitter users called Twits?

Google maps on iPhone

I used the maps application on my iPhone today for a genuinely useful purpose for the first time - to find the nearest branch of a shop that my girlfriend and I were looking for.

After excitedly shouting, “ooh, let’s use my iPhone!”, I located the nearest store not more than fifty metres away from where I was standing and looked up, amazed, to see the shop we were looking for just down the road.

I still can’t help feeling that I was cheated out of my value for money.

Sausage and Mash Cafe

Yesterday I decided to try a branch of the Sausage & Mash cafe on Brushfield Street, Spitalfields. Considering the homely, comforting image that the businsess promotes, I can’t help but wonder whether the moniker S & M cafe is one chosen innocently or provocatively.

I ate:

• two Cumberland premier sausages;
• traditional mash;
• wild mushroom gravy;
• minted peas.

Having arrived at 1pm, when the tables were all full and there was small queue forming, I should have found it no surprise that it took 30 minutes to serve our food.

Although there are things other than sausage and mash on the menu, the fun of it is getting to choose your sausages (from about half a dozen varieties), your type of mash, gravy, then adding vegetables if you wish. When the food arrived, it seemed like the wait had been worth it; I cleaned the plate almost before I’d started. My only complaint about the food is that the peas could have been fresher.

Around £10 for a plate of sausage and mash may seem a little steep, but it was nicely presented and, well, this is central London.

Unfortunately its popuarity means I probably won’t be returning there; after finally getting my food, I hardly had time to eat it before heading back at the end of my lunch hour.

JavaScript: prototype

NB: This post is not about the Prototype framework.

AJAX has caused something of a renaissance for JavaScript over the past couple of years, so I’m still learning (and relearning) a lot of things about it despite having started using it seven years ago. One thing I revisited today was adding a method to an existing JavaScript object as an elegant alternative to defining a procedural-style function.

JavaScript is object-oriented, which makes it elegant and powerful when manipulating the DOM, because objects in an OO language belong to one another just like elements of an HTML page belong to one another, i.e. in a hierarchical model.

JavaScript’s OO capabilities are, however, limited compared to other languages. You can’t take one object and use it as a basis for new one using extends.

You can, however, add your own home-made methods and properties to existing objects, including pre-made ones (such as String and Array). For example, you could add a function to the Array object to help you find out if an array contains a certain value.

Array.prototype.contains = function(value) {
 for (var i=0; i<this.length; i++) {
  if (this[i] == value) {
   return true;
  }
 }
 return false;
}

Now, any Array which you create has the contains function. It’s more elegant than writing a procedural function, e.g. contains(array, value), which is what I’ve become used to as a result of using the many useful inbuilt procedural functions in PHP.

Giraffe

I went to Giraffe, Spitalfields for lunch today.

I ate:

• herby chicken escalope with mash and rocket;
• a quarter of somebody else’s club sandwich;
• banana waffle split.

The prices were about average for a nice but unpretentious chain in London.

The food was very tasty and nicely presented. Portion sizes were average. The manner of the staff ranged from genial to rushed. An orange juice that I ordered never came yet was added to the bill, but we were reimbursed with a hot drink to take away when we pointed this out. The atmosphere was vibrant and the clientele included families (I think this week is a school holiday) and office workers. I thoroughly enjoyed eating lunch here.

Why I’m “techy”

When I first wrote “Ben’s Techy Musings” what I really meant was “Ben’s Techie Musings”, Techie being a (sort of) real noun meaning a person involved in tech(nology).

When I realised that “Techy” is apparently an American spelling variant of Tetchy (meaning irritable) my first instinct was to change the name. I decided to keep the name, however, since it describes me so well. I have a habit of being in a bad mood without realising it, particularly if I’m tired or hungry. I’m like a baby, really. My girlfriend would agree that it is dangerous to meet me (or even phone me) before I’ve had my first cup of tea of the day!

So, Techy it stays and although I’ve put a phonetic spelling of the word in the tagline, the double meaning still stands.