Simple CSS Design Help: Back Page Header Background Not Displaying

[jimbwayne]

Hi All,

I’m having trouble getting the background of my header wrapper to behave on the back pages of my site. Here’s the URL.

http://illuminostics.com/?page_id=50

As you’ll see in the CSS below, I have the background of the header wrapper set to grey, but it won’t display as anything but white. Need to darken up that background so my white nav menu displays properly on these back pages. Seems to me it’s being overridden by some other div, but I can’t for the life of me figure out which one.

Here’s the relevant CSS. The “body #header_wrapper” block toward the bottom is the one I can’t get to behave. I’m guessing it’s a simple fix and that I’m overlooking something obvious, but I’m at a dead end here.

Any help would be much appreciated.

Thanks,

Jim

/*
CSS Reset
*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, .search_box p
{
margin:0;
padding:0;
border:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
#page {
width: 100%;
margin: 0 auto;
text-align: center;

}
body
{
line-height:1.5;
}
blockquote:before, blockquote:after, q:before, q:after
{
content:””;
}
blockquote, q
{
quotes:”” “”;
}
a img
{
border:none;
}

/*
Global Layout
*/

body
{
background: #fff;
font-size: 14px;
font-family: Helvetica, Arial, ‘Lucida Grande’,Verdana,sans-serif;
padding: 0;
margin: 0;
color: #7D7D7D;
overflow-x: hidden;
text-align: left;
}

#top_bg
{
width: 100%;
height: 50px;
background: #fff;
border-top: 1px solid #fbe201;
-webkit-box-shadow: rgba(0, 0, 0, .24) 0 3px 8px;
-moz-box-shadow: rgba(0, 0, 0, .24) 0 3px 8px;
box-shadow: rgba(0, 0, 0, .24) 0 3px 8px;
z-index: 999;
position: absolute;
margin: auto;
text-align: center;
}

#top_bar
{
width: 960px;
height: 66px;
margin:0 auto;
text-align: left;
}

body #header_wrapper
{
width: 100%;
height: 85px;
text-align: left;
padding-top: 25px;
padding-bottom: 25px;
margin: 0 auto;
background: #333333;
border: 1px solid #C9C9C9;
z-index: 9999;
-webkit-box-shadow: -5px -5px 0 0 #F5F5F6, 5px 5px 0 0 #F5F5F6, 5px 0 0 0 #F5F5F6, 0 5px 0 0 #F5F5F6, 5px -5px 0 0 #F5F5F6, -5px 5px 0 0 #F5F5F6;
-moz-box-shadow: -5px -5px 0 0 #F5F5F6, 5px 5px 0 0 #F5F5F6, 5px 0 0 0 #F5F5F6, 0 5px 0 0 #F5F5F6, 5px -5px 0 0 #F5F5F6, -5px 5px 0 0 #F5F5F6;
box-shadow: -5px -5px 0 0 #F5F5F6, 5px 5px 0 0 #F5F5F6, 5px 0 0 0 #F5F5F6, 0 5px 0 0 #F5F5F6, 5px -5px 0 0 #F5F5F6, -5px 5px 0 0 #F5F5F6;
}

body.home #header_wrapper
{
width: 100%;
height: 518px;
margin: 0 auto;
padding-top: 25px;
border-bottom: 0;
text-align: left;
background: #F5F5F6 url(‘../images/ajax-loader.gif’) no-repeat;
}

[jimbwayne]

figured this one out! thanks.

[Author]

Posts