Topic: CSS Background Color not set

I have a layout that looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="shortcut icon" href="/favicon.ico" />
    <title>The Tommy Bowden Show</title>
    <%= stylesheet_link_tag 'clemson_preseason' %>
    <%= javascript_include_tag :defaults %>
</head>

<body>
    <div id="container">
        <div id="header">
            <div id="headerLeft"><%= image_tag 'logo.jpg', :size => "420x106" %></div>
            <div id="headerRight">
                <%= image_tag('register.jpg', :size => "96x34", :border => "0") %>
                <%= image_tag('login.jpg', :size => "96x33", :border => "0") %><br />
                <%= link_to(image_tag('ordertickets.jpg', :size => "195x50", :border => "0"), "http://ev12.evenue.net/cgi-bin/ncommerc … xTixButton", :target => "_blank") %>
            </div>
        </div>
        <div id="orangebar"><%= image_tag('orange_banner.jpg', :size => "891x37") %></div>
        <div id="content-container">
              Doobeedoobee doooo
              <%= yield %>
        </div>
        <div id="splash_footer">
           <p>Copyright &copy; 2008 The Tommy Bowden Show.  All Rights Reserved</p>
           <%= link_to(image_tag('mcg_logo.jpg', :size => "141x32", :border => "0", :mouseover => 'mcg_logo_over.jpg'), "http://www.mcgstudio.com", :target => "_blank") %>
        </div>
    </div>
</body>
</html>


and the css for the content-container looks like this:
#content-container {
    clear: both;
    padding-left: 65px;
    padding-right: 25px;
    background-color: #666666;
    height: auto;
}

How come the text that is in the content-container gets colored with the background color but not anything that is pulled in from the <%= yield %> ??

A person who never made a mistake never tried anything new.

Re: CSS Background Color not set

Without seeing the site in action and the rest of the stylesheet it's going to be hard to say. Do you have any other styles that could the child elements of the #content-container could be inheriting?

If you can't post a link to the site, try using the Firebug plugin for Firefox. It'll tell you exactly what you need to know about the style inheritance in a couple of clicks.

Re: CSS Background Color not set

Here is the entire stylesheet:

body {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    background-color: #000;
}

h1, h2, h3, h4 {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #fff;
}

p {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #fff;
    font-size: 13px;
}

#header {
    width: 916px;
}

#headerLeft {
    float :left;
}

#headerRight {
    float: right;
}

#content-container {
    clear: both;
    padding-left: 65px;
    padding-right: 25px;
    background-color: #666666;
    height: auto;
}

.img_splash_sample {
    padding-right: 30px;
}

#splash_left {
    margin-top: 30px;
    float: left;
    width: 50%;
}

#splash_right {
    margin-top: 30px;
    float: right;
    width: 45%;
}

#thanks_left {
    margin-top: 30px;
    float: left;
    width: 40%;
}

#thanks_right {
    margin-top: 60px;
    float: right;
    width: 60%;
}

/*#flash {
    margin-top: 10px;
    margin-left: 25px;
    width: 883px;
}

#notice {
    background-color: #f38834;
    border: #fa7408 4px solid;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding-left: 10px;
}


#error {
    background-color: #c97066;
    border: #d81400 4px solid;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding-left: 10px;
}
*/
/* form attributes */
div.box .input-text{
  border:1px solid #4a4949;
  font-size: 16px;
  color:#666666;
}

div.box label{
  display:block;
  margin-bottom:15px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#fff;
}

div.box label span{
  display:block;
  float:left;
  padding-right:6px;
  width:70px;
  text-align:right;
  font-weight:bold;
}

br {
    clear: left;
}

#orangebar {
    padding-left: 25px;
    width: 891px;
}

/* styles for errors */
li {
    list-style-type: square;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #fff;   
}

.fieldWithErrors {
    border-left: #ff0000 solid 10px;
}


#container {
    margin: 0 auto;
    width: 916px;
}


#sampleimage ul {
   
}

#sampleimage li {
    list-style-type: square;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #fff;
}

a.splash:link, a.splash:hover {
    color: #e34600;
}

a.splash:visited {
    color: #ccc;
}

#splash_footer {
    padding-top: 10px;
    text-align: center;
    clear: both;
    background: url("http://localhost:3002/images/footer_bg.jpg") no-repeat;
    width: 916px;
}

#splash_footer p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #666;
}


I will install firebug and check it out.  There are no children of content-container.

A person who never made a mistake never tried anything new.

Re: CSS Background Color not set

If the child DOM elements don't have a grey background, what colour do they have? If you've installed Firebug you've probably found out the problem by now - the plugin is awesome.

Re: CSS Background Color not set

They are black from the body declaration in the stylesheet.

A person who never made a mistake never tried anything new.

Re: CSS Background Color not set

Post the actual html generated from the page, that way I can run it on my machine to see what you're seeing.
A screenshot would probably help too ... remember, we can't see what you're seeing.

Austin Web Developer
Web Application Development with Ruby on Rails, PHP (w CakePHP or CodeIgniter), ASP.NET (w MVC)

Re: CSS Background Color not set

Neil wrote:

If the child DOM elements don't have a grey background, what colour do they have? If you've installed Firebug you've probably found out the problem by now - the plugin is awesome.

x2

in fact x 1,000,000

i'd go as far as to say that if you're doing any sort of web development firebug should be the first thing you install. I pity people who designed web sites before firebug the same way as i do programmers that used punchcards.

Re: CSS Background Color not set

I guess I will not discover anything, but just in case I mention. To find out which CSS classes are acting on an element Firebug for Firefox is extremely useful

Re: CSS Background Color not set

I estimate I will not bring out anything, but just in case I acknowledgment. To determine out which CSS classes are behaving on an component Firebug for Firefox is highly practicable.