- Click File > Options
- Click Calendar in the left menu
- Update settings and click OK

I’m currently working on the UI design for system to be used by a big New Zealand Government Department.

As the system is only accessible by staff, we’re less concerned about full browser support and responsive design, than we are with making sure we provide a quality product that makes peoples jobs easier and stands the test of time. Because of this, we’re able to include a few HTML5 elements that gracefully degrade in older browsers but will become useful when the department upgrades.

Among the HTML5 goodies is the new search input. This handy element behaves like a text box but when rendered in Webkit you get a few bonus features including the ability to view previous searches and a ‘clear search’ button. For browsers that don’t support it (lt IE 8), the box gracefully degrades and is rendered as a standard text input.

---

Problems with Webkit Styling

I’d already designed and styled the search boxes as text boxes but it make complete sense to change them over to use type=search. That however, is when my styles started to fall apart and my search boxes started to look like this in Chrome:

 

 

---

So what went wrong?

I did a bunch of Googling and peering into the styles in the Chrome Dev Tools. The issue, I found, lies with Webkit automatically styling search boxes in a different way to how text boxes are styled.

Rules such as height are ignored by the browser and the box inherits it’s size based on the text within it. According to this post on Css Tricks, padding, font-family, border, background and line-height are also ignored.

---

How to fix the problem

- Boost the height up? Nope, that’ll bust it in all other browsers.
- Change the height on input[type=search]? Nope, that’ll bust it in Firefox and IE9.
- Use some JS to stick a class on? Eww. Nope.

Thankfully there’s a way around it:
input[type=search]{
-webkit-appearance: textfield;
box-sizing: content-box;
}

1) Set -webkit-appearance to textfield.
This allows you to make changes to: padding, font-family, border and background. In my case, this got rid of that nasty inset border that I didn’t ask for.

2) Set box-sizing to content-box.
This is required if you want to explicity set the height of the search box. The webkit default (box-sizing: border-box) is an odd choice and I’m not sure why they’ve chosen this. Border-box doesn’t take any padding into account when determining the height.

 

 

---

Is this right?

Why Webkit sets box-sizing to border-box and not content-box, I have no idea. This is inconsistent with the behaviour of other browsers and I see that a bug has been logged on bugs.webkit.org.

I’m currently trying to follow up on why this decision was make so will be sure to post here if I find the answer.

I’m running Windows 7 on a Macbook Pro and recently wanted to do a screenshot (without using a special application). If you’re looking for the answer, try: shift + fn + f11.

Hopefully that helps save you 15 minutes worth of Googling

Last night Philip and I released our new pet project “Find that Robot“. It’s a small online maps game where the goal is to find the little robot figure at various movie locations around the world.

It’s been a fun project to work on giving us a chance to play with new technology – the site is built using node.js and uses a little bit of HTML5 and CSS3. We’ve also been enjoying writing the content and ‘in-jokes’ that you’ll appreciate if you’ve seen the films.

Check it out and and see if you can get on our Top 10 Scoreboard: Find that Robot

Finding that your html layouts are fine in all clients except on your iPhone? This may be due to text size.

The iPhone and iPad mail client only display text at 13px or higher. If you have specified a lower value than this, the text will be displayed at 13px.

It seems that Apple has done this in order to make emails easier to read on their portable devices however a 1px change can really make an HTML layout look terrible. Text such as disclaimers & fine print really don’t need to be this large, particulary since it’s so easy to zoom in on the mail application.

To prevent your fonts from being resized, you can use this style (inline or header are fine):

-webkit-text-size-adjust:none;

Follow @toni_b

Back when I was at university I was very disappointed to be turned down for a barista job at a well known Wellington cafe, based on the fact that I didn’t drink coffee. I’d had 2 years experience making the stuff as well as having attended a couple of training sessions and thought that I was more than qualified. Now, looking back, I feel they were probably right. Making great coffee isn’t just about science – it’s about adapting quickly to change and knowing how the slightest change in your behaviour can alter the taste. If the weather changes dramatically, you’ll notice this in your fresh grind and will need to adjust your technique to get the coffee right.

I was reminded of this experience recently while working with a Social Media coordinator who wasn’t on Twitter, didn’t use RSS and only used Facebook for work purposes. The question I ask is: Should you hire a Social Media Expert that doesn’t use social media?

Eighteen year old Toni probably would have said yes. Go for it, if they know the theory then why shouldn’t they be hired? Now I feel a little different.

Social media is an ever changing landscape where many of the rules are still being made up. Being successful isn’t about setting up a Facebook page and paying some company to get you a million fans. It’s about engaging with your audience – and gaining fans that actually care about what you’re doing. After all, which would you prefer – 100 tyre-kickers crowding into your high street store, or 1 person coming in and actually buying something?

In order to truly understand a constantly changing landscape, you need to be close to it, watching it as it changes.

If you’re reading this post, you’re probably a Drupal developer with a website that’s about as speedy as a child eating brussel sprouts.

If you were not the original developer on the project, finding the cause of your performance issues can be tricky. Here are a few things you can do to get your website running faster. (more…)

Post Expiry is a simple WordPress plugin that allows you to set a category to move your post into at a specified date. It was initially created for use on Best Competitions to move competitions that had finished into the ‘Previous Competitions category’. read more…

This conflict has already been well documented but if you don’t know that Skype is the culprit, it’s pretty hard to find in a Google Search. I’ve decided to post here and include a few key words that might help some people trying to search out the answer.

The WAMP taskbar icon on my machine recently went half yellow and Apache didn’t appear to be working. When I visited localhost, all I got was “this page can not be displayed”. The culprit: Skype. Both applications use port 80 so Apache won’t run if you have Skype automatically loading on start-up.

To fix this problem, close Skype and restart your WAMP services. You can then re-open Skype.

Discussion on the WAMP forum

Our wedding website is now live. It’s a simple hand-coded design providing only the essentials.

As we move closer to the date I hope to introduce some new features that include Twitter & Flickr integration and the use of media queries to display mobile-friendly versions.