Problem with styling form error messages

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

Answer 2

Unless I've missed something very obvious, your CSS has no easy fix to this solution and the problem is rooted a little deeper than a simple solution that won't involve restyling your entire form.

If you want a quick solution (and the error messages will stay as they are) use the following change in the html:

<li>'aaa' is no valid email address<br /> in the basic format local-part@hostname</li>

Answer 3

I did something like this ($this refers to the form itself):

    $elements = $this->getElements();
    foreach($elements as $elem) {
      $elem->removeDecorator('Errors');
    }

latter you can add a decorator to the form:

    $this->addDecorators(array(
        array('HtmlTag', array('tag'=>'dl', 'class'=>'form1')),
        array('FormErrors')
    ));