Automatic width of error mark
The error label is displayed to the width of the table. Like this:
alt text http://img518.imageshack.us/img518/8864/width1.jpg
How can I display it before the label text? This is the css:
label.error { color: red; font-size:16px; font-family:Nyala; background-color: #FFFFCC; display:block; width:auto; }
a source to share
This works without adding extra divs (although admittedly there is an extra spacing ( .errorMsg
) containing the error message:
Using the strict doctype XHTML 1.0.
<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 .errorMsg
is 51%, not 50%, to accommodate the input borders (added to the 50% width defined in CSS. This could only be FF3.x on Ubuntu 8.04, however I haven't tested exhaustively, or anyway I'm afraid YM, as always, MV.
Demonstration at: http://www.davidrhysthomas.co.uk/so/errorLabels.html .
a source to share
Wrap the margins with a div, set the div to the desired width, and set the inlet and label to fill the div.
Either that, or set the width for both the label and the input to the same pixels. The Div method is a little more flexible.
Note that when you call "Name:" a label is displayed. The error must be a flyby or something, it is not a "label", at least not the way HTML thinks it is.
a source to share