Jump to content

Firefox Is Ignoring My Background-color...


Recommended Posts

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:new-footer.gifBut in Firefox, the lighter green is not showing up, and looks like this:new-footer2.gifHere 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,

Link to post
Share on other sites

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.

Link to post
Share on other sites
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;}

Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...