CSS Selector Question 1

MasterRacker · Oct 7, 2008

Given the code below, I have a page where (at least) "category" & "desc" render properly if I use the "id" selector but not with "class". As I understand it, I should be using "class" since an "id" should only appear once on a page. Multiple uses of the same id will render correctly, but I bet it would fail a validator.

I don't know enough CSS to spot what I have hosed up. Any suggestions?

Code:

body {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 62.5%;
}

#menu {
  font-weight: Bold;
  font-size: 1.4em;
  color: #000066;
}

#category {
  font-weight: Bold;
  font-size: 1.4em;
  background-color: #CCCCFF;
  width: 100%;
}

#desc {
  font-size: 1.1em;
  color: #333333;
  padding-left: 15px;
}

#headertext {
  text-align: center;
  font-size: 1.6em;
}

#footertext {
  text-align: center;
  font-size: 1.6em;
  width: 100%; 
}

.site {
  font-weight: Bold;
  font-size: 1.2em;
  padding-left: 15px;
  padding-top: 5px;
  text-decoration: none;
}
a.site:link     {color: #AA0000;}
a.site:visited  {color: #AA0000;}
a.site:hover    {color: #CFA700;}

.url {
  font-size: 1.0em;
  color: #666666;
  padding-left: 200px;
  text-decoration: none;
}
a.url:link     {color: #666666;}
a.url:visited  {color: #666666;}
a.url:hover    {color: #666666; text-decoration: underline;}

Code:

body {
	margin: 0px;
}

#header {
	height: 75px;
	background-color: #EEEEFF;
}

#content {
	width: 100%;
	overflow: auto;
/*	background-color: #EEEEFF;  */
}

#footer {
	clear: both;
	background-color: #EEEEFF;
}

#leftcolumn {
	width: 150px;
	position: absolute;
	padding: 10px 0px 10px 5px;
	border-top: 1px solid #333333;
	border-left: 1px solid #333333;
/*	height: 100%;  */
}

#centercolumn {
	padding-left: 155px; 
	background-color: #FFFFF7;
	border: 1px solid #333333;
}

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<link href="textstyles.css" rel="stylesheet" type="text/css" />
<!-- saved from url=(0025)[URL unfurl="true"]http://www.microsoft.com/[/URL] -->
</head>
<body>
  <div id="container">
    <div id="header"><div id="headertext"><br />Useful Site Links</div></div>
    
    <div id="content">  
      <div id="leftcolumn">
        <div id="menu">
           menu 1<br />
           menu 2<br />
           menu 3<br />
           menu 4<br />
        </div>
      </div>
      
      <div id="centercolumn">
        <div id="category">Search Engines</div>
        
        <a class="site" href="[URL unfurl="true"]http://www.google.com">Google</a>[/URL]  <a class="url" href="[URL unfurl="true"]http://www.google.com">http://www.google.com</a>[/URL] 
        <div id="desc">Search engine that finds everything.</div>
		
        <span class="site">This is a site</span> <span class="url">This is a url</span>
        <div class="desc">This a detailed description of the site and what it does</div>
        
        <div class="category">Technical Forums</div>
        
        <a class="site" href="[URL unfurl="true"]http://www.tek-tips.com">Tek-Tips</a>[/URL] <a class="url" href="[URL unfurl="true"]http://www.tek-tips.com">http://www.tek-tips.com</a>[/URL]
        <div class="desc">The coolest place on the Web</div>
		
        <span class="site">This is a site</span> <span class="url">This is a url</span>
        <div class="desc">This a detailed description of the site and what it does</div>
      </div>
    </div>
  
    <div id="footer"><div id="footertext">This is footer text</div></div>
  </div>

</body>
</html>

_____
Jeff
[small][purple]It's never too early to begin preparing for [/purple]International Talk Like a Pirate Day
"The software I buy sucks, The software I write sucks. It's time to give up and have a beer..." - Me[/small]

Vragabond · Oct 7, 2008

What part of them does not render correctly. I assume it is probably an issue with specificity.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

vacunita · Oct 7, 2008

If you want to use a class, you need to have a class defined. As it is now you only have the ID's for both Category and desc defined, but no actual class is defined.

You should be using a class, so your definitions for category and desc should be classes not ID's.

In other words:

Code:

[red].[/red]category{
...
}

and  

[red].[/red]desc{
...
}

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

MasterRacker · Oct 9, 2008

DOH! That was it. Working just fine now. Thanks.

_____
Jeff
[small][purple]It's never too early to begin preparing for [/purple]International Talk Like a Pirate Day
"The software I buy sucks, The software I write sucks. It's time to give up and have a beer..." - Me[/small]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS Selector Question 1

MasterRacker

New member

Vragabond

Programmer

vacunita

Programmer

MasterRacker

New member

Similar threads

Part and Inventory Search

Sponsor