Can't get css to load in rails 3.2.3 development

rubyonrails-talk
1

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;

}

2

Hi,

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

3

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.

4

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.

5

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?

6

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

7

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

8

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

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

9

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

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 :slight_smile:

Colin

10

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

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.

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.

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.

11

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

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.

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 :slight_smile:

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,

12

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

Colin

13

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

14

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

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.

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.

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.

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.

15

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!

16

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

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.

17

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

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.

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.

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.

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. :frowning:

18

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

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.

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.

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.

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. :frowning:

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;

}

19

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.