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