# Scaffold.css and Rails tutorial problem

**URL:** <https://www.ruby-forum.com/t/scaffold-css-and-rails-tutorial-problem/54322>\
**Category:** Rails\
**Created:** [March 1, 2006, 3:52pm UTC](https://www.ruby-forum.com/t/scaffold-css-and-rails-tutorial-problem/54322 "2006-03-01T15:52:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![byrnejb](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/d2c977/32.png) [@byrnejb](https://www.ruby-forum.com/u/byrnejb)\
**Post date:** [March 1, 2006, 3:52pm UTC](https://www.ruby-forum.com/t/scaffold-css-and-rails-tutorial-problem/54322/1 "2006-03-01T15:52:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![byrnejb](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/d2c977/32.png) [@byrnejb](https://www.ruby-forum.com/u/byrnejb)\
**Post date:** [March 1, 2006, 3:59pm UTC](https://www.ruby-forum.com/t/scaffold-css-and-rails-tutorial-problem/54322/2 "2006-03-01T15:59:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![byrnejb](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/d2c977/32.png) [@byrnejb](https://www.ruby-forum.com/u/byrnejb)\
**Post date:** [March 1, 2006, 4:33pm UTC](https://www.ruby-forum.com/t/scaffold-css-and-rails-tutorial-problem/54322/3 "2006-03-01T16:33:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![byrnejb](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/d2c977/32.png) [@byrnejb](https://www.ruby-forum.com/u/byrnejb)\
**Post date:** [March 1, 2006, 5:17pm UTC](https://www.ruby-forum.com/t/scaffold-css-and-rails-tutorial-problem/54322/4 "2006-03-01T17:17:14Z")

</div>

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:

> **[W3C QA - Recommended list of Doctype declarations you can use in your Web...](https://www.w3.org/QA/2002/04/valid-dtd-list.html)**
>
> W3C QA - List of valid Doctype declarations you can use in your document

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

---

<div class="post-metadata">

**Author:** ![byrnejb](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/d2c977/32.png) [@byrnejb](https://www.ruby-forum.com/u/byrnejb)\
**Post date:** [March 1, 2006, 6:43pm UTC](https://www.ruby-forum.com/t/scaffold-css-and-rails-tutorial-problem/54322/5 "2006-03-01T18:43:09Z")

</div>

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.” [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)  
To: [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)  
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

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