SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Aug 2001
    Location
    Amsterdam
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css inheritance ?

    Hi,

    I'm having some trouble with css and inheritance on my site ..

    the links in the main content are turning white or the menu link are turning black.. I think this is because I made a mistake with inheritance .. the menu links should always be white and the content links should always be black..

    can any of you see my error?

    this is the code
    HTML Code:
     
    <!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" lang="nl">
      <body>
      </div><div class=menu id=menu align=center>
      <span class="menuitem">item1</span>
      </div>
     <div id="container" class="container">
       <div class="left" id="left">
        content with links through a rte.
       </div><div class="right" id="right">
        <div class="subcontentimage">
        the right colomn with content through rte
        </div>
       </div></div>
     <div class="clear">&nbsp;</div>
    </div> <!-- end columns -->
     <div class="footer">
      <div class="footerpadding">
       footer info.. </a>
      </div>
     </div>
     </body>
    </html>
    and this is the css
    Code:
    body 
    {
     margin:0;
     padding:0;
     background:white;
     color:#333;
     font-size:76&#37;;
     font-family: verdana,helvetica,sans-serif;
     text-align:left;
    }
    h1 
    {
     font-size:1.8em;
    } 
    h2 
    {
     font-size:1.6em;
    }
    h3 
    {
     font-size:1.3em;
    }
    .menuitem A:link, A:visited, A:active, A:Hover
    {
     color: white;
     text-decoration: none;
     
    }
    .activemenuitem A:link, A:visited, A:active, A:Hover
    {
     color: white;
     text-decoration: none;
    }
    .subcontent
    {
     text-align: left;
    }
    .menuitem
    {
     position: relative;
     top: 5px;
     left: 0px;
     padding: 5px;
     padding-right : 30px;
     padding-left : 30px;
     margin-right: 0px;
     color: white;
     font-size:1.1em;
     
    }
    .activemenuitem
    {
     position: relative;
     top: 5px;
     left: 0px;
     padding: 5px;
     padding-right : 30px;
     padding-left : 30px;
     margin-right: 0px;
     color: white;
     font-size:1.1em;
     color:white;
     font-weight:bold;
     
    }
    .menu 
     {
      margin:0 auto;
      width:760px;
      height:30px;
      line-height:30px;
      background-color: red; 
     
     }
     
    #container 
    {
     margin:0 auto;
     width:760px;
    /* border-left:1px solid #333;
     border-right:1px solid #333; */
     text-align:left;
     background-color:white;
    }
    #container A:link, A:visited, A:active, A:Hover
    {
     color:black;
    }

    thanks in advance

    Peanuts
    the neigbours (free) WIFI makes it just a little more fun

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Define the css for your #container BEFORE any css related to contents of #container, such as .menuitem (which I assume will be in #left) - the menuitem colour is being over-ridden.

    Cheers
    Graeme

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why are you giving IDs and classes the same value?

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    .menuitem A:link, A:visited, A:active, A:Hover
    is not the same as
    Code:
    .menuitem A:link, .menuitem A:visited, .menuitem A:active, .menuitem A:Hover
    You want the second.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The link rendering is actually the least of your problems.
    • You have an XHTML doctype declaration, yet you have unquoted attribute values.
    • You have a Strict doctype declaration, yet you use deprecated attributes.
    • Your anchor selectors in CSS are uppercase, although the XHTML tag must be in lowercase and CSS is case-sensitive for XHTML.
    • Your markup seems to suffer from divitis, classitis and id'itis all at the same time.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Guru
    Join Date
    Aug 2001
    Location
    Amsterdam
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm there seems to be a lot wrong with my code..

    Back to the drawing board...

    Thanks!
    the neigbours (free) WIFI makes it just a little more fun


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •