How to Align Images in Buttons
You might have noticed I used <button> elements on the forms in the HTMLArea database. In the past I have only dared use them on IE-based applications. While the <button> tag isn't a Microsoft proprietary thing it's only recently that it's been supported by anything other than IE. Now that the more popular browsers, such as Safari and Mozilla/Firebird, support this HTML 4.0 tag I feel a lot safer using it.
Buttons on your forms no longer need to look boring. You can put anything you like between the <button> and </button> tags. A nice example is using a small icon to represent the purpose of the button. In the exampe below, a disk image to represent saving the document.
Nice aren't they!? The only problem is the way the image aligns with the text. It looks much better to align the middle of the text with the middle of the image, like so.
Doing this isn't as straight-forward as you might first imagine. My first attempt was to use the following CSS, which didn't work.
button{
vertical-align: middle;
}
Then I remembered my recent post about the vertical-align property. It only applies to inline objects, such as <span>. So I put everything inside the button inside a span element
<button><span><img src="images/icons/disk.gif" /></span></button>
Then tried the following CSS, but it still didn't work.
button span{
vertical-align: middle;
}
After a little searching on the web I found that you need to apply the vertical-align property to the image itself and the CSS needed is as follows. Any image inside any button will be set to align its middle with the rest of the line.
button img{
vertical-align: middle;
}
Still not sure if this makes sense to me or not, but it's something I will definitely remember. Hopefully I've saved you the hair-tugging I went through.
There is still some difference in the way different browsers format buttons and thos in IE remain the better looking. One of the differences is the amount of horizontal padding IE and Mozilla apply. It takes some patience with CSS to get them looking just so on all pages. Let your imagination go. Here's a button with no text or style at all. Click the image and notice how it behaves like a push-button (in IE at least).
PS: HTMLArea article should be publised later tonight. Karen's having a "ladies night" downstairs so I'm stuck in my office all night...
Skip to the 
You can subscribe to an individual
If you hear any noise
It ain't the boys
It's ladies night...
So you can play upstairs with you toys
As you probably know I've just recently started to follow your blog. I've found your articles (including the one above) very informative.
I have also noted that for a while there you weren't so busy. So i got to thinking why doesnt Jake also branch out into the education and training market.
Judging from your articles, I think you would make a good teacher (I realise I don't know you from adam here.. :-) )
Anyway a little off topic but just thought Id post that here..
A.
I did bits of training in the past Allen. Nothing class-based though. I once spent a day with a team of developers new to Domino who needed somebody to help them over the hurdles they had been encountering. I think the best thing I did that day was point them to this site. In fact one of them still reads, after what must be about 4 years. I've also spent a week with an MS developer who needed his hand held as he made the transition from Access to Notes.
If people want me to come and work with them in any way at all, they should get in touch. I'm cheap and flexible!
Cheap & flexible...
...sounds perfect for the ladies night!
What do they do for a ladies night? Watching a sweet movie and eating icecreams?
This Thursday is her last day at the school she's taught at for about 3 years. She's invited all the ladies she's worked with (well, the ones she likes) over. They'll probably eat nibbles, drink white wine and slag men off all night.
Thanks m8. That alignment trick saved my day.
Good Trick.