Question

Long story short, when I submit a form, there are error messages under each input field with invalid value. I am using Zend_Form so the markup looks like this:

<form enctype="application/x-www-form-urlencoded" method="post" action="/auth/register"><dl class="zend_form">
<dt id="firstName-label"><label for="firstName" class="required">First name</label></dt>
<dd id="firstName-element">
<input type="text" name="firstName" id="firstName" value="" />
<ul class="errors"><li>Value is required and can't be empty</li></ul></dd>

<dt id="lastName-label"><label for="lastName" class="required">Last name</label></dt>
<dd id="lastName-element">
<input type="text" name="lastName" id="lastName" value="" />
<ul class="errors"><li>Value is required and can't be empty</li></ul></dd>
<dt id="birthdate-label"><label for="birthdate" class="required">Birthdate (YYYY-MM-DD)</label></dt>
<dd id="birthdate-element">
<input type="text" name="birthdate" id="birthdate" value="" />
<ul class="errors"><li>Value is required and can't be empty</li></ul></dd>
<dt id="email-label"><label for="email" class="required">Email</label></dt>
<dd id="email-element">
<input type="text" name="email" id="email" value="aaa" />
<ul class="errors"><li>'aaa' is no valid email address in the basic format local-part@hostname</li></ul></dd>

<dt id="username-label"><label for="username" class="required">Username</label></dt>
<dd id="username-element">
<input type="text" name="username" id="username" value="" />
<ul class="errors"><li>Value is required and can't be empty</li></ul></dd>
<dt id="password-label"><label for="password" class="required">Password</label></dt>
<dd id="password-element">
<input type="password" name="password" id="password" value="" />
<ul class="errors"><li>Value is required and can't be empty</li></ul></dd>
<dt id="password2-label"><label for="password2" class="required">Confirm password</label></dt>
<dd id="password2-element">
<input type="password" name="password2" id="password2" value="" />
<ul class="errors"><li>Value is required and can't be empty</li></ul></dd>

<dt id="captcha-input-label"><label for="captcha-input" class="required">Captcha</label></dt>
<dd id="captcha-element">
<img width="125" height="50" alt="" src="/images/captcha/7978c51b6114d77be14cff3c66e8f514.png" />
<input type="hidden" name="captcha[id]" value="7978c51b6114d77be14cff3c66e8f514" id="captcha-id" />
<input type="text" name="captcha[input]" id="captcha-input" value="" />
<ul class="errors"><li>Captcha value is wrong</li></ul></dd>
<dt id="register-label">&#160;</dt><dd id="register-element">
<input type="submit" name="register" id="register" value="Submit" /></dd></dl></form>

My CSS styles are like this:

@CHARSET "UTF-8";

.errors {
    color: #D8000C;
}
.zend_form dt {
    clear: both;
    width: 35%;
    text-align: right;
    padding-right: 1em;
    font-weight: bold;
}
.zend_form dt, .zend_form dd {
    float: left;
    margin-top: 1em;
}
.zend_form #captcha-element img {
    float: left;
    border: 1px solid #000;
}
.zend_form #captcha-input {
    margin-left: 1em;
}
.zend_form #captcha-element .errors {
    clear: both;
    padding-top: 1em;
}

The problem is, that when an error message is too long, it moves the associated input field down and left and it doesn’t look good. Here is an example (see the Email field):

I am not a CSS ninja and I am having trouble fixing this. Any ideas?

Answer 1

If you do not want to change a html structure, then something like

.zend_form dd { width: 50%; }

will do the trick