I have a div that won't display it's background color. It does display its color, but not the background color. Has this happened to anyone else? I'm a C# programmer, but I'm new to CSS. I find it to be very, very clumsy.
When I have have this wort of problem its usually been because anothr part of the stylesheet is influencing the element youa re trying to change in some way. because CSS is "cascading" see if theres somthing further down in the chain. if you really cant get it to work just try changing the background of every other div in CSS until you find the one that effects it and then work out why.
Yes, thank you. That's the problem. I had set a background color in a 'body' selector. Strangely, when I comment out the the 'body' selector's background definition, the entire page takes the color of my div! This happens even though my div has width of only 33% and is nested below the body. Somehow, the body definition inherits the style of a lower level element. the parent inherits a characteristic from the child. Bizarre. The inheritance model in CSS is obviously different than for C#. 'Different' is the nice word for it. ;-)
Sure Katy. I wasn't sure what the rules were for long posts. Warning: this is a first try at CSS for me, so the HTML is a parody of my "video game" life. LOL Don't take it seriously. The CSS has the body.background commented out. The problem div(s) is styled with .contentBlock CSS codes: body { font: 10pt/16pt myriad pro; color: Azure ; /* background: #4a4a4a; */ margin: 0px; z-index: -1; } #page { padding: 2%; z-index: 0; } #page a:link, a:visited { color: #ffe4b5; text-decoration: none; } #page a:hover { color: #b0c4de; } #siteBranding { z-index: 1; } #siteBranding h1 { font-size: 700%; margin-left: 2%; line-height: 0px; } #siteBranding h2 { font-size: 200%; line-height: 0px; } #mainContent { position: absolute; top: 33%; Left: 33%; width: 33%; z-index: 1; } .contentBlock { position: relative; display: inline; width: 16%; height:16%; color: #2f4f4f; background: #faf0e6; z-index: 2; } #mainOffer { position: absolute; top: 33%; Left: 66%; z-index: 1; } #mainNavigation { font-size: 8pt; position: absolute; top: 0px; right: 2%; z-index: 1; } #personalContent { } #mainNavigation ul { list-style-type: none; display: inline; } HTML codes: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="stylesheet" type="text/css" media="screen" href="jeff.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="styles" href="retro_jeff.css" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en-us" /> <title>Jeff Younger - International Man of Mystery</title> </head> <body> <div id="page"> <div id="siteBranding"> <h2>Jeffrey D. Younger</h2> <h1>super spy</h1> <h3>and international man of mystery</h3> </div> <div id="information"> <ul> <li>Mathematician</li> <li>Programmer</li> <li>Philosopher</li> <li>Polemicist</li> </ul> </div> <div id="mainNavigation"> <ul> <li><a href="register.htm">Register for a date</a></li> <li><a href="account.htm">Your account with Jeff</a></li> <li><a href="help.htm">Help! You've fallen and you can't get up</a></li> <li><a href="exit.htm">Sign out</a></li> </ul> </div> <div id="mainContent"> <div id="spyContent" class="contentBlock"> <h2>International Spy</h2> <p>Although I try to keep a low profile, saving the world is inherently public. My latest exploits have been chronicled in several international newspapers:</p> <ul> <li>New York Times</li> <li>International Herald Tribune</li> <li>Financial Times</li> </ul> <p>I have developed skills with many esoteric devices:</p> <ul> <li>Lock picks</li> <li>Bug detectors</li> <li>Secret decoder rings</li> </ul> </div> <div id="playboyContent" class="contentBlock"> <h2>International Playboy</h2> <p>I know what you're thinking. <span id="thought">He's a programmer and international spy. He can't possibly be a playboy.</span></p> <p>Wrong.</p> <p>Check out my stable of international babes:</p> <ul> <li>Scarlett Johansson</li> <li>Juliette Binoche</li> <li>Beatrice Dalle</li> <li>Julie Delpy</li> </ul> </div> </div> <div id="mainOffer"> <h1>Need help with an evil nemesis?</h1> <p>Let me know how I can help. I'm available on contract, spec, and...well...certain kinds of barter arrangements.</p> <h2>How you too can become a super-spy in three easy steps.</h2> <ol> <li>Learn some goofy "martial art."</li> <li>Get a huge movie contract.</li> <li>Laugh all the way to the bank.</li> </ol> </div> <div id="personalContent"> <h1>Your Dashboard</h1> <ul> <li>Cheesy Photos</li> <li>Places you want to go</li> <li>Places you don't want to go</li> <li>Things you want to do</li> <li>Things you don't want to do</li> </ul> </div> </div> </body> </html>
Ah, I found the error. You're using a class and an id in the same div, this is not allowed. <div id="playboyContent" class="contentBlock"> should be changed to <div class="contentBlock"> Also, when you're only setting background color I suggest to use background-color: #ffffff; background: is used for the background image, like background: #ffffff url(image.jpg) no-repeat;
Katy, thanks for telling me about background-color. Unfortunately, after removing the 'id=...' in the div tags, I still have the same reverse inheritance of background color. I'm completely stumped.
Katy, I can't because I'm just running it from my local drive. If you copy the html to a file --- that's my website right now. I've attached the html file, but this site won't let me attach a CSS file. You can copy the CSS code in my previous post into a "jeff.css." I'm coming to agree with this: http://www.cybergrain.com/archives/2004/12/css_considered.html
Now I see the problem. You set the div to display: inline; which is incorrect for the div you're trying to make, also the width and height display incorrectly. Change it to this: .contentBlock { position: relative; color: #2f4f4f; background-color: #faf0e6; z-index: 2; }
You might want to reconsider. The author of that article is particularly lacking in understanding of just what a markup language is, and how it works. In particular, his ignorance where css is concerned is overwhelming. Should you have questions on any of that author's points, I will be glad to correct his sophistries. cheers, gary
You have the background-color: in comments, take out the comments, it looks like this body { font: 10pt/16pt myriad pro; color: Azure ; /* background: #4a4a4a; */ margin: 0px; z-index: -1; } and should look like this body { font: 10pt/16pt myriad pro; color: Azure ; background-color: #4a4a4a; margin: 0px; z-index: -1; }
I'm far from a css expert and am having a similar problem wrapping my apparently aging brain around an order that works for this sort of thing. I'm working on a fluid layout that will stretch to fit wide screens. I have multiple background images to outfit my masthead, namely a body background image, a masthead background image, and a transparent logo placed inside the masthead div. If I use inline styles, backgrounds work. If I use an external stylesheet, nada works. body { font-family: "Corbel", Trebuchet MS, Arial, sans-serif; font-size: 0.75 em; color: #333333; background-color: #f9f7f2; background-image: url(images/bg.jpg); background-repeat:repeat-x; margin: 0; padding: 0; } #masthead { background-image: url(mastbg.jpg); background-repeat: no-repeat; background-position: right top; padding: 0 0 0 40px; border-bottom: 10px solid #555555; } #pagewrapper { margin: 0; } #sidecontent { background-image: url(images/menubg.jpg); background-repeat: repeat-y; width: 200px; border-right: 1px solid #616161; border-left: 1px solid #616161; } #midcolumn { padding: 24px 24px 12px; width: 180px; font-size: 0.8em; } #artwork { border-bottom: 1px solid #000000; } #menubar { font-size: 0.9em; background-color: #555555; color: #CCCCCC; } #maincontent { padding: 24px 24px 12px; font-size: .75em; line-height: 1.6em; } #maincontent p, #sidecontent p { margin: 6px 0 8px; } #maincontent h1 { padding-bottom: 6px;} #maincontent ul { color:#330066; margin-top: 0px; } .buytagline { margin: 0 0 16px 0 !important; line-height: normal !important; font-size: .9em; } p { max-width: 500px } h1, h2, h3, h4 { font-family:"Times New Roman", Times, serif; color:#CC6600; margin: 6px 0 6px 0; line-height: normal; } h1 { font-size: 1.8em; line-height: normal; } h2 { font-size: 1.5em; margin: 30px 0 0; } h3, h4 { font-size: 1.35em; margin: 24px 0 0; } #sidecontent h4 { margin: 0; font-size: 1.3em; } #footer { padding: 12px 24px; font-size: .75em; border-top: 1px solid #000000; color: #5A5A5A; } #maincontent a:link, #midcolumn a:link { color: #6600CC; text-decoration:none; } #maincontent a:visited, #midcolumn a:visited { color: #6600CC; } #maincontent a:hover, #maincontent a:active, #maincontent a:focus, #sidecontent a:hover, #midcolumn a:active, #midcolumn a:focus { color: #CC6600; } #footer a:link { color: #6600CC; text-decoration:none; } #footer a:visited { color: #6600CC; } #footer a:hover, #footer a:active, #footer a:focus { color: #CC6600; } Code (markup): HTML: <body onLoad="P7_TMopen();P7_initPM(0,15,1,-20,10)" style="background-image: url(images/bg.jpg); background-repeat:repeat-x;"> <div id="pagewrapper"> <div id="masthead" style= "background-image: url(mastbg.jpg); background-repeat: no-repeat; background-position: right top;"> <img src="images/logo.gif" width="490" height="81"></div> ... Code (markup): Any suggestions are welcome! tia, sojo
I think that solved the problem for Alcyoneus. Sojo can you post the whole HTML code.. That may help me in checking errors..
Complete HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <title>Untitled</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="robots" content="index, follow"> <meta http-equiv="window-target" content="_top"> <meta name="revisit-after" content="7 days"> <meta name="description" content =""> <meta name="Identifier-URL" content=""> <meta name="distribution" content="global"> <meta name="Coverage" content="Worldwide"> <meta name="Content-Language" content="EN"> <meta name="rating" content="General"> <meta name="author" content=""> <meta name="copyright" content=""> <script type="text/javascript" src="p7tm/p7tmscripts.js"></script> <script language="JavaScript" src="switchstyles.js"></script> <link rel="stylesheet" href="styles/general.css" type="text/css"> <link rel="stylesheet" href="p7tm/p7tmbasicbut.css" type="text/css"> <link rel="shortcut icon" href="favicon.ico"> <!--[if lte IE 6]> <style type="text/css"> #pagewrapper{ width:expression(parseInt(this.currentStyle.marginLeft)+parseInt(this.currentStyle.marginRight)-document.body.clientWidth>=-760?"760px":"auto");} #maincontent {text-align: justify; text-justify: newspaper;} </style> <![endif]--> <!--[if IE 7]> <style> #p7PMnav li{float:left;clear:both;width:100%;} </style> <![endif]--> </head> <body onLoad="P7_TMopen();P7_initPM(0,15,1,-20,10)" style="background-image: url(images/bg.jpg); background-repeat:repeat-x;"> <div id="pagewrapper"> <div id="masthead" style= "background-image: url(mastbg.jpg); background-repeat: no-repeat; background-position: right top;"> <img src="images/logo.gif" alt="company" name="company" width="490" height="81"></div> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" id="sidecontent"><img src="images/wallstj.jpg" width="200" height="212"><br> <br> <div id="p7TMnav"> <div><a href="#" onclick="P7_TMenu(this);return false">+ Corporate </a> <div><a href="#">Company A </a></div> </div> <div><a href="#" onclick="P7_TMenu(this);return false">+ Affliates </a> <div><a href="#">Company 1 </a></div> <div><a href="#">Company 2</a></div> <div><a href="#">Company 3</a></div> </div> <div><a href="#" onclick="P7_TMenu(this);return false">+ Funds</a> <div><a href="#">Company 1a</a></div> <div><a href="#">Company 1b</a></div> </div> </div> <p> </p></td> <td valign="top" id="midcolumn"><h1>Members</h1> <p><a href="#">Register</a> for Account Access<br> <br> Login:</p> <form name="login" action="logins.cfm" method="post"> <p> <input name="textfield" type="text" value="user name"> <br><img src="images/spacer.gif" width="60" height="6"><br> <input name="textfield2" type="text" value="password"> <input name="Submit" type="submit" value="go"> </p> </form> <p><a href="#">Commentary</a><br> <a href="#">Reports</a><br> <a href="#">Management </a></p> <h1>News</h1> <p>News Block Here </p> <p> </p></td> <td valign="top" id="maincontent"> <table width="98%" border="0" cellspacing="2" cellpadding="0"> <tr> <td width="64%"><h1>A Source of Inspiration </h1></td> <td width="36%"><div align="right"> <a href="javascript:ts('body',-1)"><img src="images/textsizesmall-icon.gif" alt="increase test size" width="22" height="22" border="0"></a> <a href="javascript:ts('body',1)"><img src="images/textsizelarge-icon.gif" alt="decrease text size" width="22" height="22" border="0"></a> <a href="mailto:info@castalia.com"><img src="images/feedback-icon.gif" alt="send feedback" width="22" height="22" border="0"></a> <a href="javascript:Mailit()"><img src="images/email-icon.gif" alt="email this page" width="22" height="22" border="0"></a> <a href="javascript:printWindow()"><img src="images/print-icon.gif" alt="print this page" width="22" height="22" border="0"></a></div></td> </tr> </table> <p>text content goes here<br> </p> <p align="left"> </p> </td> </tr> </table> </div> <div id="footer"> <a href="#">Home</a><img src="images/divider.jpg" width="34" height="10"> <a href="#">Site Map</a><img src="images/divider.jpg" width="34" height="10"><a href="#">Contacts</a><img src="images/divider.jpg" width="34" height="10"><a href="#">Privacy</a><img src="images/divider.jpg" width="34" height="10"><a href="#">Disclosures</a><img src="images/divider.jpg" width="34" height="10">© 2007 Company. All rights reserved. </div> </body> </html> Code (markup): Thanks for your time! sojo
Well, I think your HTML code has no error but the problem may be due to the other stylesheet "p7tm/p7tmbasicbut.css".. check if there is another style rule for "masthead" in p7tm/p7tmbasicbut.css..
I wish. p7tm/p7tmbasicbut.css pertains strictly to navigation elements. No masthead rules in there. Thanks for trying! sojo
You have a relative addy for the image, but the stylesheet is not in the same directory as the html file. <link rel="stylesheet" href="styles/general.css" type="text/css"> Code (markup): The stylesheet is looking for the image in the styles directory. But, that's not where it is, is it? cheers, gary