Scaffold.css and Rails tutorial problem

Rails
1

In iteration D.1 on page 109 I am not getting a styled error message box
displayed at the top of the checkout as described in the tutorial and I
cannot seem to discover where I have erred.

The scaffold.css is copied from the pragmatic programmers site:

#--------------------------------------------------------------------
$ cat public/stylesheets/scaffold.css
body { background-color: #fff; color: #333; }

body, p, ol, ul, td {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 13px;
line-height: 18px;
}

pre {
background-color: #eee;
padding: 10px;
font-size: 11px;
}

a { color: #000; }
a:visited { color: #666; }
a:hover { color: #fff; background-color:#000; }

.fieldWithErrors {
padding: 2px;
background-color: red;
display: table;
}

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

#ErrorExplanation h2 {
text-align: left;
font-weight: bold;
padding: 5px 5px 5px 15px;
font-size: 12px;
margin: -7px;
background-color: #c00;
color: #fff;
}

#ErrorExplanation p {
color: #333;
margin-bottom: 0;
padding: 5px;
}

#ErrorExplanation ul li {
font-size: 12px;
list-style: square;
}

/* START:css */
.ListTitle {
color: #244;
font-weight: bold;
font-size: larger;
}

.ListActions {
font-size: x-small;
text-align: right;
padding-left: 1em;
}

.ListLine0 {
background: #e0f8f8;
}

.ListLine1 {
background: #f8b0f8;
}
/* END:css */

#-----------------------------------------------------------------------------

The code in app/views/layouts/store.rhtml produces this in the browser
display:

#-----------------------------------------------------------------------------

Harte & Lyne Limited - Depot Demo #-----------------------------------------------------------------------------

The app/views/store/checkout.rhtml produces this:

#-----------------------------------------------------------------------------

4 errors prohibited this order from being saved

There were problems with the following fields:

  • Name can't be blank
  • Pay type can't be blank
  • Address can't be blank
  • Email can't be blank

#------------------------------------------------------------------------------

But the DOM inspector in Firefox shows this:

No styles defined

Click on tag to toggle stickyness

4 errors prohibited this order from being saved

There were problems with the following fields:

  • Name can’t be blank

  • Pay type can’t be blank

  • Address can’t be blank

  • Email can’t be blank

#------------------------------------------------------------------------------

This is telling me that the styles that error_messages_for is expecting
are not provided by the stylesheet. Can anyone tell me why?

Regards,
Jim

2

Well, writing the question caused me to look at the DOCTYPE declaration
and this seems to be the source of the problem. Removing the DOCTYPE
from the top of the store.rhtml template fixes the problem. However now
my tidy html validator is complaining about a missing DOCTYPE. What is
the proper DOCTYPE to use with Rails generated HTML/XHTML and whyn is
the one that I chose interfering with the errorExplaination styles?

Regards,
Jim

3

This is evidently a FireFox related issue, whether it is a bug or more
rigorous enforcement of styles I cannot say. MS-IE does not alter Rails
error display behaviour regardless of DOCTYPE.

Apparently, the only DOCTYPEs that will allow errorExplantation to work
as expected with FireFox are these:

and

!DOCTYPE html PUBLIC “-//IETF//DTD HTML 2.0//EN”>

But, both of these cause elements like to be reported as
non-standard tags. I am not sure whether this is a FireFox issue per
se, or a problem with the stylesheet that does not impact on default
browser behaviour and is only caught when a DOCTYPE is specified. Can
anyone else commnet? For now I will simply remove the DOCTYPE from the
template but it does not seem to me the correct solution to the problem.

Jim

4

RE: scaffold.css and Rails tutorial problem
Posted by Hogan, Brian P. (Guest)
on 01.03.2006 16:46
(Received via mailing list)

Might be because Firefox is case-sensetive.

You have errorExplanation in the div and ErrorExplanation in your CSS.

#ErrorExplanation vs

Yes, this is the exact problem. “:%s /#Err/#err/” in
public/stylesheets/scaffold.css corrects the entire problem. After this
change the Rails error display now works in FireFox with the following
DOCTYPE template:

<?xml version="1.0" encoding="utf-8"?>

as specified at:

Thank you very much.

This is a Rails generator bug in:

/usr/lib/ruby/gems/1.8/gems/rails-1.0.0/lib/rails_generator/generators/components/scaffold/templates/style.css

Regards,
Jim

5

Hi James,

You need a ‘notice’ style in one of your style sheets. It’s in
depot.css in
AWQ on page 524.

Best regards,
Bill

----- Original Message -----
From: “James B.” [email protected]
To: [email protected]
Sent: 2006-03-01 8:52 AM
Subject: [Rails] scaffold.css and Rails tutorial problem

body, p, ol, ul, td {

#ErrorExplanation {
font-weight: bold;
padding: 5px;
color: #244;
.ListLine0 {
background: #e0f8f8;
}

.ListLine1 {
background: #f8b0f8;
}
/* END:css */

#---------------------------------------------------------------------------

The code in app/views/layouts/store.rhtml produces this in the browser
display:

#---------------------------------------------------------------------------

#---------------------------------------------------------------------------

The app/views/store/checkout.rhtml produces this:

#---------------------------------------------------------------------------

4 errors prohibited this order from being saved

There were problems with the following fields:

  • Name can't be blank
  • Pay type can't be blank
  • Address can't be blank
  • Email can't be blank

#---------------------------------------------------------------------------

  • Email can’t be blank

    • #---------------------------------------------------------------------------