Can't get css to load in rails 3.2.3 development

Gurdipe_D · May 25, 2012, 11:58pm

Hello all,

I have been struggling all day with getting css files to load in my
application. I am attempting to use the rails-ui-themes gem to help
style
my application but right now just getting simple css code to render is
not
working.

I have tried removing the require_tree and including the file
individually
and it still does not seem to work. When I look at the source of my
html,
every css file is loaded including the application.css file but nothing
seems to happen.

I was wondering if anyone can tell me what I am missing.

At this moment here is what I have as my configuration:

app/assets/stylesheets/application.css:

*= require_self
*= require_tree .
*= require jquery-ui/overcast

layouts/application.html.erb:

<%= stylesheet_link_tag “application”, :media => “all” %>
<%= javascript_include_tag “application” %>

some css I have tried to render:

.....

or

....

The simple css that I tried to render is

#user_nav{
float: right;
font-size: 12px;
}

lmcilwain · May 26, 2012, 12:09am

Hi,

Are you using cache? Try to clean up your web browser cache.

Em sexta-feira, 25 de maio de 2012 18h57min04s UTC-3, Vell escreveu:

lmcilwain · May 26, 2012, 12:27am

On Friday, May 25, 2012 6:07:56 PM UTC-4, Kleber S. wrote:

Hi,

Are you using cache? Try to clean up your web browser cache.

Thanks for the response Kleber. I am using Safari and I just deleted my
cache but the issue is still there. I decided to also try it in Firefox
just to see if maybe Safari was acting up but this issue is also
happening
in Firefox as well.

lmcilwain · May 26, 2012, 12:31am

On Friday, May 25, 2012 6:25:59 PM UTC-4, Tyler wrote:

Also if you have recently run “rake assets:precompile” (e.g. for Heroku
deploy), that will take precedence. In that case run “rake assets:clean”
and clear your browser cache after each deploy.

Thanks for your response Tyler. I never ran rake assets:precompile. I
didn’t think I needed to run that in development mode. This app has
never
been deployed anywhere and so far has only been run in development mode.
Do
I need to run rake assets:precomplie even in development mode to get my
css
to work?

lmcilwain · May 26, 2012, 6:09pm

On 25 May 2012 22:57, Vell [email protected] wrote:

seems to happen.
First check the html is valid by copy/paste the complete page source
(View > Page Source or similar in your browser) into the w3c html
validator. If that is ok then run firebug in firefox and you should
be able to see whether the css is there.

Colin

lmcilwain · May 26, 2012, 10:40pm

On Saturday, May 26, 2012 12:07:33 PM UTC-4, Colin L. wrote:

I have tried removing the require_tree and including the file

Thanks for the response Colin. I ran my code for the form
through http://validator.w3.org/ and it stated that my code passed. When
I
launch firebug while i have that page loaded, firebug says that there
are
no rules in the stylesheet. But again when I look at my html source all
of
the stylesheets are loaded though none of them don’t have anything in
them
aside from the one that I have started editing.

lmcilwain · May 26, 2012, 12:27am

Also if you have recently run “rake assets:precompile” (e.g. for Heroku
deploy), that will take precedence. In that case run “rake
assets:clean”
and clear your browser cache after each deploy.

lmcilwain · May 26, 2012, 10:46pm

On 26 May 2012 21:39, Vell [email protected] wrote:

application but right now just getting simple css code to render is not
(View > Page Source or similar in your browser) into the w3c html
validator. If that is ok then run firebug in firefox and you should
be able to see whether the css is there.

Thanks for the responseColin. I ran my code for the form
throughhttp://validator.w3.org/ and it stated that my code passed. When I
launch firebug while i have that page loaded, firebug says that there are no
rules in the stylesheet. But again when I look at my html source all of the
stylesheets are loaded though none of them don’t have anything in them aside
from the one that I have started editing.

Could you pass that through a validator and try again? I am not sure
what you meant to say. You say that firebug says there are no rules
in the stylesheet, but then go on to say that they are empty, so it is
not surprising that there are no rules.

