Can't get a div's background color to show.  Could it be a misplaced semi-colon?

Posted on 2013-06-17
Last Modified: 2013-06-17
Hello CSS Experts,

I had to redo a style sheet on a site (work in progress) and somehow I am unable to get a background color to show in one of my divs.

Here's the link:  Link to site

The div class is "footer". Right now it is colored #2E110C.  I don't want it to have any color at all.  I want it to be clear -- revealing the page's background graphic (paws-2.jpg) to show through uninterrupted.

You'll see via firebug my attempts to give that container a background color of  . But it is not working.

It looks like the div "container" is controlling the color in "footer".

Any suggestions?


Question by:Rowby Goren
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39254867
I think it is line 6078 on your template.css, get rid of the 2nd line background-color: #2E110C;

.container {
      max-width: 1100px;
      background-color: #2E110C;

should be
.container {
	max-width: 1100px;

Open in new window

LVL 58

Accepted Solution

Gary earned 500 total points
ID: 39254879
Just remove the div container from the footer, makes no sense for it's use in your context.
If you want auto centered content then add a div called wrap to everything and just add
margin:0 auto to that.
Repeating classes makes sense where you want elements styled the same - you don't so don't use them.

Author Comment

by:Rowby Goren
ID: 39254902
Hi GaryC123

I removed the class and it did the trick!


LVL 58

Expert Comment

ID: 39254920
It works in context but you need an auto margin/width because you're footer is now out of sync
So add a class like this
.footer {
margin: 0 auto;
width: 940px;

Author Comment

by:Rowby Goren
ID: 39254930
Yup.  Thanks  I'll add that.

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS Scroll Center with Static Side. Like EE does. 2 46
jQuery menu problem in an older browser 6 30
Responsive Image Distorting 2 28
Slow Down an Animation 3 29
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question