Welcome Guest! To access all forums & features, please register an account or sign-in. → Why register?


C Spire expanding LTE coverage to Alabama and Florida in Back Page News

CSS Not Loading

Started by .Dan, Feb 06 2012 03:13

11 replies to this topic - - - - -

#1 .Dan

    Mac User

  • 680 posts
    • Joined: 12-June 04
  • Location: Caracas, VE

Posted 06 February 2012 - 03:13

Hi guys, I'm starting a Ruby on Rails web app for my class but I can't get my CSS to work.

Here is my HTML:
<!DOCTYPE html>
<html>
  <head>
	<title>Welcome</title>
	<meta charset='utf-8'>
	<link href='~/css/styles.css' rel='stylesheet'>
	<link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
  </head>
  <body>
	<div id='wrapper'>
	  <div id='header'>
		<h1>Welcome</h1>
	  </div>
	  <div id='content'>
		<h2>The new magic number is 80</h2>
	  </div>
	  <div id='footer'>
		<h4>Daniel </h4>
	  </div>
	</div>
  </body>
</html>

And here is my CSS:

wrapper, header, content, footer {
	display: block;
}
#wrapper{
	width:66%;
	margin:auto;
}

#header{
	background-color:#FFCA00;
	font-family: 'Arvo', serif;
	font-weight: 700;
	font-size: 22px;
	color: #A68300;
	border-bottom:solid 1px #FFE273;
}
#content{
background-color: #FFD740;
font-size: 16px;
font-family: 'Arvo', serif;
font-weight: 400;
color: #A68300;
	margin:12px 0;
	float:left;
}

#footer{  
	background-color:#FFCA00;
	font-size: 12px;
	font-family: 'Arvo', serif;
	font-weight: 400;
	color: white;
	border-top:solid 1px #FFE273;
}

What is wrong with it? I have validated both files and they seem to be OK.
Thank you!

Ad Bot


#2 myNando

    Designer

  • 3,305 posts
    • Joined: 15-March 06
  • Location: Orlando, Florida

Posted 06 February 2012 - 03:28

Get rid of the ~/ in the <linkhref='~/css/styles.css'rel='stylesheet'> and see if it works.

#3 primexx

    Neowinian ULTRAKILL

  • 12,023 posts
    • Joined: 24-April 05

Posted 06 February 2012 - 03:32

what does ~/ do?

#4 OP .Dan

    Mac User

  • 680 posts
    • Joined: 12-June 04
  • Location: Caracas, VE

Posted 06 February 2012 - 03:34

I did and it is not working, should I add something to my Gemfile to get CSS to work? It's very strange because I rendered my code in a website and it did render fine, but when I run it on my local server it only shows the HTML and no CSS.

#5 ZakO

    Resident Fanatic

  • 831 posts
    • Joined: 21-September 07

Posted 06 February 2012 - 03:41

Get rid of the ~/ as people have said. Which version of Rails are you using, what environment are you running in, and where are your CSS files located?

Rails 3.1 introduced a new asset pipeline, your assets generally go in /app/assets rather than /public/assets. Also, use stylesheet_link_tag so you can utilize the asset pipeline (it will locate the asset for you and minify/compress it if in production mode).

#6 MattehCarter

    Neowinian

  • 77 posts
    • Joined: 14-January 12
  • Location: England, UK
  • OS: Windows 7, XP

Posted 06 February 2012 - 21:29

<link rel='stylesheet' href='url' type='text/css' />

try that format

#7 ACTIONpack

    Graphic Designer

  • 1,666 posts
    • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8 Pro
  • Phone: HTC Windows 8X

Posted 06 February 2012 - 23:31

Try this format. It always works and make sure it's in the head tag.

<link rel="stylesheet" href="url" type="text/css" media="screen"/>

#8 MattehCarter

    Neowinian

  • 77 posts
    • Joined: 14-January 12
  • Location: England, UK
  • OS: Windows 7, XP

Posted 07 February 2012 - 19:05

View PostACTIONpack, on 06 February 2012 - 23:31, said:

Try this format. It always works and make sure it's in the head tag.

<link rel="stylesheet" href="url" type="text/css" media="screen"/>

There's no need to include 'media' unless it's for a specific device.

#9 sweetsam

    Developer

  • 2,448 posts
    • Joined: 21-July 04

Posted 08 February 2012 - 04:11

Load up the page in firefox -> Right click on the page, select view source -> click on the css link. You should see the css styles, if not there is a problem with the link.

#10 The_Decryptor

    THE ALPHA CEPH!

  • 18,355 posts
    • Joined: 28-September 02
  • Location: Sol System
  • OS: WinLin X 10.9 Ill-tempered Badger

Posted 08 February 2012 - 08:25

View PostMattehCarter, on 07 February 2012 - 19:05, said:

There's no need to include 'media' unless it's for a specific device.

No need to include the "type" attribute either, it's always CSS.

#11 MattehCarter

    Neowinian

  • 77 posts
    • Joined: 14-January 12
  • Location: England, UK
  • OS: Windows 7, XP

Posted 08 February 2012 - 20:19

View PostThe_Decryptor, on 08 February 2012 - 08:25, said:

No need to include the "type" attribute either, it's always CSS.

Fair enough! My links have never worked when I have not included the "type" attribute - strange.

#12 Sophism

    Neowinian Wise One

  • 4,253 posts
    • Joined: 05-December 03
  • Location: Greenbelt, MD

Posted 20 May 2012 - 14:05

Just a note since I stumbled across this while searching for something else.

All of the answers in this thread are correct for HTML. However with RoR you are better off using the stylesheet link tag.

<%= stylesheet_link_tag :all %> will link all stylesheets in public/stylesheets.

or,

<%= stylesheet_link_tag "style" %>

This will generate <link href="/stylesheets/style.css?1337517391" media="screen" rel="stylesheet" type="text/css" />

notice the ?1337517391? The main benefit of using the link tags are the provided cache busting techniques. This is simply the timestamp of the file. If you modify your CSS file it will update the timestamp thus forcing any browsers caching CSS to update.

There are link tags for images and javascript files as well which provide the same benefits.
Back to Web Design / Programming · Next Unread Topic →


  1. Quick Nav
  2. Neowin Forums
  3. → Technical Help & Support
  4. → Web Design / Programming