# CSS issue with div fieldWithErrors

**URL:** <https://www.ruby-forum.com/t/css-issue-with-div-fieldwitherrors/176498>\
**Category:** Rails\
**Created:** [October 1, 2009, 11:22am UTC](https://www.ruby-forum.com/t/css-issue-with-div-fieldwitherrors/176498 "2009-10-01T11:22:49Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![fipa](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/f/9e8a1a/32.png) [@fipa](https://www.ruby-forum.com/u/fipa)\
**Post date:** [October 1, 2009, 11:22am UTC](https://www.ruby-forum.com/t/css-issue-with-div-fieldwitherrors/176498/1 "2009-10-01T11:22:49Z")

</div>

Hi,

What’s the correct way of writing a form?

I do the following:

\<%= form\_for … %\>

\<%= f.label :whatever %\> \<%= f.text\_field :whatever %\>

\<%- end -%\>

Then I do some CSS to have all the labels aligned, and all the input  
fields aligned. The problem happens when a field is not valid, Rails  
wraps it in this stupid div with class fieldWithErrors (and what the  
hell is that camelCaseCrap?), so it blows my design out.

Is there somewhere some easy CSS to circumvent that trouble? Nothing  
fancy, just a simple and clean form.

---

<div class="post-metadata">

**Author:** ![fipa](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/f/9e8a1a/32.png) [@fipa](https://www.ruby-forum.com/u/fipa)\
**Post date:** [October 1, 2009, 2:48pm UTC](https://www.ruby-forum.com/t/css-issue-with-div-fieldwitherrors/176498/2 "2009-10-01T14:48:10Z")

</div>

Fernando P. wrote:

> Hi,
> 
> What’s the correct way of writing a form?
> 
> I do the following:
> 
> \<%= form\_for … %\>
> 
> \<%= f.label :whatever %\> \<%= f.text\_field :whatever %\>
> 
> \<%- end -%\>
> 
> Then I do some CSS to have all the labels aligned, and all the input  
> fields aligned. The problem happens when a field is not valid, Rails  
> wraps it in this stupid div with class fieldWithErrors (and what the  
> hell is that camelCaseCrap?), so it blows my design out.

If that’s ruining your design, then your CSS has problems. It should be  
easy to define the CSS for fieldWithErrors so it doesn’t cause layout  
issues. (And it’s not stupid – it’s a way of clearly showing the user  
where the errors are.)

For myself, I don’t have this problem because I lay out my forms with  
table elements. (Stop screaming. 🙂 They have the semantics of tables,  
so this is justified.)

> Is there somewhere some easy CSS to circumvent that trouble? Nothing  
> fancy, just a simple and clean form.

## Best,

Marnen Laibow-Koser  
[http://www.marnen.org](http://www.marnen.org)  
removed\_email\_address@domain.invalid

---

<div class="post-metadata">

**Author:** ![fipa](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/f/9e8a1a/32.png) [@fipa](https://www.ruby-forum.com/u/fipa)\
**Post date:** [October 1, 2009, 11:31am UTC](https://www.ruby-forum.com/t/css-issue-with-div-fieldwitherrors/176498/3 "2009-10-01T11:31:02Z")

</div>

Ok I found a fix: put that in an initializer:

ActionView::Base.field\_error\_proc = Proc.new do |html\_tag, instance|  
“\<span class=“fieldWithErrors”\>#{html\_tag}”  
end

---

<div class="post-metadata">

**Author:** ![fipa](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/f/9e8a1a/32.png) [@fipa](https://www.ruby-forum.com/u/fipa)\
**Post date:** [October 1, 2009, 3:59pm UTC](https://www.ruby-forum.com/t/css-issue-with-div-fieldwitherrors/176498/4 "2009-10-01T15:59:35Z")

</div>

> If that’s ruining your design, then your CSS has problems.  
> Nope. It is extremely common, to see forms created with
> 
> tags to  
> separate each input. A div inside a
> 
> tag is not allowed by html  
> standards, look for the internet, plenty people have this
> 
> problem.
> 
> But you are right with tables, they can greatly simplify css and avoid  
> headaches, I already use tables for some of my layouts because they are  
> 100% cross browser compatible.

---

<div class="post-metadata">

**Author:** ![fipa](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/f/9e8a1a/32.png) [@fipa](https://www.ruby-forum.com/u/fipa)\
**Post date:** [October 1, 2009, 7:16pm UTC](https://www.ruby-forum.com/t/css-issue-with-div-fieldwitherrors/176498/5 "2009-10-01T19:16:14Z")

</div>

How do you manage that? IE 5, 6 and 7 don’t support the table  
element :P. If I had my choice, I’d use them too, but until IE 6 and 7  
finally die… I can’t do it!

On Oct 1, 5:48 am, Marnen Laibow-Koser \<rails-mailing-l…@andreas-

---

<div class="post-metadata">

**Author:** ![fipa](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/f/9e8a1a/32.png) [@fipa](https://www.ruby-forum.com/u/fipa)\
**Post date:** [October 1, 2009, 4:16pm UTC](https://www.ruby-forum.com/t/css-issue-with-div-fieldwitherrors/176498/6 "2009-10-01T16:16:46Z")

</div>

Fernando P. wrote:

> > If that’s ruining your design, then your CSS has problems.

> Nope.

Yup.

> It is extremely common, to see forms created with
> 
> tags to  
> separate each input. A div inside a
> 
> tag is not allowed by html  
> standards, look for the internet, plenty people have this
> 
> problem.

Then

tags are not the right thing to use here. Replace them with

s. Problem solved.

> But you are right with tables, they can greatly simplify css and avoid  
> headaches, I already use tables for some of my layouts because they are  
> 100% cross browser compatible.

Not always. And I’m certainly not advocating table-based layouts in  
general – only when the semantics are actually tabular.

## Best,

Marnen Laibow-Koser  
[http://www.marnen.org](http://www.marnen.org)  
removed\_email\_address@domain.invalid

---

<div class="post-metadata">

**Author:** ![fipa](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/f/9e8a1a/32.png) [@fipa](https://www.ruby-forum.com/u/fipa)\
**Post date:** [October 1, 2009, 7:31pm UTC](https://www.ruby-forum.com/t/css-issue-with-div-fieldwitherrors/176498/7 "2009-10-01T19:31:58Z")

</div>

Josh Infiesto wrote:

> How do you manage that? IE 5, 6 and 7 don’t support the table  
> element :P.

Of course they do.

> If I had my choice, I’d use them too, but until IE 6 and 7  
> finally die… I can’t do it!

Nonsense.

> On Oct 1, 5:48�am, Marnen Laibow-Koser \<rails-mailing-l…@andreas-

## Best,

Marnen Laibow-Koser  
[http://www.marnen.org](http://www.marnen.org)  
removed\_email\_address@domain.invalid