Colin

lmcilwain · May 26, 2012, 10:58pm

On 26 May 2012 21:45, Colin L. [email protected] wrote:

style my
First check the html is valid by copy/paste the complete page source
from the one that I have started editing.

Could you pass that through a validator and try again? I am not sure
what you meant to say. You say that firebug says there are no rules
in the stylesheet, but then go on to say that they are empty, so it is
not surprising that there are no rules.

Just to clarify, I meant pass your reply through a syntax validator

Colin

lmcilwain · May 26, 2012, 11:19pm

On Saturday, May 26, 2012 4:45:13 PM UTC-4, Colin L. wrote:

application. I am attempting to use the rails-ui-themes gem to help
nothing
When I
in the stylesheet, but then go on to say that they are empty, so it is
not surprising that there are no rules.

Could I pass the html of the form that I am trying to render the css
through the validator again? Yes I could do that. Or do you mean put the
css file into the validator?

Sorry for the confusion about what I was trying to say. What I was
attempting to say is that, all of the css.scss files are all empty aside
from the one .css.scss file that i am trying to render in my form. So
right
now I am working on my user registration form and so I am writing my css
in
the users.css.scss file. That is the only one that has any content in it
at
this moment. But since the layout is loading the application.css file
and
that file is calling require_tree . the users.css.scss file should have
been loaded and the css should have shown up on the page.

So at this moment the #user_nav css that I am calling on a div in the
application layout that is supposed to position some links to the right
of
the browser page are showing to the left as if there wasn’t any css at
all.

lmcilwain · May 26, 2012, 11:20pm

On Saturday, May 26, 2012 4:55:58 PM UTC-4, Colin L. wrote:

I have been struggling all day with getting css files to load in my
every css file is loaded including the application.css file but
through http://validator.w3.org/ and it stated that my code passed.
what you meant to say. You say that firebug says there are no rules
in the stylesheet, but then go on to say that they are empty, so it is
not surprising that there are no rules.

Just to clarify, I meant pass your reply through a syntax validator

Im sorry maybe I still don’t understand. did you want me to paste my
validator response to the thread? or what do you mean by ‘reply’?

Thanks,

lmcilwain · May 26, 2012, 11:34pm

On 26 May 2012 22:18, Vell [email protected] wrote:

Hello all,
and it still does not seem to work. When I look at the source of my

Sorry for the confusion about what I was trying to say. What I was
attempting to say is that, all of the css.scss files are all empty aside
from the one .css.scss file that i am trying to render in my form. So right
now I am working on my user registration form and so I am writing my css in
the users.css.scss file. That is the only one that has any content in it at
this moment. But since the layout is loading the application.css file and
that file is calling require_tree . the users.css.scss file should have been
loaded and the css should have shown up on the page.

I don’t think you mentioned previously that they were .sccs files,
unless I missed it. I thought they were simple css files. I have not
played with sass yet.

Anyone else?

Colin

lmcilwain · May 26, 2012, 11:26pm

On 26 May 2012 22:19, Vell [email protected] wrote:

On Saturday, May 26, 2012 4:55:58 PM UTC-4, Colin L. wrote:

Just to clarify, I meant pass your reply through a syntax validator

Im sorry maybe I still don’t understand. did you want me to paste my
validator response to the thread? or what do you mean by ‘reply’?

No, I am sorry, it was a poor attempt at humour on my part as your
post was not valid English.

Colin

lmcilwain · May 27, 2012, 1:11am

On 26 May 2012, at 22:33, Colin L. [email protected] wrote:

On 25 May 2012 22:57, Vell <> wrote:

individually

from the one that I have started editing.

unless I missed it. I thought they were simple css files. I have not
played with sass yet.

Is this a public project that we can see or is it private? If its
public, could you post a link. If its private, could you maybe paste
your application.css, users.css.scss and your config files (including
development.rb) to a gist for us to look at.

Happy to look offlist for you if you don’t want the Internet to see.
Just message me privately.

lmcilwain · May 27, 2012, 10:00am

