Firefox Is Ignoring My Background-color...

[mboehler3]

I am trying to create a footer that extends 100% horizontally and am having trouble styling the background color. I am extending the footer 100% wide, but am using 960 style to create three columns of links. Here's a screenshot of what this looks like in IE:But in Firefox, the lighter green is not showing up, and looks like this:Here is my CSS:

.footerTopGreenBar {background-color:#556c1a; width:100%; height:30px;}.footerTopYellowBar {background-color:#d4e2b1; width:100%; height:2px;}.footerBody {background-color:#88ac2e; width:100%; font-family: Arial; color:White;}.footerTitle {font-family:Arial; font-size:12pt; font-weight:bold; color:white;}ul.footerLinks {list-style-type:none;}.footerLeftalign {text-align:left;}.footerLeftaligncolumntwo {text-align:left; padding-left:30px;}.footerBottomlinks {text-align:left; margin-top:30px;}

And the HTML:

<div class="footerTopGreenBar"> </div><div class="footerTopYellowBar"> </div><div class="footerBody"><div id="content-outer"><div class="container_12"><div class="grid_4"><div class="footerLeftalign"><div class="footerTitle">Payroll</div><ul class="footerLinks"><li>How it works</li><li>Payroll Features</li><li>Payroll Pricing</li><li>Compare Payroll Services</li><li>Clergy Payroll</li><li>Guided Tour</li><li>New Payroll Enrollment</li><li>Customer Login</li><li>FAQs</li></ul></div></div><div class="grid_4"><div class="footerLeftaligncolumntwo"><div class="footerTitle">Products & Services</div><ul class="footerLinks"><li>401k Plans</li><li>Health Insurance</li><li>Workers' Compensation</li><li>Pre-Employment Screening</li><li>Compliance</li></ul></div></div><div class="grid_4"><div class="footerTitle">Payroll I.Q. Newsletter Series</div></div><div class="grid_12"><div class="footerBottomlinks">FAQ / Privacy & Security / Contact Us / Site Map / Login</div></div></div></div></div>

Thank you for your help,

[Ingolme]

You have a lot of classes of which we don't know the CSS:

<div id="content-outer"><div class="container_12"><div class="grid_4">

Any of them could be interfering.

[mboehler3]

You have a lot of classes of which we don't know the CSS:

<div id="content-outer"><div class="container_12"><div class="grid_4">

Any of them could be interfering.

.content-outer has nothing declared, it was included in the 960 demo.

.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px;}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;margin-left:10px;margin-right:10px}.container_12 .grid_4{width:300px;}

[Ingolme]

Since you're using float:left; the box is not considered when rendering the height of its parent element.Add overflow: auto; to the .footerBody class.

[mboehler3]

Since you're using float:left; the box is not considered when rendering the height of its parent element.Add overflow: auto; to the .footerBody class.

Thank you kind sir!