# CSS Background-color Weirdness

**URL:** <https://www.ruby-forum.com/t/css-background-color-weirdness/164798>\
**Category:** Rails\
**Created:** [April 6, 2009, 5:39am UTC](https://www.ruby-forum.com/t/css-background-color-weirdness/164798 "2009-04-06T05:39:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jabauer](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/48db29/32.png) [@jabauer](https://www.ruby-forum.com/u/jabauer)\
**Post date:** [April 6, 2009, 5:39am UTC](https://www.ruby-forum.com/t/css-background-color-weirdness/164798/1 "2009-04-06T05:39:59Z")

</div>

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:

 The Early American Foreign Service Database \<%= stylesheet\_link\_tag 'eafsd' %\> 

 ![EAFSD
Header Image]()

```
        <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 and Powered by Project Quincy.

  

  
  

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;   
}

#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;  
}

---

<div class="post-metadata">

**Author:** ![jabauer](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/48db29/32.png) [@jabauer](https://www.ruby-forum.com/u/jabauer)\
**Post date:** [April 6, 2009, 5:59am UTC](https://www.ruby-forum.com/t/css-background-color-weirdness/164798/2 "2009-04-06T05:59:51Z")

</div>

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;   
> }

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

Could you have an early tag in the template that’s being  
yield’ed?

-Rob

Rob B. [http://agileconsultingllc.com](http://agileconsultingllc.com)  
removed\_email\_address@domain.invalid

---

<div class="post-metadata">

**Author:** ![jabauer](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/48db29/32.png) [@jabauer](https://www.ruby-forum.com/u/jabauer)\
**Post date:** [April 6, 2009, 1:20pm UTC](https://www.ruby-forum.com/t/css-background-color-weirdness/164798/3 "2009-04-06T13:20:25Z")

</div>

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.

### Welcome to the EAFSD
 ![Benjamin
Franklin in Beaver Hat]()

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.

### How to Use the Database

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.

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