asked on

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

ScorchD

Just take the height off the p tag

Arnold Layne

ASKER

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.

COBOLdinosaur

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&

Chris Stanyon

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/

Arnold Layne

ASKER

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.

Arnold Layne

ASKER

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

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Arnold Layne

ASKER

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