background color or image not showing up for paragraph

I can get all other style specs to show up on the paragrah, but I can't get the background color or the background image to show up


<div id="nav">
            <div id="navLinks">
                <div>
                    <div><img src="images/Home.jpg" alt="Home" /></div>
                    <p>
                    Home
                    </p>
                </div>
           </div>
        </div>

Open in new window


Css

#nav
{
    border: 2px solid #152f56;
    border-radius:7px;
      overflow:hidden;
      padding:10px 0;
      margin-top:20px;
      text-align: center;
}


#navLinks
{
 padding-left: 12px;  
}

#navLinks div
{
    width: 120px;
    height: 110px;
    border: 1px solid #152f56;
    border-radius:7px;
      overflow:hidden;
      float: left;
      margin-right: 7px;
}

#navLinks div div
{
    border:0;
    border-radius:0;
    height:90px;        
}

#navLinks img
{
    display:block;
}

#navLinks p
{
    margin:0;
    height:20px;
    font-size:14px;
    text-align:center;
    line-height:20px;
    font-weight:bold;
    color:Blue;
    background-color:#052e53;
    background-image:url("images/navTextBg.jpg");
    background-repeat:repeat-x;
    text-transform:uppercase;
}

See attached image with a part of the nav. The paragraph area under the img in the nav is still white and won't show either the background color or the background image. All other css attributes are working for the paragraph
navSample.jpg
LVL 9
BobHavertyComhAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ScorchDCommented:
Just take the height off the p tag
0
BobHavertyComhAuthor Commented:
OK, that works for the background color, but not the background image. And can you explain why a height attribute does not allow a paragraph to even show a background color? Thanks.
0
COBOLdinosaurCommented:
Guessing about what might be wrong with an out of context fragment is not very productive.  If you want a detailed analysis thenpost a link so we can see what the page is doing.

Cd&
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Chris StanyonWebDevCommented:
The code as you've posted it shows the background colour for the P tag, which you've set to a height of 20px, so it will never fill the DIV. Likewise, the image will only show for the 20px height of your paragraph. You probably want the background on #navLinks div

