CSS not working in Footer in Global Content Block

[kani]

I have this code in the Global Content block for my footer:

Debx n Credx (c) 2010  |  Privacy Policy | Site by komposition

This is the code in the template:

                {global_content name='footer'}


The css exists in the stylesheet that is linked to the template, but it does not appear correctly. Here is a link to the site: http://www.debxncredx.com/and look at the footer. Now here is the original: http://www.templatemonster.com/website-templates/24753.html. The original shows a dark grey area around the footer, but my site does not show this.

All suggestions on fixing this issue are welcomed. Thank you!

[Dr.CSS]

With out seeing the original CSS I would say it's missing background-color:#000 or an image for the footer...

[uniqu3]

Maybe a property like background:#f00; would help #f00 should be your color.

Code: Select all

/*footer*/
#footer { color:#999999; font-size:0.75em;}
#footer .indent-footer{ padding:15px 50px 0 396px;}
#footer a {color:#999999; text-decoration:none}  
#footer a:hover {  text-decoration:underline}

[Dr.CSS]

I looked at the site it came from, interesting they have the demo in flash so I couldn't see what they used in footer, but yes that code is from your site and note it has no 'background' tag at all...

[kani]

Thanks so much everyone. I hadn't realized anyone had responded since I didn't have notifications turned on, which I thought I did. Bear with me, I am new to this CMS and still learning my way around.

I added in the background code to the css as suggested and yes that worked, but I don't understand why I would have to add additional code when the existing code already works in the original site. I am new to CSS so excuse my dumbness. I am including the css below of the footer since I didn't before and I should have. I apologize.


css style
/*footer*/
#footer { color:#999999; font-size:0.75em;}
#footer .indent-footer{ padding:15px 50px 0 396px;}
#footer a {color:#999999; text-decoration:none} 
#footer a:hover {  text-decoration:underline}

.jamp2{ width:40px; margin-left:6px}
select{font-size:.84em; color:#2d3331; height:20px; font-family:Tahoma;}

.indent-2{ position:relative; padding-left:10px; float:left}
.h{ height:25px}
.block-contact span{ float:right; margin-right:220px}
input{
border:1px solid #727272;
background:#ededed;
width:180px;
height:18px;
font-size:1em;
padding-left:5px;
padding-top:2px
}
textarea{
  border:1px solid #727272;
background:#ededed;
width:274px; height:297px;
font-size:1em;
padding-left:5px;
margin-bottom:21px;
overflow:auto}

css layout
/*======= footer =======*/
#footer { height:46px; }

[Dr.CSS]

If that is truly the original css for it then they for got to add any background color to the footer, most of use use something that will let us see the stylesheets, like the Web Developers tool bar for firefiox...