Problem with content-position and background-color in a sidebar

In app\views\expenses\new.html.erb, I’ve got (just so I know where the stuff on the page came from, for now): <% content_for :sidebar do %>   This is my sidebar stuff from:<br>     new.html.erb<br>     RTS\app\views\expenses <% end %>

In public\stylesheets\style.css, I’ve got: div#sidebar {    width: 200px;    margin-left: 480px;    background-color: yellow; }

Problem: My page displays the sidebar to the right side as I intend, but: - It displays the sidebar’s content as intend ... almost: that is, the text appear centered vertically rather than on top - It continues to have a lily-white background.

Any ideas?

Thanks in Advance, Richard

This doesn't appear to be a rails issue at all. However, install the Firebug pludin for Firefox and then you can inspect the div and see what it's style is and where those styles are inherited from.

Colin

I do have Firebug installed, but keep it inactive until occasions like this arise. Great idea! Thanks, Colin.

+1

This is a CSS problem, not Rails [1]. Probably a 'float' or 'display' property that needs to be tweaked.

[1] Assuming you have "<div id="sidebar"><%= yield :sidebar %></div>" somewhere in your view...

Hey Colin and Michael,

Thanks to both of you for your responses.

Assuming you have "<div id="sidebar"><%= yield :sidebar %></div>"

somewhere in your view... [Michael]

Sidebar is referenced in three file the app (according to my Ruby Search.rb program): app\views\layouts\standard.html.erb:     <body id="library">         <div id="container">             <div id="header">                 <h1>Receipts Tracking System</h1>                 <h3>Library powered by Ruby on Rails</h3>             </div>

      <div id="content">                 <%= yield -%>             </div>             <div id="sidebar"></div>   [snip] app\views\layouts\expenses.html.erb: <body>     <p style="color: green"><%= flash[:notice] %></p>

    <table width="100%">   <tr>       <td> <%= yield %> </td>       <td> <%= yield :sidebar %> </td>   [snip] app\views\expenses\new.html.erb (at the bottom):   <% content_for :sidebar do %>     This is my sidebar stuff from:<br>       new.html.erb<br>       RTS\app\views\expenses   <% end %>

This doesn't appear to be a rails issue at all [Colin}:

I opened Firebug when "New Expenses", the offending page, was being displayed in Firefox. Fiirebug referenced Scaffold.css 3 times. But style.css wsas never mentioned, which is where the following definition is given:

div#sidebar {    width: 200px;    margin-left: 480px;    background-color: #00FFFF; }

Does that point to an error in my code?

Regards, Richard

The gory details from Firebug follow:

In the left-hand pane: body   div (not expanded)   link (")   table     tbody       tr         td (My page's left side, not expanded)         td (My page's right side = "sidebar", not expanded)       /tr     /tbody   /table   div id = divCleekiAttrib (other stuff)   /div /body

Except for the last div, that structure matches my expenses,html.erb:   <body>       <p style="color: green"><%= flash[:notice] %></p>

      <table width="100%">     <tr>         <td> <%= yield %> </td>         <td> <%= yield :sidebar %> </td>     </tr>       </table>   </body>

So far, so good.

But with the focus on the 2nd td in the left-hand pane, the right-hand pane shows two items: First:   body, p, ol, ul, td { [scaffo...6718330 (line 3)]     font-family:verdana,arial,helvetica,sans-serif;     font-size:13px;     line-height:18px;   }

Second (two "body" items "inherited from body"):: [scaffo...6718330 (line 3)]   body, p, ol, ul, td {     font-family:verdana,arial,helvetica,sans-serif; [crossed out]     font-size:13px; [crossed out]     line-height:18px; [crossed out]   }

  body { [scaffo...6718330 (line 1)]     color:#333333;   }

Hey Colin and Michael,

Thanks to both of you for your responses.

Assuming you have "<div id="sidebar"><%= yield :sidebar %></div>"

somewhere in your view... [Michael]

Sidebar is referenced in three file the app (according to my Ruby Search.rb program): app\views\layouts\standard.html.erb: <body id="library"> <div id="container"> <div id="header"> <h1>Receipts Tracking System</h1> <h3>Library powered by Ruby on Rails</h3> </div>

       &lt;div id=&quot;content&quot;&gt;
           &lt;%= yield \-%&gt;
       &lt;/div&gt;
       &lt;div id=&quot;sidebar&quot;&gt;&lt;/div&gt;
   \[snip\]

app\views\layouts\expenses.html.erb: <body> <p style="color: green"><%= flash[:notice] %></p>

<table width="100%"> <tr> <td> <%= yield %> </td> <td> <%= yield :sidebar %> </td> [snip] app\views\expenses\new.html.erb (at the bottom): <% content_for :sidebar do %> This is my sidebar stuff from:<br> new.html.erb<br> RTS\app\views\expenses <% end %>

This doesn't appear to be a rails issue at all [Colin}:

I opened Firebug when "New Expenses", the offending page, was being displayed in Firefox. Fiirebug referenced Scaffold.css 3 times. But style.css wsas never mentioned, which is where the following definition is given:

I presume you have included style.css? Assuming that it is in public/stylesheets then you should have   <%= stylesheet_link_tag 'style' %> in the header. Check in View, Page Source to see if it is there and looks correct. In the html it should reference /stylesheets/style.css (with leading /).

div#sidebar { width: 200px; margin-left: 480px; background-color: #00FFFF; }

Does that point to an error in my code?

Regards, Richard

The gory details from Firebug follow:

In the left-hand pane: body div (not expanded) link (") table tbody tr td (My page's left side, not expanded) td (My page's right side = "sidebar", not expanded)

Is this the <div id=sidebar> that we are talking about?

                   /tr
           /tbody
   /table
   div id = divCleekiAttrib \(other stuff\)
   /div

/body

Except for the last div, that structure matches my expenses,html.erb: <body> <p style="color: green"><%= flash[:notice] %></p>

       &lt;table width=&quot;100%&quot;&gt;
           &lt;tr&gt;
               &lt;td&gt;  &lt;%= yield %&gt;              &lt;/td&gt;
               &lt;td&gt;  &lt;%= yield :sidebar %&gt;  &lt;/td&gt;
           &lt;/tr&gt;
       &lt;/table&gt;
   &lt;/body&gt;

So far, so good.

But with the focus on the 2nd td in the left-hand pane,

Expand the td and select the div id=sidebar that should be there I think. Then you should see the style from style.css

Colin

Woops,

Missed 1 file that mentioned "sidebar" (because I only searched in files with name matching /erb|rb|rjs/):

public\stylesheets\style.css

Apologies, Richard

I don't see where you are putting this in a div with id=sidebar. Should you have         <% content_for :sidebar do %> <div id="sidebar">           This is my sidebar stuff from:<br>             new.html.erb<br>             RTS\app\views\expenses </div>         <% end %> or something similar?

Colin

Colin,

Is this the <div id=sidebar> that we are talking about?

Yes!

Expand the td and select the div id=sidebar that should be there I think. Then you should see the style from style.css

*** You're onto something! ***

In the Firebug pane, with the 2nd td expanded, when I bring the cursor over: body => teal (all except the top couple of debugging output, that are exempt from subsequent mention) <div> => all white   <link> => all white   <p> => all white <table> => all teal   <tbody> => all teal     <tr> => all teal       <td> left-half => all teal       <td> right-half => all teal         (text) => all teal

That looks to me like the sidebar background-color spec is being subordinated to the main-page spec or .... I have no idea.

Best wishes, Richard

I don't see where you are putting this in a div with id=sidebar. Should you have         <% content_for :sidebar do %> <div id="sidebar">           This is my sidebar stuff from:<br>             new.html.erb<br>             RTS\app\views\expenses </div>         <% end %> or something similar?

Here's what I've got:

In app\views\expenses\new.html.erb (at the bottom) I have:         <% content_for :sidebar do %>           This is my sidebar stuff from:<br>             new.html.erb<br>             RTS\app\views\expenses         <% end %>

Both divs are defined in app\views\layouts\standard.html.erb:     <body id="library">         <div id="container">             <div id="header">                 <h1>Receipts Tracking System</h1>                 <h3>Library powered by Ruby on Rails</h3>             </div>

      <div id="content">                 <%= yield -%>             </div>           <div id="sidebar">                 <%= yield -%>             </div>         </div>     </body> </html>

I just added that yield to div/sidebar based on no more than hot air. I availed me naught.

I don't see where you are putting this in a div with id=sidebar. Should you have <% content_for :sidebar do %> <div id="sidebar"> This is my sidebar stuff from:<br> new.html.erb<br> RTS\app\views\expenses </div> <% end %> or something similar?

Here's what I've got:

In app\views\expenses\new.html.erb (at the bottom) I have: <% content_for :sidebar do %> This is my sidebar stuff from:<br> new.html.erb<br> RTS\app\views\expenses <% end %>

Both divs are defined in app\views\layouts\standard.html.erb: <body id="library"> <div id="container"> <div id="header"> <h1>Receipts Tracking System</h1> <h3>Library powered by Ruby on Rails</h3> </div>

       &lt;div id=&quot;content&quot;&gt;
           &lt;%= yield \-%&gt;
       &lt;/div&gt;
     &lt;div id=&quot;sidebar&quot;&gt;
           &lt;%= yield \-%&gt;
       &lt;/div&gt;
   &lt;/div&gt;

</body> </html>

I just added that yield to div/sidebar based on no more than hot air. I availed me naught.

Forget about the ruby code for the moment, just check whether the html is correct. If you just view the html in the browser (View, Page Source) for the sidebar what do you see? Is the div id='sidebar' there? Post that bit of html.

Colin

Thanks Colin for continuing to look at this thing. I posted the only files in my app that have "sidebar" in their content on http://www.pastie.org/874534.

Consecutively, they are: app\views\expenses\new.html.erb app\views\layouts\expenses.html.erb app\views\layouts\standard.html.erb public\stylesheets\style.css

I'm looking around for some simple html/css code that has a single page split in into main and sidebar. I think I've done or saw this a year or two ago.

Best wishes, Richard

FYI, Here's the model layout I aspire to apply to this app in the next couple of weeks, i.e. after get I over this hurdle, if ever, and probably one or two more: http://www.pastie.org/874611

Right now I'm going to apply the background-color in the html tag; it should take precedence over any CSS styling.