If your image isn't showing up, it's probably down to a path issue. The CSS is looking for the file in an 'images' folder, directly below the folder that holds your CSS file (or HTML page if it's inline!)

As Cd& says - if you want us to take a proper look at it, post a link.

Here's a working link to your code: http://jsfiddle.net/ChrisStanyon/c78Kk/
0
BobHavertyComhAuthor Commented:
Hi Chris, thanks for you reply.

The background image is 20px height with a repeat of x and was designed specifically for the paragraph. So it should fill the paragraph which is also 20px as per the code. Even if there is a sizing issue it should still at least show something. The style sheet is at the site root. As you can tell, the path for the bg image is correctly referencing images/navTextBg.jpg. I am using visual studio, and when the path is incorrect, VS underlines it but there is no underline, so even VS knows the path is correct,

I do not know why when I took the height attribute off the paragraph, at least the background color showed up for the paragraph but not the bg image. Put the height attribute back on and the background color disappears again, so the first responder was on to something, but has yet to explain why this happens or where he got his idea from.

So there is some sort of weird rule going on about a paragraph within nested divs, although that wouldn't make sense. I am actually pretty experienced in this stuff, so the basics aren't necessary to be told to me. I don't have any external place to publish yet and I am merely using localhost as Visual studio creates a mock localhost web server on the fly for previewing.
0
BobHavertyComhAuthor Commented:
Hi again Chris, best I can do right now is to post all of my html, It is an asp.net site, so that will explain the content placeholders to you, and this is the masterpage file.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="~/styles.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <div id="top">
    <div class="container">
        <div id="masthead">
            <div id="topLeft">
                <img alt="logo" src="images/PremaxLogoNewTrans.png" />
            </div>
            <div id="topRight">
                <div id="slogan"><img src="images/slogan.png" alt="Ultimate CNC Machining Solutions" /></div>
                <div id="topContact"><img src="images/phone2.png" alt="610-326-3860" />&nbsp;610-326-3860</div>   
            </div>
        </div>
        <div style="clear:both"></div>
        <div id="navButtons"><img src="images/quoteButton.jpg" alt="Get a Quote" /><img src="images/uploadButton.jpg" alt="Get a Quote" /></div>
        <div id="nav">
            <div id="navLinks">
                <div>
                    <div><img src="images/Home.jpg" alt="Home" /></div>
                    <p>
                    Home
                    </p>
                </div>
                <div>
                    <div><img src="images/Why Choose Premax.jpg" alt="Why Choose Premax" /></div>
                    <p>
                    Why Choose Us
                    </p>
                </div>
                <div>
                    <div><img src="images/Expertise.jpg" alt="Expertise" /></div>
                    <p>
                    Expertise
                    </p>
                </div>
                <div>
                    <div><img src="images/Equipment.jpg" alt="Equipment" /></div>
                    <p>
                    Equipment
                    </p>
                </div>
                <div>
                    <div><img src="images/Facility.jpg" alt="Facility" /></div>
                    <p>
                    Facility
                    </p>
                </div>
                <div>
                    <div><img src="images/Inspection.jpg" alt="Inspection" /></div>
                    <p>
                    Inspection
                    </p>
                </div>
                <div>
                    <div><img src="images/Prototype Machining.jpg" alt="Protoype Machining" /></div>
                    <p>
                    Prototypes
                    </p>
                </div>
                <div>
                    <div><img src="images/Contact Us.jpg" alt="Contact Us" /></div>
                    <p>
                    Contact us
                    </p>
                </div>
            </div>
        </div>
        <div style="clear:both"></div>
        </div>
    </div>
    <div id="middle">
    <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
    </div> 
    
</body>
</html>

Open in new window


Also, here is the full css
body 
{
	background-color:#f0f0f0;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	padding:0;
	text-align:center;
	margin:0;
}

html
{
    margin:0;
	padding:0;
}


ul
{
    margin:0;
    padding:0;
}

#masthead 
{
    overflow:visible;
    margin-bottom:15px;
}

#middle
{
    height:300px;
    border: 2px solid #CCC;
    border-radius:7px;
	overflow:hidden;
	width:1060px;
    margin: 0 auto;
    
}


#nav
{
    
    border-radius:7px;
	overflow:hidden;
	padding:10px 0;
	text-align: center;
	background-color:#152f56;
	/*background-image:url("images/topBg.jpg");*/
	background-repeat:repeat-x;
}

#navButtons
{
    text-align:right;
    margin-bottom:5px;
}

#navButtons img
{
    margin-left:5px;
    /*border: 1px solid #152f56;*/
    border-radius:7px;
    
}

#navLinks
{
 padding-left: 15px;   
}

#navLinks div
{
    width: 115px;
    height: 110px;
    border: 2px solid #deeffa;
    border-radius:7px;
	overflow:hidden;
	float: left;
	margin-right: 11px;
}

#navLinks div div 
{
    border:0px;
    border-radius:0;
    height:90px;     
}

#navLinks img
{

Open in new window


Here is a screen cap where the background color shows up because the height attribute is taken off the paragragh. The paragraph is the link text.
sample.jpg
0
Chris StanyonWebDevCommented:
Right. I see what's happening. You have a rule for #navLinks div that sets a float. This is being passed on to the inner DIVs. Just add a float:none to the inner DIVs:

#navLinks div div {
    border: 0 none;
    border-radius: 0 0 0 0;
    float: none;
    height: 90px;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BobHavertyComhAuthor Commented:
Aha!! Ding ding ding. Good catch. So it looks like the background image WAS showing up the whole time, but it was showing up behind the images at the top of the containing div since the images div inherited the float attribute and therefore wasn't taking up any space. Now it all makes perfect sense. I have regained my sanity now. Thanks a bunch
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.