thr3ads.net - Rails - [Rails] scaffold.css and Rails tutorial problem [Mar 2006]

If this information is useful, please help other people find it:
Share via:

James Byrne

2006-Mar-01 14:52 UTC

[Rails] scaffold.css and Rails tutorial problem

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-transitional.dtd">
<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

-- 
Posted via http://www.ruby-forum.com/.

James Byrne

2006-Mar-01 14:59 UTC

head link

[Rails] Re: scaffold.css and Rails tutorial problem

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



-- 
Posted via http://www.ruby-forum.com/.

James Byrne

2006-Mar-01 15:33 UTC

head link

[Rails] Re: scaffold.css and Rails tutorial problem

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

-- 
Posted via http://www.ruby-forum.com/.

Hogan, Brian P.

2006-Mar-01 15:46 UTC

head link

[Rails] scaffold.css and Rails tutorial problem

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">


-----Original Message-----
From: rails-bounces@lists.rubyonrails.org
[mailto:rails-bounces@lists.rubyonrails.org] On Behalf Of James Byrne
Sent: Wednesday, March 01, 2006 8:52 AM
To: rails@lists.rubyonrails.org
Subject: [Rails] scaffold.css and Rails tutorial problem


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-transitional.dtd">
<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

-- 
Posted via http://www.ruby-forum.com/.
_______________________________________________
Rails mailing list
Rails@lists.rubyonrails.org
http://lists.rubyonrails.org/mailman/listinfo/rails

James Byrne

2006-Mar-01 16:17 UTC

head link

[Rails] Re: scaffold.css and Rails tutorial problem

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



-- 
Posted via http://www.ruby-forum.com/.

Bill Walton

2006-Mar-01 17:42 UTC

head link

[Rails] scaffold.css and Rails tutorial problem

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

> 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-transitional.dtd">
> <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
>
> --
> Posted via http://www.ruby-forum.com/.
> _______________________________________________
> Rails mailing list
> Rails@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails

Maybe Matching Threads

Search for more possibly parallel threads

Rails - Mar 2006 - scaffold.css and Rails tutorial problem

[Rails] scaffold.css and Rails tutorial problem

[Rails] Re: scaffold.css and Rails tutorial problem

[Rails] Re: scaffold.css and Rails tutorial problem

[Rails] scaffold.css and Rails tutorial problem

[Rails] Re: scaffold.css and Rails tutorial problem

[Rails] scaffold.css and Rails tutorial problem

Maybe Matching Threads