CODEWITHSUNDEEP
htmlcss
Forb3s
Forb3s

Reputation: 37

Can't figure out why a section of my css is not showing up properly

I'm staging up a site and have been using "background-color" tags in my CSS to debug where each block (section) is located. I've ran into a bit of a snag with my "#mainContent" section and can't figure out why the background-color (used for debugging) is not showing up.

Here's a link to JSFIDDLE for the entire page code: http://jsfiddle.net/JGAd6/

Here's the code associated with that section:

-- HTML --

<div id="mainContentWrapper">

    <div id="mainContent">

        <div id="services">

            <div class="serviceNavLink"><a href="#">Marketing Strategy</a>
                <p>Qui tonx helvetica master cleanse, odd future cupidatat raw 
                denim fugiat et intelligentsia quis semiotics quinoa. Gentrify pork belly consequat synth. Portland ethical salvia, ex sunt mustache flexitarian art party wayfarers. Tousled ennui scenester, nostrud brunch banjo raw denim pug pour-over. Nesciunt synth mlkshk keytar, skateboard fashion axe reprehenderit umami pug bespoke.</p>
            </div>
            <div class="serviceNavLink"><a href="#">Outsourced Marketing</a>
                <p>Qui tonx helvetica master cleanse, odd future cupidatat raw denim 
                fugiat et intelligentsia quis semiotics quinoa. Gentrify pork belly consequat synth. Portland ethical salvia, ex sunt mustache flexitarian art party wayfarers. Tousled ennui scenester, nostrud brunch banjo raw denim pug pour-over. Nesciunt synth mlkshk keytar, skateboard fashion axe reprehenderit umami pug bespoke.</p>
            </div>
            <div class="serviceNavLink"><a href="#">Market Research</a>
                <p>Qui tonx helvetica master cleanse, odd future cupidatat raw 
                denim fugiat et intelligentsia quis semiotics quinoa. Gentrify pork belly consequat synth. Portland ethical salvia, ex sunt mustache flexitarian art party wayfarers. Tousled ennui scenester, nostrud brunch banjo raw denim pug pour-over. Nesciunt synth mlkshk keytar, skateboard fashion axe reprehenderit umami pug bespoke.</p>          
            </div>

        </div>

    </div>  

</div>

-- CSS --

#headerWrapper, #topContentWrapper, #mainContentWrapper, #footerWrapper {
width:100%;
clear:both;
}

#headerContent, #topContent, #mainContent, #footerContent {
width:955px;
margin-left: auto;
margin-right: auto;

padding-right: 1em;
padding-left: 1em;
}


#mainContentWrapper {
border:1px solid #000; /* DEBUG ONLY */
background-color: #61e9a1; /* DEBUG ONLY */
}

#mainContent {
font-size: 1.2em;
background-color:ff0000; /* DEBUG ONLY */
line-height: 1.6em;

padding-top: 1em;
padding-bottom: 1em;
}

#services a:hover {
color: #000;
}

#services p {
width:200px;
font-size: 14px;
}

Upvotes: 0

Views: 111

Answers (2)

j08691
j08691

Reputation: 207861

If you're referring to the red background not appearing you need to change your CSS to:

#mainContent {
font-size: 1.2em;
background-color:#ff0000; /* DEBUG ONLY */
line-height: 1.6em;
overflow:auto;
padding-top: 1em;
padding-bottom: 1em;
}

jsFiddle example

I added an overflow:auto rule and inserted a missing # for your background color declaration.

Upvotes: 2

dewyze
dewyze

Reputation: 979

I think your missing the #?

background-color:#ff0000; /* DEBUG ONLY */

http://jsfiddle.net/JGAd6/1/

Upvotes: 2

Related Questions