input input - 2 months ago 6
CSS Question

Auto width of the error label

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

alt text

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

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.

Comments