HTML and CSS Error, I'm drawing a blank here

Discussion in 'Web Design and Development' started by janitorC7, Mar 22, 2008.

  1. janitorC7 macrumors 6502a

    janitorC7

    Joined:
    Feb 10, 2006
    Location:
    North Hollywood, CA
    #1
    okay guys here is what I;m working on

    http://rebeccabrunk.client.ceekdesigns.com

    Why is my background color not showing up in my content area?
    and Why is my styling on the unordered list ignoring that I told it to not have bullet points?

    Here is my code pre CMS rendering

    HTML:
    <!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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="/IE7/ie7-standard-p.js" type="text/javascript"></script>
    <title><txp:page_title /></title>
    
    	<txp:css format="link" />
    </head>
    <body>
    <div id="container">
    
    <!-- head -->
      <div id="head">
      <div class="NAV" id="NAV">
              <ul>
                <li><a href="index.html">home</a></li>
                <li><a href="bio.html">biography</a></li>
                <li><a href="credits.html">credits</a></li>
                <li><a href="reel.html">reel</a></li>
                <li><a href="photos.html">photos</a></li>
                <li><a href="representation.html">representation</a></li>
                <li><a href="contact.html">contact</a></li>
                <li><a href="daughter.html">daughter</a></li>
              </ul>
        </div>
    
      </div>
    
    <!-- left -->
    <!-- right -->
    <!-- center -->
    <div id="content">
    	<txp:article limit="5" />
    	
    <txp:if_individual_article>
    	  <p><txp:link_to_prev><txp:prev_title /></txp:link_to_prev> 
    	  <txp:link_to_next><txp:next_title /></txp:link_to_next></p>
    <txp:else />
    	  <p><txp:older><txp:text item="older" /></txp:older> 
    	  <txp:newer><txp:text item="newer" /></txp:newer>
    	  </p>
    </txp:if_individual_article>
      </div>
    <!-- footer -->
    	<div id="foot"> </div>
    
    </div>
    
    </body>
    </html>
    Code:
    /* base
    ----------------------------------------------- */
    
    body {
    	margin: 0;
    	padding: 0;
    	font-family: Verdana, "Lucida Grande", Tahoma, Helvetica, sans-serif;
    	color: #000;
    	background-color: #fff;
    	background-image: url(images/background.gif);
    }
    
    blockquote, h3, p, li {
    	padding-right: 10px;
    	padding-left: 10px;
    	font-size: 0.9em;
    	line-height: 1.6em;
    }
    
    blockquote {
    	margin-right: 0;
    	margin-left: 20px;
    }
    
    h1, h2, h3 {
    	margin: 0 0 15px 0;
    	padding: 0 10px;
    	font-weight: normal;
    }
    
    h1, h2 {
    	font-family: Georgia, Times, serif;
    }
    
    h1 {
    	font-size: 1.4em;
    }
    
    h2 {
    	font-size: 1em;
    	font-style: italic;
    }
    
    hr {
    	margin: 2em auto;
    	width: 370px;
    	height: 1px;
    	color: #7a7e7d;
    	background-color: #7a7e7d;
    	border: none;
    }
    
    small, .small {
    	font-size: 0.9em;
    }
    
    /* links
    ----------------------------------------------- */
    
    a {
    	text-decoration: none;
    	color: #000;
    	border-bottom: 1px #000 solid;
    }
    
    a img {
    	border: none;
    }
    
    h1 a, h2 a, h3 a {
    	border: none;
    }
    
    h3 a {
    	font: 1.5em Georgia, Times, serif;
    }
    
    #site-name a {
    	border: none;
    }
    
    #sidebar-2 a, #sidebar-1 a {
    	color: #c00;
    	border: none;
    }
    
    /* layout
    ----------------------------------------------- */
    
    #accessibility {
    	position: absolute;
    	top: -10000px;
    }
    
    #container {
    	padding: 0px;
    	width: 750px;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    }
    
    #head {
    	text-align: center;
    	height: 439px;
    	width: 750px;
    	background-image: url(images/head.jpg);
    }
    
    #site-name {
    	margin: 15px 0;
    	font: 3em Georgia, Times, serif;
    }
    
    #site-slogan {
    	font: italic 1em Georgia, Times, serif;
    }
    
    #sidebar-1, #sidebar-2 {
    	padding-top: 50px;
    	width: 150px;
    }
    
    #sidebar-1 {
    	margin-right: 5px;
    	float: left;
    	text-align: right;
    }
    
    #sidebar-2 {
    	margin-left: 5px;
    	float: right;
    }
    
    .section_list {
    	margin: 0 0 10px 0;
    	padding: 0;
    	list-style-type: none;
    }
    
    .section_list li {
    	margin: 0 10px 2px 0;
    	padding: 0;
    }
    
    #content {
    	margin-top: 0;
    	margin-bottom: 0;
    	width: 750px;
    	background-color: F7D4D9;
    	background-image: url(images/rose.jpg);
    	background-repeat: no-repeat;
    	background-position: right top;
    }
    
    #foot {
    	margin-top: 5px;
    	clear: both;
    	text-align: center;
    }
    
    /* box model hacks
    http://archivist.incutio.com/viewlist/css-discuss/48386
    ----------------------------------------------- */
    
    #container {
    	\width: 770px;
    	w\idth: 750px;
    }
    
    #sidebar-1, #sidebar-2 {
    \width: 150px;
    w\idth: 150px;
    }
    
    /* overrides
    ----------------------------------------------- */
    
    #sidebar-2 p, #sidebar-1 p {
    	font-size: 0.8em;
    	line-height: 1.5em;
    }
    
    .caps {
    	font-size: 0.9em;
    	letter-spacing: 0.1em;
    }
    
    div.divider {
    	margin: 2em 0;
    	text-align: center;
    }
    
    /* articles
    ----------------------------------------------- */
    
    .directory {
    	list-style-type: circle;
    }
    
    .author {
    	font-style: normal;
    	font-size: 0.8em;
    }
    
    .published {
    	font-size: 0.8em;
    }
    
    /* comments
    ----------------------------------------------- */
    
    .comments_error {
    	color: #000;
    	background-color: #fff4f4;
    }
    
    ul.comments_error {
    	padding : 0.3em;
    	list-style-type: circle;
    	list-style-position: inside;
    	border: 2px solid #fdd;
    }
    
    div#cpreview {
    	color: #000;
    	background-color: #f1f1f1;
    	border: 2px solid #ddd;
    }
    
    form#txpCommentInputForm td {
    	vertical-align: top;
    }
    
    #comments-help {
    	margin: 2px 0 15px 0;
    	font-size: 0.7em;
    }
    
    /* error page
    ----------------------------------------------- */
    
    .error-status {
    	font: 1.3em Georgia, Times, serif;
    }
    .NAV {
    	list-style-type: none;
    	text-transform: uppercase;
    	line-height: 30px;
    	font-weight: bold;
    	font-family: Helvetica, sans-serif, Geneva, Arial,;
    	padding-top: 145px;
    	padding-left: 538px;
    	color: #D5C3D0;
    	font-size: 19px;
    	letter-spacing: 0.05px;
    	text-decoration: none;
    	text-align: left;	
    }
    
    .NAV a {
    	color: #D5C3D0;
    	text-decoration: none;
    	font-family: Arial, Helvetica, sans-serif;
    	list-style-type: none;
    }
    
     
  2. Makosuke macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #2
    It's because you're applying list-style-type: none to the div (and the anchor child element as well--was that intentional? I don't think it'll do anything), rather than the UL itself. Apparently that property won't be inherited from a parent div.

    Add this:
    Code:
    .NAV ul {
    
    	list-style-type: none;
    
    }
    ...and you're good.
     
  3. janitorC7 thread starter macrumors 6502a

    janitorC7

    Joined:
    Feb 10, 2006
    Location:
    North Hollywood, CA
    #3
    Ah, thanks that worked..

    anybody have any ideas on the other issue?
     
  4. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #4
    background-color: F7D4D9;

    You need a "#". Took me 2 hours to figure this one out once.
     
  5. janitorC7 thread starter macrumors 6502a

    janitorC7

    Joined:
    Feb 10, 2006
    Location:
    North Hollywood, CA
    #5
    wow, I cant believe I missed that...

    Thank You
     

Share This Page