Skip navigation.

Harold's Home

   Home
  
XML version of this site

PHP Scripts

Index
CLI fun
Mail on 404
HB-NS (NewsScript)

Downloads

Applescripts
APOD to Desktop
Dreamweaver Extensions

Stuff

Writings
Other stuff
Central Grinder

OOOk Default:

VJ stuff
VJ Tools
Bananas
Strippers
Sample Movies

News

Forms
One of the problems with valid, structural XHTML and CSS is forms. Often we resort to tables to get the labels and entryfields nicely lined up.
Today I "discovered" a nice way to keep things clean.

Consider the following form:
SearchCharactername:
Profession:

Here is the XHTML code:
<form method="get" action="/guildtool.php">
<fieldset>
    <legend>Search</legend>
    <input type="hidden" name="action" value="searchparser" />
    <span class="formlabel">Charactername:</span> <input type="text" name="charactername" value="" /><br />
    <span class="formlabel">Profession:</span> <select name="profession">
        <option value=""> </option>
        <option value="Alchemy">Alchemy</option>
        <option value="Blacksmithing">Blacksmithing</option>
        <option value="Enchanting">Enchanting</option>
        <option value="Engineering">Engineering</option>
        <option value="Herbology">Herbology</option>
        <option value="Leatherworking">Leatherworking</option>
        <option value="Mining">Mining</option>
        <option value="Skinning">Skinning</option>
        <option value="Tailoring">Tailoring</option>
    </select><br />
    <input type="submit" value=" make it so " />
</fieldset>
</form>


And here is the CSS that displays the fieldnames in a column:
fieldset { width: 300px; }
.formlabel
{
    width: 120px;
    display: inline-block;
}


The magic is in the display: inline-block; there. In Internet Explorer 6 and Safari 2.0 this works like a charm, other browsers just display the fields next to each other, not that big a deal in most instances, and if it is you can just revert to the old way. I think I'll be using the new method from now on.

Show all items | Read all items

About, copyright, privacy and accessibility | Mail