Question

The error label displays till the width of the table. As this:

alt text http://img518.imageshack.us/img518/8864/width1.jpg

How can I display it till the text of the label? This is the css:

 label.error    { color: red; font-size:16px; font-family:Nyala; background-color: #FFFFCC; display:block; width:auto; }

Answer 1

This works, without adding any extra divs (though admittedly there is an extra span (.errorMsg) to contain the error-message:

Using XHTML 1.0 strict doctype.

    <style>

        #container
            {width: 50%;
            margin: 0 auto;
            }

        label   {display: inline-block;
            width: 48%;
            text-align: right;
            }

        input   {display: inline-block;
            width: 50%;
            }
        .errorMsg
            {display: block;
            width: 51%;
            margin: 0 0 0.5em 49%;
            color: #f00;
            background-color: #ffa
            }

    </style>

...

    <div id="container">

        <form>

            <label for="input1">Label 1</label>
                <input type="text" id="input1" name="input1" />
                <span class="errorMsg">Error message</span>

            <label for="input1">Label 2</label>
                <input type="text" id="input2" name="input2" />
                <span class="errorMsg">Error message</span>

        </form>

    </div>

It’s worth noting that the width of the .errorMsg is 51%, not 50%, to accomodate the borders of the input (being added to the 50% width defined in the CSS. That may just be FF3.x on Ubuntu 8.04, though. I’ve not tested exhaustively. Or much at all, I’m afraid. YM, as always, MV.

Demonstration at: http://www.davidrhysthomas.co.uk/so/errorLabels.html.