Sorry to interrupt the conversation. I have a feeling that I’m having
a similar problem with this error printout:

gist.github.com

https://gist.github.com/stanigator/aadd99fb703233368333

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title><% full_title(yield(:title)) %></title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>

This file has been truncated. show original

application_helper.rb

module ApplicationHelper

    # REturns the full title on a per-page basis
    def full_title(page_title)
        base_title = "Ruby on Rails Tutorial Sample App"
        if page_title.empty?
            base_title
        else
            "#{base_title} | #{page_title}"
        end

This file has been truncated. show original

console

stanley@ubuntu:~/rails_sample/sample_app$ bundle exec rspec spec/requests/static_pages_spec.rb
.F..F..F..F.

Failures:

  1) StaticPages Home page should have the base title
     Failure/Error: page.should have_selector('title', :text => "Ruby on Rails Tutorial Sample App")
       expected css "title" with text "Ruby on Rails Tutorial Sample App" to return something
     # ./spec/requests/static_pages_spec.rb:15
     # ./bundler_stubs/rspec:16

This file has been truncated. show original

There are more than three files. show original

Do you think I’m having a similar issue with the order of precedence
with the commands?

Thanks in advance!

lmcilwain · May 29, 2012, 6:40pm

On Saturday, May 26, 2012 5:24:26 PM UTC-4, Colin L. wrote:

validator response to the thread? or what do you mean by ‘reply’?

No, I am sorry, it was a poor attempt at humour on my part as your
post was not valid English.

Sorry about my bad grammar. Thats been happening to me a lot lately lol.
I
need to turn on proof reading before sending lol.

lmcilwain · May 29, 2012, 6:43pm

On Saturday, May 26, 2012 5:33:00 PM UTC-4, Colin L. wrote:

not

launch firebug while i have that page loaded, firebug says that there
what you meant to say. You say that firebug says there are no rules
Sorry for the confusion about what I was trying to say. What I was
been
loaded and the css should have shown up on the page.

I don’t think you mentioned previously that they were .sccs files,
unless I missed it. I thought they were simple css files. I have not
played with sass yet.

The files when they are created are as .css.scss files. I am not using
sass
(at least not knowingly). I have other apps where I have written valid
css
in a .css.scss file and it has rendered fine. So I didn’t think
mentioning
the file extension in the beginning made a difference. Sorry for that
omission. But I can also say that I have removed the .scss extension
just
to see if that made a difference and I still have the same issue of my
css
not rendering.

lmcilwain · May 30, 2012, 3:33am

On Tuesday, May 29, 2012 12:42:11 PM UTC-4, Vell wrote:

On 26 May 2012 21:39, Vell [email protected] wrote:
help

html,

the

right
I don’t think you mentioned previously that they were .sccs files,
my css not rendering.

It looks like doing a direct link to the stylesheet that I am trying to
include also doesn’t work. For instance, the following code also does
not
show any of the css.

app/views/layouts/application.html.erb

<%= stylesheet_link_tag “users” %>

<% if current_user %> <%= link_to 'Edit', edit_user_path(:current) %> | <%= link_to 'Logout', logout_path %> <% else %> <%= link_to 'Register', new_user_path %> | <%= link_to 'Login', login_path %> <% end %>

app/assets/stylesheets/users.css.scss

#user_nav{
float: right;
font-size: 12px;
}

lmcilwain · May 30, 2012, 5:57pm

On Tuesday, May 29, 2012 9:31:43 PM UTC-4, Vell wrote:

I have tried removing the require_tree and including the file
(View > Page Source or similar in your browser) into the w3c html
there

what you meant to say. You say that firebug says there are no rules

and
sass (at least not knowingly). I have other apps where I have written valid

<%= link_to ‘Login’, login_path %>

Anyone else?

Colin

For those that were interested to know, the issue is with using thin. If
I
launch my application using thin start --prefix /app_name then css
does
not show. But if I launch it using rails s the css shows fine.
Something
must not be working right with the version I am using so I will check to
see if there is a newer version.