CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3css
JMRboosties
JMRboosties

Reputation: 15740

Does a Rails app handle CSS differently?

I have two sets of identical html and css files. One of which I'm loading up through Rails' index.html.erb file via a controller and all that, the other I'm running through my public folder as a control. The public index.html file looks fine:

Index in public directory

But when I run these exact same files in the rails index.html.erb file, it looks like this:

index.html.erb file

As you might be able to notice, the BETA text is slightly lower in the Rails build, and obviously the navigation list goes below my header element.

I'm admittedly a bit new at both css and rails, so this may be a known issue I'm unaware of. I tried searching for some insight but didn't find any problems similar to this one. If anyone has a tip on how to resolve this I'd be very thankful!

EDIT: I'm including my index.html and style.css files in the following pastebins. They're quite small, maybe a look at them could give some insight to you guys.

HTML: http://pastebin.com/wyYEN92n

CSS: http://pastebin.com/60xMe9YG

EDIT 2:

Found these two lines in the page source:

<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" />

I'm thinking it is safe to assume that something in these css files is causing the discrepancy. I will investigate and report back.

EDIT 3:

Looks like neither of those css files actually do anything. I'm including the contents of both in this pastebin: http://pastebin.com/pbHwEp4w

As you can see it's just commented stuff. What I did notice however, is that the page source has 2 html tags included in the same file. I'm pastebining that as well: http://pastebin.com/h4Rjqi4B

It goes 

<html>//rails generated stuff</html> 
<html>//My stuff</html>

Could this be causing the problem?

Upvotes: 2

Views: 182

Answers (3)

superiggy
superiggy

Reputation: 1061

The easiest way to solve this kind of problem: INSPECT.

Use your browser's inspector to check which CSS rules are affecting a given element. So, let's say you use Google Chrome, you can:

  1. Right click one of your navigation bar items, select Inspect Element
  2. Then in the new source code window select either .logo-container or .nav
  3. Check the panel on the right: You'll see all the currently applied CSS rules for that element.
  4. You'll also see which file is applying which rule.
  5. ???
  6. PROFIT!

Upvotes: 0

schreifels
schreifels

Reputation: 431

With regards to edit #3: it looks like that is coming from the default layout in app/views/layouts/application.html.erb. By default, Rails will load that file and put all of the content from the view where <%= yield %> is specified. If you had additional <html>, <head>, etc. tags in your view file, they would be duplicated. You can learn more about layouts here. Also, take a look at the asset pipeline for how to structure your CSS files in the app.

Like Ernest said, Rails is just delivering the HTML/CSS files, so the framework itself does not affect how the browser renders the content. However, the order in which the content is presented to the browser, of course, does matter.

Upvotes: 2

Ernest Friedman-Hill
Ernest Friedman-Hill

Reputation: 81694

CSS is interpreted in the browser, not on the server, so the easy answer is "no". But your styles could possibly be interpreted differently when they're added to any styles included in the Rails app itself, and possibly your HTML might be a bit different between the two. Examine the CSS included in the Rails app and take out anything that's going to adversely affect your design -- or simply remove all of it, making sure your CSS file is the only one in the whole codebase.

Upvotes: 2

Related Questions