css inheritance ?

**peanuts** · May 11, 2007 05:46

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

**Centauri** · May 11, 2007 07:14

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

**Dan Schulz** · May 11, 2007 12:00

Why are you giving IDs and classes the same value?

**Kravvitz** · May 11, 2007 14:09

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.

**AutisticCuckoo** · May 11, 2007 21:05

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.

**peanuts** · May 14, 2007 02:26

hmmm there seems to be a lot wrong with my code..

Back to the drawing board...

Thanks!

User Tag List

Thread: css inheritance ?

Thread Tools

Display

css inheritance ?

Bookmarks

Bookmarks

Posting Permissions