Topic: Error Messages with Nested Form Elements/ Text Fields (CSS related)

Hi all,

I have a little CSS issue with a nested label/textfield element and the Rails fieldWithErrors:

my CSS file looks as the following:

label {
  position: relative;
  width: 150px;
  margin: 0.7em 0em;
  padding-right: 10px;
  text-align: right;

input {
  position: absolute;
  left: 100%;
  top: 0%;

.. and in my View I use it like:
<label>Some Field: <%= text_field 'some', 'field' ></label>

The reason why I use this nested CSS is because it makes building forms much quicker and it looks very neat.

Now, when I output the error messages for a model this collapses - obviously. The CSS for the fieldWithErrors breaks my defined label/input CSS. I have tried to set the same values to the fieldWithErrors class as I have it for the nested input field, but that's even worse.

Anyone has experience with this an could help me out?

Thanks in advance.

Re: Error Messages with Nested Form Elements/ Text Fields (CSS related)

What does your markup for an error message look like?

Re: Error Messages with Nested Form Elements/ Text Fields (CSS related)

Basically, it just breaks the CSS layout. The <input> element is not floating left of the <label> element any more when the <div class="errormessagesFor> is wrapped around.

I have tried to vary with the CSS for the error class, but could not find any solution that does not interfere with the design.

I had an extensive search for this issue on the net, tho. I found a very helpful tutorial that solves the problem and is exactly what I've been looking for.

Unfortunately, I have changed my CSS already before I found a solution and it looks exactly the same on the browser as before, but it is not nested anymore and needs a browser hack for IE/Firefox.

label {
    clear: both;
    /* IE and Mozilla Hack
       second element is valid, if browser can interpret it
       Mozilla can't interpret inline-block for some reason */
    display: -moz-inline-box;
    display: inline-block;
    width: 140px;
    padding-right: 10px;
    vertical-align: top;
    line-height: 1.8;
    text-align: right;

/* no need for input fields to be wrapped into CSS */

/* style the Rails error message */
.fieldWithErrors {
    display: inline;
    padding-right: 12px;

    background-image: url('/images/backgrounds/fieldWithError.gif');
    background-position: right center;
    background-repeat: no-repeat;