Forum: Ruby on Rails scaffold.css and Rails tutorial problem

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
171ea139761951336b844e708d1547ab?d=identicon&s=25 James Byrne (byrnejb)
on 2006-03-01 15:52
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:

#-----------------------------------------------------------------------------
<!-- app/views/layouts/store.rhtml -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...
<html>
  <head>
    <title>
      Harte &amp; Lyne Limited - Depot Demo
    </title>
    <link href="/stylesheets/scaffold.css" media="all" rel="Stylesheet"
type="text/css" />
<link href="/stylesheets/HLL.css" media="all" rel="Stylesheet"
type="text/css" />
  </head>
#-----------------------------------------------------------------------------


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

#-----------------------------------------------------------------------------
<!-- app/views/store/checkout.rhtml -->

<div class="errorExplanation" id="errorExplanation"><h2>4 errors
prohibited this order from being saved</h2><p>There were problems with
the following fields:</p><ul><li>Name can't be blank</li><li>Pay type
can't be blank</li><li>Address can't be blank</li><li>Email can't be
blank</li></ul></div>

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

But the DOM inspector in Firefox shows this:

No styles defined

Click on tag to toggle stickyness
<div id="errorExplanation" class="errorExplanation">
<h2>

4 errors prohibited this order from being saved

</h2>
<p>

There were problems with the following fields:

</p>
<ul>
<li>

Name can't be blank

</li>
<li>

Pay type can't be blank

</li>
<li>

Address can't be blank

</li>
<li>

Email can't be blank

</li>
</ul>
</div>

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

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
171ea139761951336b844e708d1547ab?d=identicon&s=25 James Byrne (byrnejb)
on 2006-03-01 15:59
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
171ea139761951336b844e708d1547ab?d=identicon&s=25 James Byrne (byrnejb)
on 2006-03-01 16:33
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:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

and

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

But, both of these cause elements like <body></body> 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
171ea139761951336b844e708d1547ab?d=identicon&s=25 James Byrne (byrnejb)
on 2006-03-01 17:17
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 <div class="errorExplanation" id="errorExplanation">

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"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

as specified at:

http://www.w3.org/QA/2002/04/valid-dtd-list.html


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
2b891e820c238ded365d035771603f21?d=identicon&s=25 Bill Walton (Guest)
on 2006-03-01 18:43
(Received via mailing list)
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 Byrne" <byrnejb@harte-lyne.ca>
To: <rails@lists.rubyonrails.org>
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:
>
>
#---------------------------------------------------------------------------
--
> <link href="/stylesheets/HLL.css" media="all" rel="Stylesheet"
> type="text/css" />
>   </head>
>
#---------------------------------------------------------------------------
--
>
>
> The app/views/store/checkout.rhtml produces this:
>
>
#---------------------------------------------------------------------------
--
> <!-- app/views/store/checkout.rhtml -->
>
> <div class="errorExplanation" id="errorExplanation"><h2>4 errors
> prohibited this order from being saved</h2><p>There were problems with
> the following fields:</p><ul><li>Name can't be blank</li><li>Pay type
> can't be blank</li><li>Address can't be blank</li><li>Email can't be
> blank</li></ul></div>
>
>
#---------------------------------------------------------------------------
---
>
>
> </li>
> <li>
>
> Email can't be blank
>
> </li>
> </ul>
> </div>
>
>
#---------------------------------------------------------------------------
---
This topic is locked and can not be replied to.