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.
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.
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.
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...