Can't get css to load in rails 3.2.3 development

407 views
Skip to first unread message

Vell

unread,
May 25, 2012, 5:57:04 PM5/25/12
to rubyonra...@googlegroups.com
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:
<div class='ui-corner-all'>
.....
</div>

or 

<div id='user_nav'>
....
</div>

The simple css that I tried to render is

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

Kleber Shimabuku

unread,
May 25, 2012, 6:07:56 PM5/25/12
to rubyonra...@googlegroups.com
Hi,

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

Tyler

unread,
May 25, 2012, 6:25:59 PM5/25/12
to rubyonra...@googlegroups.com
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.

Vell

unread,
May 25, 2012, 6:26:55 PM5/25/12
to rubyonra...@googlegroups.com


On Friday, May 25, 2012 6:07:56 PM UTC-4, Kleber Shimabuku 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.

Vell

unread,
May 25, 2012, 6:30:13 PM5/25/12
to rubyonra...@googlegroups.com


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? 

Colin Law

unread,
May 26, 2012, 12:07:33 PM5/26/12
to rubyonra...@googlegroups.com
On 25 May 2012 22:57, Vell <lovell....@gmail.com> wrote:
> 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.

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

Vell

unread,
May 26, 2012, 4:39:27 PM5/26/12
to rubyonra...@googlegroups.com


On Saturday, May 26, 2012 12:07:33 PM UTC-4, Colin Law wrote:
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.

Colin

Colin Law

unread,
May 26, 2012, 4:45:13 PM5/26/12
to rubyonra...@googlegroups.com
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

>>
>>
>> Colin
>
> --
> You received this message because you are subscribed to the Google Groups
> "Ruby on Rails: Talk" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/rubyonrails-talk/-/x2nQRmHL5oAJ.
>
> To post to this group, send email to rubyonra...@googlegroups.com.
> To unsubscribe from this group, send email to
> rubyonrails-ta...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/rubyonrails-talk?hl=en.

Colin Law

unread,
May 26, 2012, 4:55:58 PM5/26/12
to rubyonra...@googlegroups.com
Just to clarify, I meant pass your reply through a syntax validator :)

Colin

Vell

unread,
May 26, 2012, 5:18:14 PM5/26/12
to rubyonra...@googlegroups.com
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.

Colin

>>
>>
>> Colin
>
> --
> You received this message because you are subscribed to the Google Groups
> "Ruby on Rails: Talk" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/rubyonrails-talk/-/x2nQRmHL5oAJ.
>
> To post to this group, send email to rubyonrails-talk@googlegroups.com.
> To unsubscribe from this group, send email to
> rubyonrails-talk+unsubscribe@googlegroups.com.

Vell

unread,
May 26, 2012, 5:19:54 PM5/26/12
to rubyonra...@googlegroups.com
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,
 

Colin

>
> Colin
>
>>>
>>>
>>> Colin
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "Ruby on Rails: Talk" group.
>> To view this discussion on the web visit
>> https://groups.google.com/d/msg/rubyonrails-talk/-/x2nQRmHL5oAJ.
>>
>> To post to this group, send email to rubyonrails-talk@googlegroups.com.
>> To unsubscribe from this group, send email to
>> rubyonrails-talk+unsubscribe@googlegroups.com.

Colin Law

unread,
May 26, 2012, 5:24:26 PM5/26/12
to rubyonra...@googlegroups.com
On 26 May 2012 22:19, Vell <lovell....@gmail.com> wrote:
>
>
> On Saturday, May 26, 2012 4:55:58 PM UTC-4, Colin Law 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

Colin Law

unread,
May 26, 2012, 5:33:00 PM5/26/12
to rubyonra...@googlegroups.com
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

Jeremy Walker

unread,
May 26, 2012, 7:09:40 PM5/26/12
to rubyonra...@googlegroups.com
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.

>
> Anyone else?
>
> Colin
>
> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To post to this group, send email to rubyonra...@googlegroups.com.
> To unsubscribe from this group, send email to rubyonrails-ta...@googlegroups.com.

Stanley Lee

unread,
May 27, 2012, 3:59:52 AM5/27/12
to Ruby on Rails: Talk
Sorry to interrupt the conversation. I have a feeling that I'm having
a similar problem with this error printout: https://gist.github.com/aadd99fb703233368333
Do you think I'm having a similar issue with the order of precedence
with the commands?

Thanks in advance!

On May 26, 4:09 pm, Jeremy Walker <jez.wal...@gmail.com> wrote:
> On 26 May 2012, at 22:33, Colin Law <clan...@googlemail.com> wrote:
>
>
>
>
>
>
>
>
>
> > On 26 May 2012 22:18, Vell <lovell.mcilw...@gmail.com> wrote:
>
> >> On Saturday, May 26, 2012 4:45:13 PM UTC-4, Colin Law wrote:
>
> >>> On 26 May 2012 21:39, Vell <lovell.mcilw...@gmail.com> wrote:
>
> >>>> On Saturday, May 26, 2012 12:07:33 PM UTC-4, Colin Law wrote:
>
> >>>>> On 25 May 2012 22:57, Vell <> wrote:
> >>>>>> 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.
>
> >>>>> 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.
>
> >>>> Thanks for the response Colin. I ran my code for the form
> >>>> throughhttp://validator.w3.org/and it stated that my code passed. When

Vell

unread,
May 29, 2012, 12:39:02 PM5/29/12
to rubyonra...@googlegroups.com


On Saturday, May 26, 2012 5:24:26 PM UTC-4, Colin Law wrote:
On 26 May 2012 22:19, Vell <> wrote:
>
>
> On Saturday, May 26, 2012 4:55:58 PM UTC-4, Colin Law 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.

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

Colin

Vell

unread,
May 29, 2012, 12:42:11 PM5/29/12
to rubyonra...@googlegroups.com
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. :( 

Anyone else?

Colin

Vell

unread,
May 29, 2012, 9:31:43 PM5/29/12
to rubyonra...@googlegroups.com
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" %>

<div id='user_nav'>
<% 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 %>
</div>

app/assets/stylesheets/users.css.scss

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


Anyone else?

Colin

Vell

unread,
May 30, 2012, 11:56:48 AM5/30/12
to rubyonra...@googlegroups.com
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.
Reply all
Reply to author
Forward
0 new messages