Forum: Ruby on Rails CSS Background-color Weirdness

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
63dad916bb5ab303368514e7b7aae46a?d=identicon&s=25 jabauer (Guest)
on 2009-04-06 05:39
(Received via mailing list)
For some reason the stylesheet I have associated with my layout will
not change the background-color for the content retrieved from my with
<%= yield %>.  To make matters stranger, I can style *any* part of the
html in my view that isn't the background-color.  Has anyone had this
problem before?  I have been searching for posts, but have come up
empty handed.

Many thanks for your help.  I've appended the code for the layout and
css to this post.  The relevant div is "main-wrapper".

--Jean--

P.S. The XHTML and CSS both validate, so I don't think that is the
problem.

Here is the code for the layout:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
        <title>The Early American Foreign Service Database</title>
        <%= stylesheet_link_tag 'eafsd' %>
    </head>
    <body>
        <div id="allcontent">
            <div id="header">
                <img src="../images/eafsd_header.gif" alt="EAFSD
Header Image"/>
            </div><!-- end header -->

            <div id="nav">
                <ul>
                    <li><a href="#" class="active">Home</a></li>
                    <li><a href="#">Relation Browser</a></li>
                    <li><a href="#">Search</a></li>
                    <li><a href="#">Maps</a></li>
                    <li><a href="#">Archive</a></li>
                    <li><a href="#">Admin</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div><!-- end nav -->

            <div id="main-wrapper">
                <%= yield -%>

            </div><!-- end main-wrapper -->

            <div id="footer">
                <p>Designed and Built by <a href="http://
www.jeanbauer.com">Jean Bauer</a> and Powered by <a href="http://
projectquincy.rubyforge.org">Project Quincy</a>.</p>
            </div><!-- end footer -->
        </div><!-- end allcontent -->
    </body>
</html>

And here is the css --

body {
    font-family: arial, helvetica, sans-serif;
  background-color: #142933;
}

#allcontent {
  width: 900px;
}

#header {
  background: #66471F;
  height: 150px;
  margin: 20px;
  padding-bottom: 20px;
}

#header img {
    display: block;
    margin: auto;
}

#nav {
    margin: 0 auto;
  padding: 0 20px;
}

#nav ul {
  padding: 20px 10px 20px 0px;
  list-style-type: none;
  margin: 0 auto;
}

#nav ul li {
  display: inline;
}


#nav ul li a {
  padding: 10px 20px 20px 20px;
  text-decoration: none;
  color: #CCB27F;
  font-weight: bold;
}

#nav ul li a.active {
    background: #CCB27F;
    color: #142933;
}

#main-wrapper {
  padding: 0 20px;
  margin: 0 auto;
  background: #ccb27f;  <!-- THIS IS WHAT DOESN'T WORK! -->
}

#main-wrapper h3 {
    color: #1B1B1B;
}

#content {
    float:right;
    width: 600px;
  margin-left:0;
  padding: 20px 15px;
}

#content img {
    float:right;
    display:inline;
    padding: 0 0px 20px 20px;
}

#sidebar {
    float:left;
    width: 200px;
  margin-right: 0;
  padding: 20px 15px;

}

#footer {
    clear:both;
  background: #66471F;
  text-align:center;
  padding: 10px 20px;
  margin: 20px;
  color: #CCB27F;
}

#footer a {
  color: #CCB27F;
  font-style:italic;
}
Ef3aa7f7e577ea8cd620462724ddf73b?d=identicon&s=25 Rob Biedenharn (Guest)
on 2009-04-06 05:59
(Received via mailing list)
On Apr 5, 2009, at 11:38 PM, jabauer wrote:

>
> --Jean--
>
> P.S. The XHTML and CSS both validate, so I don't think that is the
> problem.
>
> Here is the code for the layout:

>            <div id="main-wrapper">
>                <%= yield -%>
>
>            </div><!-- end main-wrapper -->

> #main-wrapper {
>   padding: 0 20px;
>   margin: 0 auto;
>   background: #ccb27f;  <!-- THIS IS WHAT DOESN'T WORK! -->
> }

Did you want to say:
  background-color: #ccb27f;

Could you have an early </div> tag in the template that's being
yield'ed?

-Rob

Rob Biedenharn    http://agileconsultingllc.com
Rob@AgileConsultingLLC.com
63dad916bb5ab303368514e7b7aae46a?d=identicon&s=25 jabauer (Guest)
on 2009-04-06 13:20
(Received via mailing list)
Thanks for getting back to me.  It doesn't make a difference if I use
background or background-color.  Neither displays.  I also rechecked
by template.  All the divs match up, but here it is.  Clearly I'm
missing something.  Thanks!

--Jean--

BTW: it doesn't render if I take out the "main" div either.

<div id="main">
    <div id="content">
        <h3>Welcome to the EAFSD</h3>
        <img src="../images/Franklin1777_small.gif" alt="Benjamin
Franklin in Beaver Hat"/>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque,
id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse
id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed
quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere
sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper,
lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum.
Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero
cursus venenatis.
        </p>
        <h3>How to Use the Database</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque,
id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse
id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed
quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere
sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper,
lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum.
Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero
cursus venenatis.
        </p>
    </div><!-- end content -->

    <div id="sidebar">
        <h3>News Updates</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque,
id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse
id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed
quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere
sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper,
lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum.
Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero
cursus venenatis.
        </p>
    </div><!-- end sidebar -->
</div><!-- end main -->
This topic is locked and can not be replied to.