[Xsltforms-support] default css rules solution

SourceForge Headquarters 225 Broadway Suite 1600 San Diego, CA 92101 +1 (858) 422-6466

Here is a solution that seems to work as I want.

<html>
    <head>
        <style type="text/css">
            span.control{white-space:nowrap; }
            span.control-label{display:inline-block; width:300px; 
text-align:right;}
        </style>
    </head>
    <body>
        <span class="control">
            <span class="control-label">Label</span>
            <span class="control-input"><input class="textbox" 
type="textbox" value="value1"/></span>
        </span>
        <span class="control">
            <span class="control-label">A Wider Label</span>
            <span class="control-input"><input class="textbox" 
type="textbox" value="value2"/></span>
        </span>
        <span class="control">
            <span class="control-label">A Much Much Much Wider Label</span>
            <span class="control-input"><input class="textbox" 
type="textbox" value="value3"/></span>
        </span>
        <span class="control">
            <span class="control-label">Label</span>
            <span class="control-input"><input class="textbox" 
type="textbox" value="value1"/></span>
        </span>
        <span class="control">
            <span class="control-label">A Wider Label</span>
            <span class="control-input"><input class="textbox" 
type="textbox" value="value2"/></span>
        </span>
        <span class="control">
            <span class="control-label">A Much Much Much Wider Label</span>
            <span class="control-input"><input class="textbox" 
type="textbox" value="value3"/></span>
        </span>
        <span class="control">
            <span class="control-label">Label</span>
            <span class="control-input"><input class="textbox" 
type="textbox" value="value1"/></span>
        </span>
        <span class="control">
            <span class="control-label">A Wider Label</span>
            <span class="control-input"><input class="textbox" 
type="textbox" value="value2"/></span>
        </span>
        <span class="control">
            <span class="control-label">A Much Much Much Wider Label</span>
            <span class="control-input"><input class="textbox" 
type="textbox" value="value3"/></span>
        </span>
    <body>
</html>

Now label and input move together as one and a label is clearly linked 
to an input spatially.

-- 
Regards

Stephen Cameron

Data Programmer
Integrated Marine Observing System  (IMOS)
eMarine Information Infrastructure Project
University of Tasmania, Private Bag 21, Hobart, TAS 7001, Australia

Tel: +61 3 6226 8507
Fax: +61 3 6226 2997
Email: ste...@ut...
URL: http://www.imos.org.au/eMII.html