problem with display:block - background-color will not show.

[jeffreycoontz]

On a display:block element for navigation, I cannot get a background color to show up other than white.

What do I do?

[Rabbit]

You need to post your code.

[jeffreycoontz]

#mainMenu {
                z-index: 120;
                width:1100px;
        padding-top: 3px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
                background-color: #dfdfdf;
                font-family: "Trebuchet MS";
    }  
    #mainMenu li {
        position:relative; 
        display:block;        
        width:130px;
        float:left;
        border-left:1px solid #aeaeae;
        border-right:1px solid #aeaeae;
    }
    #mainMenu #li1 {
        position:relative; 
        display:block;
        width:130px;
        float:left;
        border-right:1px solid #aeaeae;
    }
    #mainMenu #li2 {
        position:relative; 
        display:block;
        width:130px;
        float:left;
        border-right:1px solid #aeaeae;
    }

[jeffreycoontz]

The background-color tag in the #mainmenu should apply to all the li tags after it.

[jeffreycoontz]

well it isn't. All I get is white space on all li tags.

[jeffreycoontz]

There is some kind of issue with display:block not wanting to show a background color.

[Rabbit]

Please use tags when posting code or formatted data.

Where's the rest of the code?

[jeffreycoontz]

Here is the navigation div with the menus.. This should give you the idea. The navigation div has a background color.

<div id="navigation">
    <ul id="mainMenu">     
    <li><a href="firstMenu.html">Home</a></li>
    <li id = "li1"><a href="firstMenu.html" >Services</a>
        <ul id = "ul1">
            <li><a href="firstMenu.html">Service 1</a></li>
            <li><a href="firstMenu.html">Service 2</a></li>
            <li><a href="firstMenu.html">Service 3</a></li>
        </ul>
    </li>
    <li id = "li2"><a href="firstMenu.html">Products</a>
        <ul id = "ul2">
            <li><a href="firstMenu.html">Product 1</a></li>
            <li><a href="firstMenu.html">Product 2</a></li>
            <li><a href="firstMenu.html">Product 3</a></li>
        </ul>
    </li>
    <li><a href="firstMenu.html">Support</a></li>
    <li><a href="firstMenu.html">Blog</a></li>
    <li id = "li3"><a href="firstMenu.html">About</a>
        <ul id = "ul3">
            <li><a href="firstMenu.html">Company History</a></li>
            <li><a href="firstMenu.html">Our Staff</a></li>
            <li><a href="firstMenu.html">Press Releases</a></li>
            <li><a href="firstMenu.html">Investor Information</a></li>
        </ul>
    </li>
    <li><a href="firstMenu.html">Contact</a></li>
</ul>

[jeffreycoontz]

I meant to put the closing div tag..just for clarity..

<div id="navigation">
    <ul id="mainMenu">     
    <li><a href="firstMenu.html">Home</a></li>
    <li id = "li1"><a href="firstMenu.html" >Services</a>
        <ul id = "ul1">
            <li><a href="firstMenu.html">Service 1</a></li>
            <li><a href="firstMenu.html">Service 2</a></li>
            <li><a href="firstMenu.html">Service 3</a></li>
        </ul>
    </li>
    <li id = "li2"><a href="firstMenu.html">Products</a>
        <ul id = "ul2">
            <li><a href="firstMenu.html">Product 1</a></li>
            <li><a href="firstMenu.html">Product 2</a></li>
            <li><a href="firstMenu.html">Product 3</a></li>
        </ul>
    </li>
    <li><a href="firstMenu.html">Support</a></li>
    <li><a href="firstMenu.html">Blog</a></li>
    <li id = "li3"><a href="firstMenu.html">About</a>
        <ul id = "ul3">
            <li><a href="firstMenu.html">Company History</a></li>
            <li><a href="firstMenu.html">Our Staff</a></li>
            <li><a href="firstMenu.html">Press Releases</a></li>
            <li><a href="firstMenu.html">Investor Information</a></li>
        </ul>
    </li>
    <li><a href="firstMenu.html">Contact</a></li>
</ul>
</div>

[jeffreycoontz]

URGENT MATTER.. cannot get background color to show up on a display:block. See above for snippets of code in the CSS.. and the code in index.

[jeffreycoontz]

PROBLEM FIXED !!

No further help necessary !

[Rabbit]

Please post your solution in case someone else runs into the same problem.

[jeffreycoontz]

There was an anchor tag with a background attribute set to #fff which was further down. I saw it and here it was:

    #mainMenu a {
        display:block;
        padding:3px;
        text-decoration:none;
        background-color:#fff;
        color:#009;
    }
I changed it to :
    #mainMenu a {
        display:block;
        padding:3px;
        text-decoration:none;
        background-color:#dfdfdf;
        color:#009;
    }