Last night I found some ugliness with Langorang. I think my problem is that I like to develop with Firefox and Opera while trying to avoid IE. Well, the thing I have to consider is that most of my target market uses IE and if the site doesn’t look good for them then the site dosen’t look good.

The problem: Items concerning error notification style are not pretty for IE

The solution: Hack the CSS and some form field pages

I developed Langorang around the base code from the book RailsSpace and everything has been great. Every once in a while I run into something that is related to my hosting environment or a browser issue. In this case the error handling really looks bad after someone submits a form in the IE7 browser (I haven’t checked 6 yet but Microsoft announced they will be rolling out 7 to everybody so I am not that worried about it). The error data box extends all the way across the screen and the form fields that have a pretty highlight in Firefox, have an ugly red box that extends the width of the content area.

If you are developing on a Windows platform and you are using IE as your primary development browser, chances are you have already run into this issue and corrected it. As for the rest of us, here is a solution that seams to work pretty well.

First in your site.css file you will need to add the following lines:

To the #errorExplanation style add the “width: 400px;” (without the double quotes) like below.

#errorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

After the #errorExplanation ul li style add the following additional styles.

#errorExplanation ul li { … }

#form_row div.fieldWithErrors {
  display: inline;
  padding-right: 2px;
}

#form_row div.fieldWithErrors input, input.fieldWithErrors {
  background-color: #fcc;
}

Now in every area that you use the form validation routines put the following code around your form fields like the example below:

NOTE: It is only necessary to put one around all of your form fields for this to work.

Form Start

…

<div id=”form_row”>

    <div class=”form_row”>

        <label for=”title”>Title:</label>

        <%= form.text_field :title, :style => “” %>

    </div>

    <div class=”form_row”>

        <label for=”permalink”>Permalink:</label>

        <%= form.text_field :permalink %>

    </div>

</div>

…

Submit Button

The first enhancement forces the error box to be 400 pixels wide and keeps it from stretching the width of the content area. In IE browsers this was an ugly site. The 400 pixels width really cleans it up.

The second enhancement pulls together the intended purpose of the highlight around the form field and adds a background color to the empty field that needs data. It looks a whole lot cleaner and works for 3 of the major browsers.